jQuery von Kopf bis Fuß (German Edition)

UI-Effekte, -Interaktionen und -Widgets.
    URL
Testanleitung
http://jqueryui.com/demos/animate/#default
Klicken Sie den Button »Toggle Effect« an.
http://jqueryui.com/demos/effect/default.html
Wählen Sie einen Effekt aus dem Aufklappmenü und klicken Sie dann auf »Run Effect«.
http://jqueryui.com/demos/draggable/#default
Klicken Sie auf die Box mit der Beschriftung »Drag me around« und ziehen Sie sie bei gedrückter Maustaste innerhalb des umgebenden Elements hin und her.
http://jqueryui.com/demos/accordion/#default
Klicken Sie auf die verschiedenen Abschnitte, um zu sehen, wie der Akkordeon-Effekt funktioniert.
http://jqueryui.com/demos/dialog/#animated
Klicken Sie auf den Button »Open Dialog«, um eine spezielle jQuery UI-Dialogbox anzuzeigen. Das ist deutlich schöner als die JavaScript-Standardwarnmeldung, oder?
    Wer Macht Was?
    Verbinden Sie die einzelnen jQuery UI-Plugins mit der korrekten Beschreibung auf der rechten Seite. Tipp: Wenn Sie sich nicht sicher sind, stöbern Sie etwas länger auf der Demosite aus dem Abschnitt »Probefahrt« von der gegenüberliegenden Seite herum.
    Puff
Interaktion: Definiert ein DOM-Element als Ziel für ein bewegliches (»draggable«) Element.
Autocomplete
Widget: Zeigt an, wie weit ein bestimmtes Event bereits fortgeschritten ist.
Droppable
Effekt: Animiert ein Element, als würde es sich ausdehnen und in Transparenz auflösen.
Explode
Widget: Zeigt eine Liste möglicher Werte an, wenn man eine Texteingabe vornimmt.
Sortable
Effekt: Animiert ein Element, als würde es sich wie ein Rollo nach oben oder unten bewegen.
Progressbar
Widget: Erzeugt aufklappbare Bereiche für Webinhalte, die nur bei Bedarf angezeigt werden.
Resizable
Effekt: Animiert ein Element, als würde es in mehrere Teile zerfallen, die in verschiedene Richtungen verschwinden.
Blind
Interaktion: Sorgt dafür, dass Elemente durch Ziehen und Loslassen sortierbar werden.
Accordion
Interaktion: Versieht ein Element mit »Griffen«, mit denen seine Größe verändert werden kann.
    Wer Macht Was? Lösung
    Verbinden Sie die Namen der einzelnen jQuery UI-Plugins mit der passenden Beschreibung.
    Tun Sie das hier!
    Bevor wir irgendetwas mit jQuery UI anfangen können, müssen wir die gewünschten Bestandteile konfigurieren, ein »Theme« wählen und eine Kopie davon herunterladen. Führen Sie dafür die folgenden Schritte durch:
    Rufen Sie in Ihrem Browser die jQuery UI-Downloadseite auf:
http://jqueryui.com/download
Wählen Sie die Komponenten aus, die heruntergeladen werden sollen.
Wählen Sie ein Theme für Ihren Download.

    Eines der besten Merkmale von jQuery UI sind die Themes. Das jQuery-Entwicklungsteam hat bereits den nötigen CSS-Code erstellt, um die Schnittstellen gut aussehen zu lassen. Mit dem jQuery UI »theme roller« können Sie sogar Ihre eigenen Themes erstellen. Eine Galerie aller verfügbaren jQuery UI-Themes finden Sie unter
    http://jqueryui.com/themeroller/#themeGallery .
Klicken Sie den Button »Download« an.
    Sie müssen nur den Ordner entzippen und die Bibliothek in einen Projektordner einbinden.
    Auf der nächsten Seite werden wir einen Blick auf die Innereien von jQuery UI werfen.

Was ist im jQuery UI-Paket enthalten?
    Nach dem Herunterladen und Entpacken von jQuery UI finden Sie eine Ordnerstruktur wie diese hier vor:

    Sie finden den für dieses Kapitel nötigen jQuery UI-Ordner im Ordner mit dem Beispielcode, den Sie am Anfang dieses Buches heruntergeladen haben. Die Dateien befinden sich im Ordner end , einem Unterordner von ch10 .

Die Checkliste für unser Projekt
    Auch wenn jQuery UI Ihnen viel Arbeit abnimmt, gibt es noch einiges zu tun, um das neue Formular fertigzustellen. Hier ist eine Checkliste der Aufgaben, die noch erledigt werden müssen:
    1.
Das Datum einer Sichtung soll mithilfe eines grafischen Kalender-Widgets ausgewählt werden können.
2.
Gestalten Sie ansprechendere Radio-Buttons, mit denen die Art der Kreatur ausgewählt werden kann.
3.
Erstellen Sie eine Reihe von Schiebereglern zur Eingabe der Entfernung von der Kreatur, ihres Gewichts, ihrer Höhe sowie des Längen- und Breitengrads.
4.
Erstellen Sie einen Farbmischer für die Eingabe der Farbe der Kreatur.
5.
Gestalten Sie einen ansprechenderen »Abschicken«-Button für das Sichtungsformular.

Ein Kalender-Widget zur Eingabe des Sichtungsdatums erstellen
    Die integration eines jQuery UI-Widgets in ein HTML-Formular ist erstaunlich einfach. Lassen Sie uns mit dem Kalender-Widget für die Datumsauswahl