MOOSLIDE - AJAX CONTENT SLIDE
DEMO:
Slide in from top | Slide in from bottom
KURZ BESCHREIBUNG:
GRUNDINFORMATION:
This slim, on mootools based script allows to drop and slide in a container from top or bottom of the website and can hold any kind of html elements. There are lot of influence possibilities like speed, opacity, execute function after slide out, define which element should trigger the box and much more.
ERSTE SCHRITTE
Kopieren Sie mootools12.js und mooslide12.js in Ihr Javascript Verzeichnis, das CSS File in Ihr CSS Verzeichnis. Passen Sie die Pfade entsprechend an, sollten diese auf Ihrem System anders lauten.
INSTALL SCHRITTE
Öffnen Sie die Seite, in der Sie die MesageBox verwenden möchten, in einem Editor. Fügen Sie folgende Zeilen in den HEAD Bereich der Seite ein:
- <head>
- <script language="javascript" type="text/ecmascript" src="js/mootools12.js"></script>
- <script language="javascript" type="text/ecmascript" src="js/mooslide12.js"></script>
- <link href="css/socializer.css" rel="stylesheet" type="text/css" />
- </head>
Fügen Sie einen Link in Ihre Seite ein, welcher dazu dient, mooSlide ein- und auszusliden. Geben Sie dem Link eine ID, welche später verwendet wird, um den Link als Auslöser für mooSlide zu identifizieren.
Definieren Sie einen DIV Tag, mit dem Inhalt, den mooSlide anzeigen soll. Geben Sie diesem auch eine ID. ( in diesem Beispiel 'test' )
BOX HINZUFÜGEN
Fügen Sie folgenden Code vor dem schließenden BODY Tag ein:
<script language="javascript" type="text/ecmascript">
var px = new mooSlide2({
slideSpeed: 1700,
fadeSpeed: 500,
toggler:'toggle',
content:'test',
height:250,
removeOnClick: true,
opacity:'1',
effects:Fx.Transitions.Bounce.easeOut,
executeFunction:'sayGoodbye()',
from:'top',
loadExternal:'test.html'
});
JAVASCRIPT VARIABLEN
slideSpeed:
Dauer des Effekts zum Sliden.
fadeSpeed:
Dauer des Ausblendens in ms.
toggler:
Link ID um das Sliden auszulösen
content:
Container ID mit Inhalt der gezeigt werden soll
height:
Höhe in px des Sliders
removeOnClick:
Boolean, (0|1) definiert, ob die Box auf Klick verschwinden soll
opacity:
Float Wert, (0,0 bis 1,0) definiert die Transparenz des Sliders
executeFunction:
Name der Funktion, die beim Sliden ausgeführt werden soll. Optional.
from:
(bottom|top) definiert die Richtung, aus der geslidet werden soll.
loadExternal:
(file) definiert, ob der Inhalt des Sliders aus einer externen HTML Datei stammen soll. Überschreibt den Wert 'content'.
MEHR INFORMATION
Um die Box direkt nach dem Laden der Seite auszuführen, nutzen Sie die Funktion run();
(z.B. sofern Sie mooSlide mit px = new mooSlide(... definiert haben, setzen sie nach diesem Aufruf, px.run(); ins Dokument)
Script getestet in Firefox 2|3, IE6/IE7, Opera 9.2 and Safari for Windows 3.2. Sollten Sie einen Bug finden, bitte per Mail an admin[at]artviper.net
DOWNLOADS
Dieses Script ist für verschiedene Frame- work Versionen | Systeme erhältlich. Bitte wählen Sie entsprechend den Download.
Download versions:
| für mootools 1.1 |  |
| für motools 1.2 | |
FRAGEN?
Sollten Sie Fragen zur Einbindung haben oder einfach weiterführende Informationen benötigen, dann schreiben Sie uns>>
Erfragen Sie einfach ein Angebot für Ihr kommendes Projekt.
Interessante Links
Webdesign | PHP | AJAX
- 2010-02-03 - mootools dropDown menu - ajax menu... Just for all you mootools lovers out there, here's a drop down menu with a broad...
- 2010-01-30 - Google fighting IE6... Google plans to stop supporting the outdated IE6. Its limited support of modern ...
- 2010-01-23 - Website Thumbnail Server online... Finally the new system is online. All requests that have been made to artviper.n...
- 2010-01-19 - Free Website Thumbnails move to another server... Today, we are going to move our free screenshot service to another server, so th...
- 2010-01-17 - Website color finder produces Photoshop color pa... Our old mooColorFinder has undergone an update, and is now capable of producing ...
Aktuelle Shop Produkte
- XT Remember Bank Information
- XT Price to Image
- XT Search TagCloud
