jQuery von Kopf bis Fuß (German Edition)

Demo-Farbwählers. Wählen Sie den HTML-, CSS- und jQuery-Code im Textfeld aus und speichern Sie ihn in einem neuen Dokument. Stellen Sie sicher, dass das neue Dokument die nötigen CSS- und jQuery-Dateien Ihres jQuery UI-Pakets einbindet. Und voilà, schon haben Sie einen Farbwähler, der hexadezimale Werte für die Farben verwendet.
F:
F: Ich brauche ein Formularfeld, das dem Benutzer bei der Eingabe Vorschläge zur Vervollständigung macht. Gibt es in jQuery UI etwas für diesen Zweck?
A:
A: Ja. Eines der neuesten Features von jQuery UI (August 2011) ist das Autocomplete-Widget. Es schlägt dem Benutzer bei der Eingabe bestimmte Suchbegriffe vor.
    Die Suchbegriffe können aus einem Java-Script-Array stammen, von einer URL oder von einer Callback-Funktion, die die Daten wie in den Kapitel 8 und Kapitel 9 beschrieben per Ajax von einem Server holt. Weitere Informationen zu diesem Widget finden Sie auf der Demoseite für jQuery UI unter der Adresse
    http://jqueryui.com/demos/autocomplete/ .
F:
F: Gibt es in jQuery UI Möglichkeiten, ein Formular zu validieren?
A:
A: Nein, leider nicht. jQuery UI stellt keine Formularvalidierung bereit. Allerdings gibt es ein Plugin, das für diesen Zweck ganz gut geeignet ist. Sie finden es unter dieser Adresse:
    http://bassistance.de/jquery-plugins/jqueryplugin-validation/
    Weitere Informationen zu diesem Plugin finden Sie auch in Anhang A .

    Das ist richtig.
    Wir haben die
click
-Methode aus jQuery und die
button
-Methode aus jQuery UI benutzt. Die Auswahl von Formularelementen (z. B. Eingabefelder, Submit-Buttons usw.) haben wir dagegen kaum behandelt. Hier eine kleine Anleitung:
    Punkt für Punkt
    $(":input")
= Alle
input-
Elemente auswählen
$(":text")
= Alle
input-
Elemente vom Typ
text
auswählen
$(":radio")
= Alle
input-
Elemente vom Typ
radio
auswählen
$(":checkbox")
= Alle
input
-Elemente vom Typ
checkbox
auswählen
$(":submit")
= Alle
input-
Elemente vom Typ
submit
auswählen
$(":reset")
= Alle
input-
Elemente vom Typ
reset
auswählen
$(":checked")
= Alle
input-
Elemente auswählen, die angekreuzt sind (Checkboxen)
$(":selected")
= Alle
input
-Elemente auswählen, die ausgewählt (selected) sind
$(":enabled")
= Alle
input-
Elemente auswählen, die aktiviert (enabled) sind
$(":disabled")
= Alle
input
-Elemente auswählen, die deaktiviert (disabled) sind
$(":password")
= Alle
input
-Elemente für die Passworteingabe auswählen
    Übung
    Schreiben Sie die Zeile Code, die meine_skripts.js hinzugefügt werden muss, um den einfachen HTML-Button in einen jQuery-Button zu verwandeln, der zu Ihrem Theme passt.
    ____________________________________________________________
    Lösung zur Übung
    Bauen Sie diese Codezeile in Ihre meine_skripts.js -Datei. Danach sollten Sie das Formular testen, indem Sie sichtungen_end.html im Browser öffnen.

    Übung Bonus
    Ihr Formular sieht sehr gut aus, aber es verschickt bis jetzt noch keine Daten. Alles, was Sie dafür wissen müssen, haben Sie allerdings schon in Kapitel 9 gelernt. Nehmen Sie sich ein wenig Zeit, um darüber nachzudenken, wie Sie dieses Formular wirklich benutzbar machen können.
    Im end -Ordner für dieses Kapitel finden Sie den nötigen Code, um die Sache in Laufen zu bringen: sichtungen.html , service.php und sichtungen.sql . Sie müssen zwar noch ein paar Dinge selbst er ledigen, aber darum geht es als Webentwickler doch, oder? Wir haben die Ajax- und JSON-Methoden aus Kapitel 9 schon eingebaut, damit das gerade erstellte Formular tatsächlich auch Daten verschicken kann.
    Sie müssen hier vollkommen selbstständig arbeiten (also das SQL-Skript sichtungen.sql ausführen, die Datenbank mit den nötigen Feldern aus dem Skript anlegen und die Ajax- bzw. JSON-Methoden zur Datei meine_skripts.js hinzufügen.) Außerdem müssen Sie die Datenbank mit ein paar Einträgen füllen, bevor Sie mit Kapitel 11 weitermachen. Falls Sie etwas Nachhilfe in MySQL, PHP oder Ajax brauchen, können Sie jederzeit noch einmal in den Kapitel 8 und Kapitel 9 nachlesen.
    Anmerkung
    Für diese Übung gibt es keine Lösung. Bei Problemen können Sie aber jederzeit unter der Adresse www.headfirstlabs.com im Forum für dieses Buch vorbeischauen, um mit den Autoren und anderen Leser darüber zu sprechen.

Ihr jQuery-Werkzeugkasten
    Damit haben Sie Kapitel 10 in der Tasche und Ihren Werkzeugkasten um jQuery UI erweitert.
    jQuery UI
    Eine offizielle jQuery-Bibliothek, die drei Haupt-Plugintypen bereitstellt: Effekte, Interaktionen und