Zorg dat de cursor zich op een locatie op de pagina bevindt waar u de widget wilt invoegen.
Laatst bijgewerkt op
30 apr. 2026
Lees hoe u app-achtige functionaliteit aan uw Dreamweaver-webprojecten toevoegt met behulp van de jQuery-gebruikersinterface en mobiele widgets. U kunt accordeons, tabs, schuifregelaars en vakken voor automatisch aanvullen invoegen zonder dat u code hoeft te schrijven.
Widgets zijn kleine webtoepassingen die zijn geschreven in talen als DHTML en JavaScript en die kunnen worden ingevoegd en uitgevoerd in een webpagina. Webwidgets bieden onder andere een mogelijkheid om het gebruik van een desktop-applicatie na te bootsen op een webpagina.
Widgets van de jQuery-gebruikersinterface zoals accordeon, tabbladen, datumkiezer, schuifregelaar en automatisch aanvullen brengen de ervaring van een bureaubladtoepassing naar het web.
Zo kunt u de widget Balk met tabs gebruiken om de tabbladfunctie van dialoogvensters in bureaubladtoepassingen te repliceren.
Dreamweaver bevat ook een verzameling jQuery Mobile-widgets die u kunt gebruiken om formulierelementen en andere functies te maken die vaak in mobiele web-apps worden gebruikt. Je kunt bijvoorbeeld de jQuery Mobile-widget gebruiken om mobielvriendelijke formulierelementen toe te voegen, zoals tekstgebieden en selectievakjes.
Een jQuery-widget invoegen
Wanneer u een jQuery-widget invoegt, wordt het volgende automatisch toegevoegd aan de code:
- Verwijzingen naar alle afhankelijke bestanden
- Scripttag met de jQuery API voor de widget. Extra widgets worden toegevoegd aan dezelfde scripttag.
Voor meer informatie over jQuery widgets, zie http://jqueryui.com/demos/
Notitie
voor jQuery-effecten wordt de externe verwijzing naar jquery-1.8.24.min.js niet toegevoegd omdat dit bestand automatisch wordt opgenomen als u een effect toevoegt.
Selecteer Invoegen > jQuery-gebruikersinterface en kies de widget die u wilt invoegen.
Als u het deelvenster Invoegen gebruikt, worden de widgets weergegeven in de sectie jQuery-gebruikersinterface van het deelvenster Invoegen.
Als u jQuery-widget selecteert, worden de eigenschappen weergegeven in het deelvenster Eigenschappen.
U jQuery-widgets voorvertonen in Live View of in een browser die jQuery-widgets ondersteunt.
jQuery widgets wijzigen
Selecteer de widget die u wilt aanpassen.
Pas de eigenschappen aan in het deelvenster Eigenschappen.
Als u bijvoorbeeld een extra tab wilt toevoegen aan de widget Balk met tabs, selecteert u de widget en klikt u op '+' in het deelvenster Eigenschappen.
Mobiele jQuery widgets invoegen
Voordat je jQuery Mobile-widgets kunt gebruiken, moet je eerst een jQuery Mobile-pagina definiëren door Invoegen > jQuery Mobile > Pagina te selecteren.
Het dialoogvenster jQuery Mobile-bestanden wordt geopend.
Wijzig de standaardinstellingen in het dialoogvenster jQuery Mobile-bestanden of laat ze ingesteld op de standaardpaden en klik op OK.
Typ in het dialoogvenster Pagina dat wordt geopend een naam in het veld ID en selecteer of deselecteer de selectievakjes naast Koptekst en Voettekst op basis van of je koptekst- en voettekstsecties in je mobiele pagina wilt.
Vervang in de pagina die wordt geopend in Dreamweaver de tekst Koptekst, Content en Voettekst door de tekst, afbeeldingen en andere elementen die je in je mobiele pagina wilt.
Notitie
Houd de tekst kort en de afbeeldingen klein voor weergave op kleine mobiele screens.
Voeg andere jQuery Mobile widgets toe zoals vereist.
Bekijk een voorvertoning van de pagina op een apparaat.
Voor meer informatie, zie Voorvertoning van Dreamweaver-webpagina's op meerdere apparaten.
Sla de jQuery Mobile-pagina en alle gerelateerde bestanden op.
jQuery mobile-thema's niet toegepast met nieuwere jQuery-versies
Probleem
jQuery Mobile-thema's, inclusief stalen en deelvensters, worden niet toegepast bij gebruik van nieuwere versies van jQuery, zoals jQuery 3.7.1. Als gevolg hiervan worden jQuery-thema's mogelijk niet correct weergegeven of gedragen ze zich niet zoals verwacht.
Oorzaak
jQuery Mobile is verouderd en wordt niet langer actief onderhouden. Het ondersteunt geen jQuery 3.x-versies, wat leidt tot compatibiliteitsproblemen met nieuwere releases.
Oplossing/tijdelijke oplossing
Om jQuery Mobile-functies (thema's, stalen en deelvensters) te blijven gebruiken, gebruik je een compatibele, oudere versie van jQuery.
Aanbevolen versie: jQuery 1.11.1 (of andere ondersteunde 1.x-versies)
Voorbeeld
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Voeg een ondersteunde jQuery-versie toe. Bijvoorbeeld 1.11.1.
Zorg ervoor dat de jQuery Mobile-bibliotheek wordt geladen na het jQuery-script.
Laad de pagina opnieuw en controleer of thema's, stalen en deelvensters correct worden weergegeven.
Notitie
Omdat jQuery Mobile verouderd is en niet langer wordt bijgewerkt, blijf een compatibele verouderde jQuery-versie gebruiken voor bestaande jQuery Mobile-projecten.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
