jQuery von Kopf bis Fuß (German Edition)

jQuery für die Optimierung von Formularelementen für die Dateneingabe. Und wo wir schon dabei sind, gibt es auch gleich noch eine gesunde Dosis jQuery UI mit dazu, das ist die offizielle UI-Bibliothek für jQuery.

Cryptozoologists.org muss neu gestaltet werden
    Dr. Pattersby und Dr. Gimli haben sich zum Ziel gesetzt, so viele Daten über Kryptiden -Sichtungen wie möglich von Besuchern aus aller Welt zusammenzutragen. Ihre Website cryptozoologists.org wird von professionellen Kryptozoologen und auch Amateuren hoch geschätzt. Die beiden Betreiber haben eine neue Aufgabe für Sie: Sie sollen das ziemlich veraltete Formular für Kryptiden-Sichtungen auf den neuesten Stand bringen.

Pimpen Sie Ihr HTML-Formular
    Unten sehen Sie ein Mockup des neuen Formulars für die Kryptozoologen sowie ein paar zusätzliche Hinweise.

    Kopf-Nuss
    Die Kryptozoologen haben Ihnen hier keine leichte Aufgabe gestellt. Sie wollen eine Benutzerschnittstelle schaffen, die man sonst aus Desktop-Applikationen kennt. Welche Möglichkeiten bietet jQuery Ihrer Meinung nach, um die Anforderungen zu erfüllen?

    Frank:  Ich habe es gesehen. Im Moment wird ein einfaches HTML-Formular benutzt. Aber HTML und CSS werden nicht ausreichen, um das neue Formular für die Kryptozoologen zu erstellen.
    Jim:  Erzähl mir was Neues! Hast Du jemals versucht, Formularelemente mit CSS zu gestalten? Da ist mir ja eine Wurzelbehandlung noch lieber.
    Frank:  Tja, und jQuery ... nun ja. Ich habe in jQuery jedenfalls noch nichts gesehen, das beim Erstellen so einer Schnittstelle helfen kann.
    Joe:  Leute, irgendeine Lösung muss es doch geben. Die Leute sind schicke Schnittstellen mittlerweile gewöhnt. Also müssen wir auch einen Weg finden, so etwas zu erstellen.
    Frank:  Vermutlich brauchen wir eine Kombination aus JavaScript, jQuery und CSS, um das Design umzusetzen.
    Jim:  Da gibt es einiges zu programmieren. Allein für den Pop-up-Kalender werden wir bergeweise Code und eine Menge CSS schreiben müssen.
    Joe:  Hmmm. Vielleicht gibt es für diese Sachen ein jQuery-Plugin.
    Jim:  Ein Plugin? Gute Idee! Ein paar Kapitel weiter vorne haben wir ein Plugin benutzt, um die Tabs für die Ergebnisseite des Bit-to-Byte-Rennens zu erstellen. Also gibt es vermutlich noch mehr Plugins, oder?
    Joe:  Ja, genau. Braucht ein Entwickler ein bestimmtes Merkmal, das jQuery fehlt, kann er ein Plugin schreiben und es der jQuery-Gemeinschaft zur Benutzung zur Verfügung stellen. Auf diese Weise erspart er anderen Entwicklern eine Menge Arbeit.
    Jim:  Das heißt, vielleicht hat sich ein Entwickler oder ein Entwicklungsteam schon damit beschäftigt?
    Frank:  Das würde uns natürlich eine Menge Kopfschmerzen ersparen.
    Joe:  Lasst uns mal ein bisschen auf jQuery.com herumstöbern. Vielleicht finden wir ja etwas Passendes.

Durch jQuery UI Kopfschmerzen (und Zeit) beim Programmieren sparen
    Zum Glück der Entwickler in aller Welt besitzt jQuery eine offizielle Bibliothek mit Plugins für Benutzerschnittstellen, die für unser Projekt bestens geeignet ist. Diese Bibliothek heißt jQuery UI und enthält drei Plugin-Haupttypen für den Kern von jQuery: Effekte, Interaktionen und Widgets.

Effekt-Plugins
    jQuery UI erweitert die jQuery-Bibliothek um zusätzliche Effekte. Es stehen verschiedene Animationen wie beispielsweise »Hüpfen« (bounce), »Explosion« (explode), »Pulsieren« (pulsate) oder »Schütteln« (shake«) zur Verfügung. Außerdem gibt es in jQuery UI sogenannte Easing-Funktionen , mit denen Sie den Animationen ein realistischeres Aussehen geben können.

Interaktions-Plugins
    Interaktionen können Webapplikationen mit komplexem Verhalten versehen. Mit ihrer Hilfe können Elemente bewegt, an anderer Stelle abgelegt oder sortiert werden, um nur ein paar Möglichkeiten zu nennen.

Widget-Plugins
    Ein Web-Widget ist ein eigenständiger Baustein, der Ihre Webapplikation mit zusätzlicher Funktionalität versieht. Widgets ersparen Ihnen eine Menge Programmierarbeit und Komplexität, indem sie wiederverwendbare und bedarfsgerechte Bestandteile einer Benutzerschnittstelle zur Verfügung stellen.
    Anmerkung
    Wir werden uns bei der Arbeit an der Benutzerschnittstelle hauptsächlich mit Widgets beschäftigen.
    jQuery stellt eine Plugin-Architektur zur Verfügung, mit der Webentwickler den Kern der jQuery-Bibliothek um neue Funktionen und Fähigkeiten erweitern können.
    Probefahrt
    Unter den folgenden URLs finden Sie Beispiele zum Testen der verschiedenen jQuery