jQuery von Kopf bis Fuß (German Edition)

anfangen:
    1
Legen Sie einen link zur jQuery UI-CSS-Datei an:

2
Erstellen Sie einen

3
Definieren Sie ein schlichtes HTML-
input
-Feld.
 
 
Versehen Sie das

tag mit der ID
datumswahl
.

5
Erstellen Sie eine JavaScript-Datei und schreiben Sie den folgenden Code zwischen die geschweiften Klammern von
$(document).ready(function(){}
.
$('#datumsauswahl').datepicker();
    Öffnen Sie die Datei im Browser Ihrer Wahl und klicken Sie in das Eingabefeld.
 

jQuery UI hinter den Kulissen
    Auch wenn es fast wie Zauberei erscheint, ist jQuery UI einfach nur eine Menge sorgfältig entwickelter und gut programmierter jQuery-Code, den Sie nicht mehr selbst zu schreiben brauchen. Wie das funktioniert, wollen wir uns etwas genauer ansehen.

    Keine Sorge. Es gibt eine Reihe von Optionen.
    Einige davon finden Sie auf den folgenden Seiten.

Widgets über Optionen anpassen
    Wenn Sie sich näher mit dem datepicker-Widget beschäftigen, werden Sie bemerken, dass es eine Menge Merkmale und Optionen für die Anpassung an die eigenen Bedürfnisse gibt.

Das datepicker-Widget mit Optionen anpassen
    Da jQuery UI auf der jQuery-Bibliothek basiert, brauchen Sie nicht viel Code zu schreiben, um das datepicker-Widget an Ihre Bedürfnisse anzupassen. Als dieses Buch geschrieben wurde, gab es 46 verschiedene Optionen.

    Übung
    Schreiben Sie den Code für das datepicker-Widget, mit dem der Benutzer anhand eines Drop-down-Menüs den Monat und das Jahr ändern kann. Tipp: Wenn Sie mehrere Optionen anpassen, sollten Sie die Definitionen durch Kommas voneinander trennen.
    _____________________________________________________________________
    _____________________________________________________________________
    _____________________________________________________________________
    Lösung zur Übung
    Schreiben Sie den Code für das datepicker-Widget, mit dem der Benutzer anhand eines Drop-down-Menüs den Monat und das Jahr ändern kann. Tipp: Wenn Sie mehrere Optionen anpassen, sollten Sie die Definitionen durch Kommas voneinander trennen.
    Code-Fertiggericht
    Suchen Sie die Datei sightings_begin.html im Ordner ch10/begin und sichern Sie sie als sichtungen_end.html im Ordner end für dieses Kapitel. Fügen Sie den unten gezeigten fettgedruckten Code in die Dateien sichtungen_end.html und meine_skripts.js ein.
    Probefahrt
    Nachdem Sie den Code von der vorigen Seite eingebaut haben, öffnen Sie sichtungen_end.html in Ihrem Browser, um das datepicker-Widget zu testen. Klicken Sie auf die »Vor«- und »Zurück«-Buttons sowie auf die Drop-down-Menüs für die Auswahl von Monat und Jahr, um zu überprüfen, ob alles funktioniert.
    Der Datumswähler funktioniert!

    Haken Sie’s ab
    Damit ist der erste Punkt unserer Checkliste abgehakt. Machen wir also gleich mit Punkt 2 weiter.
    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.

Die Radio-Buttons ansprechender gestalten
    Was genau ist mit »ansprechender« gemeint? Das ist haupsächlich eine Stilfrage: Lassen Sie den Button interessanter aussehen, und mehr Leute wollen ihn anklicken. Da kommt uns das button-Widget der jQuery UI-Bibliothek gerade recht. Dieses Widget stellt die Methode
button
zur Verfügung, mit der Sie Formularelemente wie Submit-Buttons, Radio-Buttons und Checkboxen ansprechender gestalten können.

button-Widgets gruppieren
    Zum Erstellen von gruppierten Radio-Buttons gibt es in jQuery UI die
buttonset
-Methode. Durch die Angabe eines Containerelements können mehrere Radio-Buttons gruppiert werden.
    jQuery UI-Magneten
    Bringen Sie die Codemagneten in die richtige Reihenfolge, um eine Gruppe von Radio-Buttons zu erstellen. Die Benutzer sollen diese verwenden, um die Art der gesichteten Kreatur anzugeben. Ein paar Magneten