Benutzerhandbuch Abbrechen

Verwenden von jQuery UI- und Mobile-Widgets in Dreamweaver

Suchen

Zuletzt aktualisiert am 30. April 2021

Hier erfahren Sie, wie Sie Ihren Web-Projekten in Dreamweaver mit jQuery UI- und Mobile-Widgets App-ähnliche Funktionen hinzufügen können. Sie fügen Akkordeons, Registerkarten, Schieberegler und Felder mit Autovervollständigung ein, ohne Code dafür schreiben zu müssen.

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.

jQuery-Widgets einfügen

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.

Setzen Sie den Cursor auf die Stelle der Seite, an der Sie das Widget einfügen möchten.
Wählen Sie Einfügen > jQuery UI und wählen Sie das Widget aus, das eingefügt werden soll.

Wenn Sie das Bedienfeld Einfügen verwenden, finden Sie die Widgets unter der Kategorie jQuery UI.

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.

jQuery-Widgets ändern

Wählen Sie das Widget aus, das Sie ändern möchten.
Ändern Sie im Bedienfeld Eigenschaften die Eigenschaften.

Um beispielsweise für ein Tabs-Widget eine zusätzliche Registerkarte zu definieren, wählen Sie das Widget aus und klicken im Bedienfeld Eigenschaften auf +.

jQuery-Mobile-Widgets einfügen

Damit Sie die jQuery-Mobile-Widgets verwenden können, müssen Sie zunächst eine jQuery Mobile-Seite definieren, indem Sie Einfügen > jQuery Mobile > Seite auswählen.

Das Dialogfeld „jQuery Mobile-Dateien“ wird geöffnet.

Dialogfeld „jQuery Mobile-Dateien“
Ändern Sie die Standardeinstellungen im Dialogfeld „jQuery Mobile-Dateien“ oder übernehmen Sie die Standardpfade und klicken Sie dann auf OK.
Geben Sie im daraufhin angezeigten Dialogfeld „Seite“ einen Namen im Feld „ID“ ein und aktivieren oder deaktivieren Sie die Kontrollkästchen neben „Kopfzeile“ und „Fußzeile“ abhängig davon, ob Kopf- und Fußzeilenabschnitte auf Ihrer mobilen Seite angezeigt werden sollen.

Dialogfeld „Seite“
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.
Fügen Sie weitere jQuery Mobile-Widgets nach Bedarf hinzu.
Sehen Sie sich die Seite auf einem Gerät in der Vorschau an.

Weitere Informationen finden Sie unter Dreamweaver-Webseitenvorschau auf mehreren Geräten.
Speichern Sie die jQuery Mobile-Seite und alle zugehörigen Dateien.