Fenster per jQuery & HTML5 Teil 2: Es kommt Bewegung ins Spiel

Im letzten und außerdem ersten Teil der Mini-Artikelserie Fenster per jQuery & HTML5 haben wir ein Grundgerüst des Fensters mit Hilfe von HTML5 und CSS3 entwickelt. Wer diesen Artikel noch nicht gelesen oder den Quellcode nicht mehr parat hat, sollte den ersten Teil unbedingt nochmals überfliegen. Denn dort werden bereits die grundlegenden Basics für die Verwendung unserer Fenstertechnologie gelegt.

Im heutigen Teil möchten wir nun endlich die versprochene Bewegung mit ins Spiel bringen. Mit dem Javascript-Framework jQuery & dem Zusatz jQuery UI und nicht einmal 20 Zeilen eigenem JS-Quellcode werden unsere Fenster bereits grundlegende Eigenschaften mitbringen, wie man sie zum Beispiel von Windows kennt. Dazu gehört zum einen das Hervorheben eines Fensters bei Mausdruck, zum anderen das Verschieben der Fenster auf dem Bildschirm und außerdem die Möglichkeit, geöffnete Fenster mitsamt Animation wieder zu schließen.

Um sich im Vorfeld einen Eindruck des Endergebnisses zu verschaffen, habe ich eine Demo hochgeladen und zusätzlich ein kurzes Video gedreht:

Die HTML-Datei aktualisieren: Javascript einbinden

Unsere HTML-Datei fenster.html aus dem ersten Teil müssen wir anfangs aktualisieren. Dazu betrachten wir nicht erneut die gesamte Datei, sondern nur den <head> – Bereich, wo Änderungen stattgefunden haben.

Betrachten wir den Quellcode im Detail:

Zeile 1 – 6: Hier hat sich nichts geändert.
Zeile 7: Wir laden das jQuery-Framework in der neusten Version über Google und binden es direkt über das script-Tag ein. Nun stehen uns die jQuery-Funktionen zur Verfügung.
Zeile 8: Wir laden die jQuery-Erweiterung jQuery UI, welche für Animationen und sonstige grafische Spielereien geschaffen wurde. Sowohl jQuery als auch jQuery UI könnte man natürlich herunterladen und über den eigenen Server einbinden. Aus Gründen der Bequemlichkeit wählen wir allerdings diesen Weg.
Zeile 9: Neben den beiden Framework-Dateien binden wir auch noch unsere eigene Javascript-Datei mit dem Namen script.js in das Dokument ein. Diese sollte sich im selben Ordner wie die fenster.html befinden.

Die Javascript-Datei: Viel Action mit wenig Quellcode

Schauen wir uns nun den Quelltext der script.js Zeile für Zeile an:

Zeile 1: Wir verwenden die jQuery-Funktion $(document).ready(), um den folgenden Quellcode erst auszuführen, wenn das DOM geladen und ausführbar ist.
Zeile 2: Die Lauf-Variable zindex brauchen wir später, um die verschiedenen Fenster bei Mausklick in den Vordergrund zu holen. Hier setzen wir den Anfangswert des Z-Index auf 1000.
Zeile 3 – 7: Wir selektieren per jQuery alle Fenster-Container (section-Element) und weisen ihnen eine anonyme Funktion bei Mausklick zu. In dieser Funktion zählen wir als erstes die vorher definierte Variable zindex um +1 hoch und weisen dem angeklickten section-Element anschließend den aktualisierten CSS-Code per .css() zu. Nun werden die Fenster bei Mausberührung jeweils in den Vordergrund gerückt, wie man es von Windows & Co gewohnt ist.
Zeile 9 – 10: Wir selektieren wieder alle Fenster und verhindern zuerst per disableSelection(), dass deren Inhalt später selektiert werden kann – dies stört nämlich beim Verschieben. Anschließend rufen wir die Funktion draggable() auf und machen das Fenster somit verschiebbar. Als Option definieren wie für handle das Element aside span, wodurch sich das Fenster nur über das entsprechende Element in der Kopfleiste verschieben lässt.
Zeile 13 – 17: Nun definieren wir nicht das gesamte Fenster, sondern nur die jeweiligen Schließen-Buttons über section aside a. Bei Mausklick starten wir wieder eine anonyme Funktion. Diese wählt in Zeile 14 über die .parents()-Funktion von jQuery das Elternelement (in diesem Fall wieder das gesamte Fenster section) aus. Anschließend starten wir eine Animation, welche das Fenster innerhalb von 500 Milisekunden durch einen Explosionseffekt verschwinden lässt. Die sogenannte Callback-Funktion in Zeile 15 wird direkt im Anschluss daran ausgeführt und sorgt dafür, dass das gesamte Fenster komplett aus dem DOM verschwindet und somit keine Altlasten hinterlässt.

Noch Wünsche offen?

Nun seid ihr dran: Habt ihr noch Fragen? Irgendetwas nicht verstanden? Oder habt ihr gar Interesse an einer Fortsetzung der kleinen Artikelserie? Falls ja, welche weitere Funktionen möchtet ihr integriert sehen?

Wie immer freue ich mich sehr über konstruktives Feedback in den Kommentaren dieses Artikels! :)