Widgets sind kleine Webanwendungen, die in Sprachen wie DHTML und JavaScript geschrieben sind und in eine Webseite eingefügt und von der Webseite heraus ausgeführt werden können. Unter anderem bieten Web-Widgets eine Möglichkeit, Webseiten wie Desktop-Benutzeroberflächen zu gestalten.
jQuery UI-Widgets wie „Accordion“ (Akkordeon), „Tabs“ (Registerkarten), „Datepicker“ (Datumsauswahl), „Slider“ (Regler) und „Autocomplete“ (automatische Vervollständigung) bringen die vom Desktop gewohnte Anwendungserfahrung ins Web.
Das Widget „Tabs" beispielsweise kann verwendet werden, um die Funktionalität von Registerkarten in den Dialogfeldern von Desktop-Anwendungen nachzubilden.
Dreamweaver umfasst auch eine Sammlung von jQuery-Mobile-Widgets, mit denen Sie Formularelemente und andere Funktionen erstellen können, die häufig in mobilen Web-Apps verwendet werden. Sie können mit dem jQuery-Mobile-Widget beispielsweise Formularelemente für Mobilgeräte hinzufügen, z. B. Textbereiche und Kontrollkästchen.
Wenn Sie ein jQuery-Widget einfügen, wird Folgendes automatisch in den Code eingefügt:
- Verweise auf alle abhängigen Dateien
- Ein script-Tag, das die jQuery-API für das Widget enthält. Weitere Widgets werden in dasselbe script-Tag eingefügt.
Weitere Informationen zu jQuery-Widgets finden Sie unter http://jqueryui.com/demos/.
Hinweis:
Für jQuery-Effekte wird kein externer Verweis zu jquery-1.8.24.min.js eingefügt, da diese Datei automatisch enthalten ist, wenn Sie einen Effekt hinzufügen.
Wenn Sie ein jQuery-Widget auswählen, werden seine Eigenschaften im Bedienfeld Eigenschaften angezeigt.
Eine Vorschau der jQuery-Widgets können Sie in der Live-Ansicht oder in einem Browser, der jQuery-Widgets unterstützt, anzeigen.
-
Ersetzen Sie auf der in Dreamweaver angezeigten Seite den Text für die Kopfzeile, den Inhalt und die Fußzeile durch den Text, die Bilder und andere Elemente, die Ihre mobile Seite enthalten soll.
Hinweis:
Der Text sollte kurz und die Bilder klein sein, damit sie auf kleinen Bildschirmen von Mobilgeräten angezeigt werden können.
-
Sehen Sie sich die Seite auf einem Gerät in der Vorschau an.
Weitere Informationen finden Sie unter Dreamweaver-Webseitenvorschau auf mehreren Geräten.