jQuery von Kopf bis Fuß (German Edition)

haben wir bereits für Sie platziert.
    jQuery UI-Magneten: Lösung
    Jetzt haben Sie eine gut aussehende Gruppe von Buttons, deren Gestaltung sich harmonisch in das Theme für Ihr Formular einfügt.
    Probefahrt
    Bauen Sie den Code von der vorigen Seite in die Dateien sichtungen_end.html und meine_skripts.js ein. Danach öffnen Sie die Seite im Browser Ihrer Wahl, um zu überprüfen, ob alles korrekt funktioniert.
    Wow, das war einfach. Was steht denn als Nächstes auf der Liste für unser Formular?
    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.

Numerische Werte über einen Schieberegler eingeben
    Mit dem jQuery UI-Slider-Plugin können Sie Schieberegler erstellen – zum Beispiel für die Eingabe numerischer Werte –, die Benutzer mit dem Cursor bedienen können. Wie bereits gesehen, ist die Erstellung von Widgets mit jQuery UI ein Kinderspiel – die Definition von Schiebereglern ist da keine Ausnahme.

    Auch für Schieberegler gibt es eine Menge Anpassungsmöglichkeiten. Angenommen, der Benutzer soll eine Reihe von Zahlen eingeben. Der niedrigste mögliche Wert soll bei 0 liegen, der höchste bei 100. Außerdem sollen die Werte in Fünferschritten eingegeben werden. Folgende Optionen des slider-Widgets können Sie dafür einsetzen:

    Wir müssen den Schieberegler mit einem Event-Handler für das slider -Widget verbinden. Die Widget-Optionen kennen Sie bereits. Daneben verfügen viele jQuery UI-Bestandteile aber auch über mächtige Event-Handler, so auch das slider -Widget. Als dieses Buch geschrieben wurde, verfügte es über fünf verschiedene Handler:
create
,
start
,
slide
,
change
und
stop
. Anhand des Event Handlers
slide
wollen wir uns ansehen, wie der Schieberegler mit einem Eingabefeld des Formulars verbunden werden kann.

Der HTML-Code für ein slider-Widget

Der jQuery-Code für ein slider-Widget

    Lange Übung
    Ergänzen Sie die leeren Passagen im Code für die von den Kryptozoologen gewünschten Eingabefelder. Sie haben Ihnen ein paar Notizen zu den Schieberegler-Optionen hinterlassen.
    Anmerkung
    Entfernung von der Kreatur in Metern:
    Startwert sollte 0 sein.
Minimaler Abstand sollte 0 sein.
Maximale Entfernung sollte 500 sein.
Verwenden Sie ein Intervall von 3 Metern.

    Anmerkung
    Gewicht der Kreatur (in kg):
    Startwert sollte 0 sein.
Minimalgewicht sollte 0 sein.
Maximalgewicht sollte 5.000 sein.
Verwenden Sie eine Rasterweite von 5 Kilo
    Anmerkung
    Höhe der Kreatur (in cm):
    Startwert sollte 0 sein.
Minimale Höhe sollte 0 sein.
Maximale Höhe sollte 500 sein.
Verwenden Sie ein Intervall von 20 Zentimetern.
    Lange Übung Lösung
    Ergänzen Sie die leeren Passagen im Code für die von den Kryptozoologen gewünschten Eingabefelder. Sie haben Ihnen ein paar Notizen zu den Schieberegler-Optionen hinterlassen.
    Anmerkung
    Entfernung von der Kreatur in Metern:
    Startwert sollte 0 sein.
Minimaler Abstand sollte 0 sein.
Maximale Entfernung sollte 500 sein.
Verwenden Sie ein Intervall von einem Meter.

    Anmerkung
    Gewicht der Kreatur (in kg):
    Startwert sollte 0 sein.
Minimalgewicht sollte 0 sein.
Maximalgewicht sollte 5.000 sein.
Verwenden Sie eine Rasterweite von 5 Kilo
    Anmerkung
    Höhe der Kreatur (in cm):
    Startwert sollte 0 sein.
Minimale Höhe sollte 0 sein.
Maximale Höhe sollte 500 sein.
Verwenden Sie ein Intervall von 20 Zentimetern.
    Probefahrt
    Bauen Sie den Code aus der langen Übung der vorigen Seiten in Ihre Seiten ein. Danach sollten Sie sichtungen_end.html im Browser öffnen. Testen Sie die Schieberegler mit der Maus und der Tastatur (die Tasten Links- und Rechtspfeil sollten den Regler um das eingestellte Intervall weiterbewegen).

    Es müssen noch zwei weitere Schieberegler erstellt werden, für den Längen- und den Breitengrad. Dann können Sie einen weiteren Punkt auf Ihrer Checkliste abhaken.

    Auch hier kann jQuery UI Ihnen helfen.
    Das slider-Widget kann auch mit negativen Zahlen und Nachkommastellen umgehen. Sie können negative Zahlen als Werte und als Maximal- und Minimalangaben verwenden. Im Code unten