Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

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! :)

Dieser Artikel wurde am 26.09.2011 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. Danke für das tolle einfache Demo und die gute Erläuterung

    Wird es einen Teil 3 geben? Dynamisches Bearbeiten von Inhalten in unterschiedlichen Fenstern? Vielleicht sogar fensterübergreifend?

    Gruß
    Thomas

  2. Na wenn ich wünschen darf…. :)

    Ich würde gerne aus Fenster 1 eine neues Fenster öffnen (Fenster2) und dann in Fenster 2 zum Beispiel ein Formular ausfüllen. Das Ergebnis soll dann nach schließen des Fenster 2 auch in Fenster 1 zu sehen sein.

    Praktisches Beispiel: Warenkorb. Klick auf Produkt, in Fenster 2 Menge ändern. Fenster 2 zu und in Fenster 1 steht auch sofort die richtige Menge.

    Ich bekomme bei solchen Sachen immer in jquery die Krise.

  3. Mich würde das automatische Erscheinen der Fenster bei bestimmten Aktionen interessieren. Z.B. bei Klick auf einen Bereich auf der Homepage. Setze ich da das Fenster erst auf display: hide?

  4. Hallo Yvonne,

    wenn du das Fenster bereits im voraus angelegt hast und nicht dynamisch laden willst, reicht anfangs ein display:none für das Element.

    Anschließend definierst du für ein anderes Element ein Click-Event (ähnlich wie beim Schließen-Button eines Fensters) und sagst diesem:
    $(„section“).show();

    Gruß,
    Torben

  5. Leider funktioniert das Ganze nicht im IE8 oder ich bin zu doof. Im Firefox kein Problem. Sonst ist das absolut super

  6. Es kann durchaus sein, dass es im IE8 nicht funktioniert. Darauf habe ich nicht getestet beziehungsweise keine Weichen eingebaut.

    Der Quellcode sollte bei diesem Experiment so smart wie möglich bleiben ;-)

  7. Hallöchen,

    gutes Tut, ein dickes Danke.
    Im IE 8 funktioniert es ausgezeichnet. Ich musste dazu nur im Script-Tag ein docuement.createElement für die html5 Tags, section, article, aside einfügen. Danach funzte es.

  8. Wirklich sehr schick. Was mich aber gewaltig stört , ist der Cursor der sich in einen Textcursor verwandelt. Ich würde das mit der CSS unterbinden.

    Ich mache dies jeweils folgendermassen:

    #longContent, #shortContent, #navi, #sliderbutton {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -user-select: none;
    }

Schreibe einen Kommentar zu Lupo Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.