[train simple – Adobe AUTHORIZED Training Center] [Auszug aus Tutorial zu neuen Funktionen in Dreamweaver CC] Das jQuery-UI-Framework bietet verschiedene Widgets wie Akkordeons und Registerkarten, die in der Web-Entwicklung oft zum Einsatz kommen.
Dreamweaver CC unterstützt jQuery-Widgets.
Die Spry-Widgets wurden durch die neueren jQuery-Widgets ersetzt.
Ich möchte nun ein jQuery-Widget verwenden, um das Anwendererlebnis mit diesem Formular zu vereinfachen.
Bevor wir loslegen, rufe ich „widgets.html“ auf.
Dabei handelt es sich um ein leeres HTML-Dokument.
Im Bedienfeld „Einfügen“ (Insert) wähle ich in diesem Menü die Kategorie „jQuery UI“, um alle verfügbaren jQuery-UI-Widgets aufzulisten.
Wenn ich z.
B.
„Accordion“ auswähle, wird das Widget innerhalb des Dokuments platziert.
Um den Inhalt dieses Widgets anzupassen, wähle ich einfach den blauen Rand des Widgets aus.
Daraufhin erscheinen alle verfügbaren Optionen im Bedienfeld „Eigenschaften“ (Properties).
Ich kann die Anzahl der Bereiche und die Animationsoptionen festlegen oder auch Icons, die innerhalb des Akkordeons erscheinen sollen.
Beim Experimentieren mit diesen Widgets werden Sie feststellen, dass sie sehr einfach zu verwenden sind.
Kehren wir zu diesem Formular zurück.
Ich rufe die Seite in einem Webbrowser auf.
Wie Sie sehen, handelt es sich um ein Standardformular mit einem einfachen CSS-Layout.
Ich möchte nun vermeiden, dass der Anwender das Datum eintippen muss.
Mithilfe eines jQuery-Widgets kann ich einen Kalender bereitstellen, in dem das Datum ausgewählt werden kann.
Natürlich bietet auch HTML5 eine Funktion zur Datumsauswahl, aber mit jQuery werden viele verschiedene Browser und Geräte unterstützt.
In diesem Fall bevorzuge ich also das jQuery-Widget.
Ich schließe das Browser-Fenster.
Als Nächstes wähle ich das Textfeld innerhalb dieses Formulars aus.
Ich lösche das Textfeld und wähle dann im Bedienfeld „Einfügen“ (Insert) das Widget „Datepicker“.
Sobald ich darauf klicke, wird der Datepicker im Formular platziert.
Im Bedienfeld „Eigenschaften“ (Properties) werden einige grundlegende Optionen angezeigt.
Ich werde meinen Content hauptsächlich in den USA bereitstellen.
Für „Gebietsschema“ (Locale) wähle ich daher „English“.
Mit „Change Month“ kann ich den Monat ändern, und mit „Change Year“ das Jahr.
Ich kann die Inline-Anzeige aktivieren, das früheste Datum (Min Date) – in diesem Fall 1 – und das späteste Datum (Max Date) festlegen.
Der Kalender, aus dem das Datum gewählt werden kann, soll 100 Tage aufweisen.
Anschließend lege ich die Anzahl Monate (Number of Months) fest, die angezeigt werden sollen.
Ich möchte nur einen Monat anzeigen und behalte deshalb den Standardwert.
Dann speichere ich das Dokument.
Betrachten wir das Ganze jetzt in einem Webbrowser.
Wenn ich in das Feld klicke, das wie ein Textfeld aussieht, erscheint ein Kalender für die Datumsauswahl.
Im Textfeld wird automatisch das Datum eingefügt, das ich ausgewählt habe.
Der Kalender vereinfacht also die Eingabe eines Datums in diesem Formular.
Die jQuery-UI-Widgets sind eine brandneue Funktion von Dreamweaver CC. [train simple – Preiswertes und kompetentes Technologie-Training] [Adobe AUTHORIZED Training Center – www.trainsimple.com]
