Themen
Tutorials
Tools
Herausfahrendes Fenster mit jQuery
Das Javascript-Framework jQuery ist eine kleine Wunderwaffe, mit welcher der Webentwickler eine Menge von Möglichkeiten besitzt. Die Idee die dahinter steckt ist die clientseitige Manipulation von HTML-Elementen. Effekte mit Javascript sollten aber keinesfalls aufdringlich wirken, sie sollten eher dezent eingesetzt werden.
Beispiel: Ein herausfahrendes Fenster
Durch die Bedienung des Buttons 'Fenster öffnen' fährt eine Box mit einem Text oder Bild langsam heraus. Der Button ändert sich in 'Fenster schließen', welcher durch das wiederholte Betätigen das Fenster wieder hereinfahren lässt.
Verstecktes Fenster mit Text oder Bildern..
Für die Erstellung wird nicht viel Code benötigt. Als ersten Schritt wird eine Javascriptdatei (open_window.js) angelgt, der Inhalt sieht so aus:
Jeder jQuery-Befehl wird in ein $(document).ready(function(){ }); reingepackt, die Funktion ready(function()) hat die Aufgabe den kompletten Ladevorgang erst zu beenden, bevor das Script ausgeführt wird. Wir können nun einzelne Klassen oder ID's, aber auch ganze HTML-Elemente ansprechen, dies passiert z.B. in Zeile 2, da wird die Klasse .button1 bearbeitet. Der Befehl heißt click(). Das bedeutet, wenn ein Element mit der Klasse .button1 angeklickt wird, dann passiert etwas, und zwar das was innerhalb der Funktion verschachtelt wurde (Zeilen 3-5). Dort wird das Element mit der Klasse .hidden_window angesprochen, welches mit der Funktion slideToggle() rausfährt, und zwar langsam (slow). $(this).hide() bedeutet dass .button1 sich selbst anspricht, .hide() versteckt das Element (Zeile 4). Der Befehl show() in Zeile 5 bewirkt das Gegenteil, ein unsichtbares Element (.button2) wird sichtbar gemacht. In den Zeilen 8 bis 14 läuft der gleiche Prozess für .button2 ab, so entsteht schließlich der Wechsel.
Nun müssen ein paar CSS-Styles definiert werden, dazu wird die Datei styles.css erstellt..
Die Klassen .hidden_window und .button2 werden hier auf unsichtbar gestellt (Zeilen 138, 152).
Zum Schluss können wir uns das Ergebnis in einer HTML-Datei (test.html) zusammenbauen..
Die jQuery-Bibliothek lässt sich erfreulicherweise direkt aus dem Internet einbinden (Zeile 7), alternativ ist es auch möglich die jquery.min.js-Datei herunterzuladen und auf dem Server abzulegen. In den Zeilen 9 und 10 laden wir unsere beiden angefertigten Dateien, im Bodybereich finden sich die drei Klassen .button1, .button2 und .hidden_window wieder.