Läs om hur du använder jQuery-gränssnitt och Mobile-widgetar för att lägga till appliknande funktioner i dina Dreamweaver-webbprojekt. Infoga dragspelspaneler, flikar, skjutreglage och rutor med automatisk komplettering utan att skriva någon kod.

Widgetar är små webbprogram som är skrivna med till exempel DHTML eller JavaScript och som kan infogas och köras på en webbsida. Webbwidgetar kan bland annat användas för att replikera upplevelser på en webbsida.

jQuery-gränssnittswidgetar som dragspelspaneler, flikar, datumväljare, skjutreglage och automatisk komplettering gör att skrivbordsupplevelsen kan överföras till webbsidan.

Flik-widgeten kan till exempel användas för att replikera flikfunktionen i dialogrutorna i skrivbordsprogrammen.

Dreamweaver innehåller även en uppsättning jQuery Mobile-widgetar som kan användas för att skapa formulärelement och andra funktioner som ofta används i mobila webbappar. Du kan till exempel använda jQuery Mobile-widgeten för att lägga till mobilvänliga formulärelement som textområden och kryssrutor.

Infoga en jQuery-widget

När du infogar en jQuery-widget läggs följande automatiskt till i koden:

  • Referenser till alla beroende filer
  • Script-tagg som innehåller jQuery API för widgeten. Ytterligare widgetar läggs till i samma script-tagg.

Mer information om jQuery-widgetar finns på http://jqueryui.com/demos/

Obs!

Extern referens till jquery-1.8.24.min.js läggs inte till för jQuery-effekter eftersom filen inkluderas automatiskt när du lägger till en effekt.

  1. Kontrollera att markören står på den plats på sidan där du vill infoga widgeten.

  2. Välj Infoga > jQuery-gränssnitt, och välj sedan den widget du vill infoga.

    Om du använder Infoga-panelen hittar du widgetarna i sektionen jQuery-gränssnittInfoga-panelen.

När du väljer en jQuery-widget visas dess egenskaper på Egenskaper-panelen.

Du kan förhandsvisa jQuery-widgetar i Live-vyn eller i en webbläsare som stöder jQuery-widgetar.

Ändra jQuery-widgetar

  1. Välj den widget du vill ändra.

  2. Ändra egenskaperna i Egenskaper-panelen.

    Om du till exempel vill lägga till en extra flik i flik-widgeten väljer du widgeten och klickar på ”+” på Egenskaper-panelen.

Infoga jQuery Mobile-widgetar

  1. Innan du kan använda någon av jQuery Mobile-widgetarna måste du först definiera en jQuery Mobile-sida genom att välja Infoga > jQuery Mobile > Sida.

    Dialogrutan jQuery Mobile-filer öppnas.

    Dialogrutan jQuery Mobile-filer
    Dialogrutan jQuery Mobile-filer

  2. Ändra standardinställningarna i dialogrutan jQuery Mobile-filer eller använd standardsökvägarna och klicka på OK.

  3. Skriv ett namn i fältet ID i dialogrutan Sida som öppnas och markera eller avmarkera kryssrutorna vid Sidhuvud och Sidfot beroende på om du vill använda sidhuvuden och sidfötter på din mobila sida.

    Dialogrutan Sida
    Dialogrutan Sida

  4. Ersätt sidhuvudet, innehållet och sidfotstexten på den sida som öppnas i Dreamweaver med den text, de bilder och övriga element du vill använda på din mobila sida.

    Obs!

    Tänk på att använda korta texter och små bilder för sidor som ska visas på små skärmar på mobila enheter.

  5. Lägg till andra jQuery Mobile-widgetar vid behov.

  6. Förhandsgranska sidan på en enhet.

    Mer information finns i Förhandsgranska Dreamweaver-webbsidor på flera enheter.

  7. Spara jQuery Mobile-sidan och alla relaterade filer.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy