jQuery von Kopf bis Fuß (German Edition)

können Sie Widgets erstellen, die als Ziel für Elemente dienen, die per Ziehen und Loslassen verschoben werden.
    Über die Kategorie Resizable können Sie Elemente durch Ziehen an den Ecken und Kanten skalierbar machen.
    Durch die Kategorie Selectable werden Elemente auswählbar, wie die Dateien auf Ihrem Desktop.
    Widgets der Kategorie Sortable können interaktiv vom Benutzer in eine neue Reihenfolge gebracht werden.
    Spitzen Sie Ihren Bleistift: Lösung
    Das Skript unten richtet die Schieberegler für die Farben Rot, Grün und Blau ein. Lesen Sie die einzelnen Zeilen und überlegen Sie sich auf Grundlage Ihres Wissens über jQuery und jQuery UI, was hier getan werden muss. Danach schreiben Sie auf, was der Code Ihrer Meinung nach tut. Wenn Sie sich bei einer Zeile nicht ganz sicher sind, ist es vollkommen okay, auch mal zu raten. Hier kommt unsere Lösung.

Die Funktion palette_aktualisieren erstellen
    Um den Farbwähler fertigzustellen, benötigen wir eine JavaScript-Funktion, mit der die Palette eingerichtet und aktualisiert werden kann. Hier sehen Sie eine Rumpfversion der Funktion. Daneben stehen einige Fragen, die Sie klären sollten, bevor Sie die fehlenden Teile ergänzen.

    Gut aufgepasst! Wir könnten eine Funktion für die Umwandlung von dezimalen in hexadezimale Werte schreiben. Oder wir benutzen die von den Schiebereglern erzeugten Werte direkt.
    Vergessen Sie nicht, dass wir den Wert der CSS-Eigenschaft
background-color
auch so angeben können:

    Das ist aber nur ein Tipp für eine der Fragen. Um die gesamte Funktion zu schreiben, ist etwas mehr Gehirnjogging angesagt.
    Übung
    Ergänzen Sie die leeren Codezeilen, um die Funktion
palette_aktualisieren
fertigzustellen.
function palette_aktualisieren() {
     var rot = __________________________________________________
     var gruen = ________________________________________________
     var blau = _________________________________________________
     var mein_rgb = _____________________________________________
     $( "#palette" )__________________________;
     $( "#rot_wert" ).val(rot );
     $( "#blau_wert" ).val( blau);
     $( "#gruen_wert" ).val( gruen);
     $( "#farb_wert" ).val(mein_rgb);
}
    Lösung zur Übung
    Ergänzen Sie die leeren Codezeilen, um die Funktion
palette_aktualisieren
fertigzustellen.
    Code-Fertiggericht
    Ergänzen Sie Ihre meine_skripts.js -Datei um den Code für die Farbwähler und die Funktion
palette_aktualisieren
von den vorigen Seiten. Bauen Sie auch die untenstehenden Zeilen ein. Sie sorgen dafür, dass die
palette_aktualisieren
-Funktion beim Laden der Seite ausgeführt wird. Dadurch erhält die Palette bereits zu Beginn eine Farbe, anstatt leer dargestellt zu werden.
$( "#rot" ).slider( "value", 127 ); $( "#gruen" ).slider( "value", 127 ); $( "#blau" ).slider( "value", 127 );
    Probefahrt
    Öffnen Sie sichtungen_end.html im Browser. Überprüfen Sie, ob die Schieberegler mit Maus und Tastatur richtig funktionieren (die Tasten Links- und Rechtspfeil sollten den Regler um das festgelegte Intervall weiterbewegen).

Und noch etwas ...
    Eine Aufgabe auf der Checkliste müssen wir noch abhaken:
    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.
    Buttons haben Sie in diesem Kapitel schon einmal benutzt. Genau genommen verwenden Sie Buttons sogar schon seit Kapitel 1 . Die letzte Aufgabe sollte also nicht allzu schwer für Sie sein.
    Es gibt keine: Dummen Fragen
    F:
F: Wir haben den Wert für
background-color
in der rgb()-Schreibweise angegeben. Wir kann ich einen Farbwähler erstellen, der die standardmäßige Hex-Schreibweise für Farben verwendet?
A:
A: Wir haben versucht, für den Farbwähler den elegantesten und einfachsten Code zu benutzen. Soll der Farbwähler die Daten in hexadizmalen Format einsammeln, so gibt es auch dafür eine Lösung.
    Auf der jQuery UI-Seite finden Sie den Beispielcode für einen einfachen Farbwähler. Rufen Sie dafür die folgende URL im Browser auf:
    http://jqueryui.com/demos/slider/#colorpicker
    Klicken Sie auf den Link »View Source« unterhalb des