Dynamisches Ummanteln von Elementen

Der Trainer erklärt kurz, was die Filme in diesem Kapitel zum Thema haben und warum diese Hintergründe so wichtig für die Arbeit mit jQuery sind.

Der Trainer erklärt, was die Filme in diesem Kapitel zum Thema haben – die Selektionsmöglichkeiten der Bestandteile einer Webseite über Selektoren und Filter, die eine Art Verbindung aus XPath und CSS-Selektoren darstellen.

Das jQuery-Framework bietet mächtige Unterstützung für den Umgang mit Style Sheets. Zwar kann man mit reinem DHTML mittels des Style-Objekts auf CSS-Eigenschaften zugreifen, aber man hat mit verschiedenen Problemen zu kämpfen. Über jQuery werden Eigenschaften normalisiert und in allen unterstützten Browsern weitgehend identisch verfügbar gemacht.

Über jQuery werden Ihnen zahlreiche Methoden zur Verfügung gestellt, über die Sie die Webseite bzw. deren Inhalt manipulieren können. Aber auch das Durchlaufen der Webseite lässt sich mit diversen Methoden in jQuery hervorragend bewerkstelligen. Diesen Techniken widmen Sie sich gemeinsam mit dem Trainer in den folgenden Filmen.

In den Filmen dieses Kapitels kümmert sich der Trainer um die Ereignisbehandlung mit jQuery im weitesten Sinn. Das Framework vereinfacht und vereinheitlicht die extrem inhomogene Ereignisbehandlung in verschiedenen Browsern.

In den Filmen dieses Kapitels kümmern Sie sich um Effekte und Animationstechniken in jQuery. Diese sind für Besucher einer Webseite sehr eindrucksvoll, aber rein von der Programmierseite eines der einfachen Themen im jQuery-Framework.

Mit den Methoden fadeIn(), fadeOut() und fadeTo() stellt jQuery Möglichkeiten zur Verfügung, um die Transparenz von Elementen animiert zu verändern.

Jede Animationsmethode von jQuery liefert Ihnen ein Objekt vom Typ jQuery. Auf solch ein Objekt können Sie wieder selbst eine Methode von jQuery anwenden. Deshalb können Sie Animationen (wie auch andere jQuery-Methoden) verketten. Über die Punktnotation werden die Methodenaufrufe einfach nacheinander notiert und dann sequenziell abgearbeitet.

Wenn eine Animation am Laufen ist, können Sie diese mit der Methode stop() unterbrechen.

Bei der direkten Programmierung von selbst definierten Animationen würden Sie zur Steuerung der Zeitabläufe höchstwahrscheinlich rekursiv mit window.setTimeout() arbeiten und damit CSS-Eigenschaften dynamisch verändern. So ein Aufwand ist in jQuery nicht notwendig, denn es gibt dafür die Methode animate().

In diesem Video sehen Sie einen ersten Überblick zu jQuery UI anhand der Webseite des Projekts und der interaktiven Dokumentation.

jQuery UI ist nicht in der normalen jQuery-Bibliothek enthalten. Sie müssen sich die erweiterte Bibliothek zusätzlich besorgen und für Ihre Webseiten bereitstellen. Ebenso müssen dann weitere Bibliotheken eingebunden werden. In diesem Film erfahren Sie, wie das geht.

Sobald die Bibliotheken in Ihrer Webseite referenziert sind, können Sie die Komponenten und Widgets im Quellcode verwenden. In der Regel besteht auch die Anwendung komplexer Komponenten aus wenigen Quellcodezeilen. In diesem Film sehen Sie, wie einfach Sie ein Objekt in der Webseite verschiebbar machen können.

Was passiert im Hintergrund, wenn Sie mit einer jQuery-UI-Komponente arbeiten, und wie können Sie die Komponenten anpassen? In diesem Video sehen Sie es anhand eines Dialogs.

Sie sehen als weitere Beispiele von jQuery-UI-Komponenten den Umgang mit einem Datepicker, einer Accordion-Komponente und einer Tabs-Komponente sowie die Anwendung von jQuery UI-Komponenten in einem komplexen Webseitenumfeld. Zudem sehen Sie, wie Sie Methoden aus jQuery UI bei Bedarf verketten.

In diesem Video lernen Sie, wie Sie die Werte der Optionen von UI-Komponenten dynamisch auswerten und setzen können und wie Sie verschiedene Komponenten gemeinsam verwenden (anhand eines Schiebereglers – Slider – und eines Dialogs).

Die Verwendung des Eventobjekts in jQuery-UI-Komponenten und die Reaktion mittels Ereignisoptionen sowie der bind()-Methode sind Inhalte dieses Videos.

In diesem Film sehen Sie verschiedene erweiterte und sehr eindrucksvolle, aber dennoch ganz leicht anzuwendende Effekte von jQuery UI.

In jQuery UI wird die Methode animate() so erweitert, dass Sie darüber auch Farben animieren können.

Was sind jQuery-Plug-ins? Hier erfahren Sie, was unter diesem Begriff im Umfeld von jQuery verstanden wird. Der Kern des gesamten jQuery-Frameworks besteht aus jQuery Core und jQuery UI. Aber das Framework ist im Grunde beliebig erweiterbar. Diese Erweiterungen werden Plug-ins genannt. Im Grunde handelt es sich um reine JavaScript-Bibliotheken, die aber gewisse vorgegebene Regeln einhalten müssen.

In diesem Film spielt der Trainer durch, wie Sie grundsätzlich ein Plug-in verwenden können, welches Ihnen über die Plug-in-Seite von jQuery zur Verfügung gestellt wird.

Ein Plug-in erstellen Sie, wenn Sie eine bestimmte Funktionalität häufiger benötigen und diese auf einfache Art und Weise verwenden sollen. Die Erstellung von Plug-ins erfolgt in zwei Schritten. Zuerst schreiben Sie Methoden und Funktionen, die Sie zur Verfügung stellen wollen. Des Weiteren sollten Sie diese in einer eigenen JavaScript-Datei zur Verfügung stellen, die ein Anwender einbinden muss.

Es gibt ein paar wesentliche Regeln zur Erstellung eines einfachen Plug-ins. In diesem Film fasst der Autor sie zusammen.

In diesem Video sehen Sie, wie Sie komplexere, anpassbare Plug-ins erstellen können.

Sie sehen einen Twitter-Client als hoch anpassbares Plug-in, bei dem ein Anwender u.a. individuell einstellen kann, welche Hintergrundfarbe, Vordergrundfarbe, Schriftart und Schriftgröße verwendet wird. Ebenso lassen sich Twitter-spezifische Optionen wie der Autor oder die Anzahl der angezeigten Tweeds festlegen.

Ein Plug-in können Sie einfach auf den jQuery-Seiten veröffentlichen, wenn Sie dort einen Account anlegen und dann die Eckdaten zu dem Plug-in in einem Webformular eintragen.