Setzen Sie den Cursor auf die Stelle der Seite, an der Sie das Widget einfügen wollen.
Zuletzt aktualisiert am
30. April 2026
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 zu 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/.
Anmerkung
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.
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 wollen.
Ä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.
Ä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.
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.
Anmerkung
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.
jQuery Mobile-Themen werden nicht mit neueren jQuery-Versionen angewendet
Problem
jQuery Mobile-Themen, einschließlich Farbfelder und Bedienfelder, werden nicht angewendet, wenn neuere Versionen von jQuery verwendet werden, z. B. jQuery 3.7.1. Infolgedessen werden jQuery-Themen möglicherweise nicht korrekt gerendert oder verhalten sich nicht wie erwartet.
Ursache
jQuery Mobile wurde eingestellt und wird nicht mehr aktiv gepflegt. Es unterstützt keine jQuery 3.x-Versionen, was zu Kompatibilitätsproblemen mit neueren Versionen führt.
Auflösung/Problemumgehung
Um jQuery Mobile-Funktionen (Themen, Farbfelder und Bedienfelder) weiterhin zu verwenden, verwende eine kompatible, ältere Version von jQuery.
Empfohlene Version: jQuery 1.11.1 (oder andere unterstützte 1.x-Versionen)
Beispiel
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Füge eine unterstützte jQuery-Version hinzu. Zum Beispiel 1.11.1.
Stelle sicher, dass die jQuery Mobile-Bibliothek nach dem jQuery-Skript geladen wird.
Lade die Seite neu und überprüfe, ob Themen, Farbfelder und Bedienfelder korrekt gerendert werden.
Anmerkung
Da jQuery Mobile eingestellt und nicht mehr aktualisiert wird, verwende weiterhin eine kompatible Vorgängerversion von jQuery für bestehende jQuery Mobile-Projekte.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
