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 bieden de ervaring van een desktop-applicatie op het web.

Zo kunt u de widget Balk met tabs gebruiken om de tabbladfunctie van dialoogvensters in desktop-applicaties na te bootsen.

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. U kunt bijvoorbeeld de jQuery Mobile-widget gebruiken om mobielvriendelijke formulierelementen, zoals tekstgebieden en selectievakjes toe te voegen.

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. Aanvullende widgets worden aan dezelfde scripttag toegevoegd.

Zie http://jqueryui.com/demos/ voor meer informatie over jQuery-widgets

Opmerking:

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.

  1. Zorg dat de cursor zich op een locatie op de pagina bevindt waar u de widget wilt invoegen.

  2. 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 kunt jQuery-widgets voorvertonen in Live View of in een browser die jQuery-widgets ondersteunt.

jQuery-widgets aanpassen

  1. Selecteer de widget die u wilt aanpassen.

  2. 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.

jQuery Mobile-widgets invoegen

  1. Voordat u een van de jQuery Mobile-widgets kunt gebruiken, moet u een jQuery Mobile-pagina definiëren door Invoegen > jQuery Mobile > Pagina te selecteren.

    Het dialoogvenster jQuery Mobile-bestanden wordt geopend.

    Het dialoogvenster jQuery Mobile-bestanden
    Het dialoogvenster jQuery Mobile-bestanden

  2. Wijzig de standaardinstellingen in het dialoogvenster jQuery Mobile-bestanden of gebruik de ingestelde standaardpaden en klik op OK.

  3. Voer in het dialoogvenster Pagina dat wordt geopend, een naam in het veld ID in en selecteer de selectievakjes naast Koptekst en Voettekst als u een kop- en voettekstsectie op uw mobiele pagina wilt opnemen of schakel ze uit als u geen kop- en voettekstsectie wilt opnemen.

    Het dialoogvenster Pagina
    Het dialoogvenster Pagina

  4. Vervang op de pagina die in Dreamweaver wordt geopend de koptekst, de inhoud en de voettekst door de tekst, de afbeeldingen en de andere elementen die u op uw mobiele pagina wilt opnemen.

    Opmerking:

    Houd de tekst kort en de afbeeldingen klein voor weergave op kleine mobiele schermen.

  5. Voeg zo nodig meer jQuery Mobile-widgets toe.

  6. Geef een voorvertoning van de pagina op een apparaat weer.

    Zie Webpagina's van Dreamweaver voorvertonen op meerdere apparaten voor meer informatie.

  7. Sla de jQuery Mobile-pagina en alle bijbehorende bestanden op.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid