Kontrollera att markören står på den plats på sidan där du vill infoga widgeten.
Senast uppdaterad den
30 apr. 2026
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-widgets 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
- Skripttagg som innehåller jQuery API för widgeten. Ytterligare widgets läggs till i samma skripttagg.
Mer information om jQuery-widgets 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.
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änssnitt på Infoga-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.
Modifiera jQuery-widgets
Välj den widget du vill ändra.
Ä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 mobila jQuery widgets
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 Files öppnas.
Ändra standardinställningarna i dialogrutan jQuery Mobile files eller låt dem vara inställda på standardsökvägarna och klicka på OK.
I dialogrutan Sida som öppnas skriver du ett namn i fältet ID och markerar eller avmarkerar kryssrutorna bredvid Huvud och Sidfot beroende på om du vill ha huvud- och sidfotavsnitt på din mobilsida.
På sidan som öppnas i Dreamweaver ersätter du texten Huvud, Innehåll och Sidfot med text, bilder och andra element som du vill ha på din mobilsida.
Obs!
Håll texten kort och bilderna små för visning på små mobilskärmar.
Lägg till andra jQuery Mobile widgets efter behov.
Förhandsgranska sidan på en enhet.
Mer information finns i Förhandsgranska Dreamweaver-webbsidor på flera enheter.
Spara jQuery Mobile-sidan och alla relaterade filer.
jQuery Mobile-teman tillämpas inte med nyare jQuery-versioner
Problem
jQuery Mobile-teman, inklusive färgrutor och paneler, tillämpas inte när du använder nyare versioner av jQuery, som jQuery 3.7.1. Som ett resultat kanske jQuery-teman inte renderas korrekt eller beter sig som förväntat.
Orsak
jQuery Mobile har blivit föråldrat och underhålls inte längre aktivt. Det stöder inte jQuery 3.x-versioner, vilket leder till kompatibilitetsproblem med nyare versioner.
Lösning/Åtgärd
För att fortsätta använda jQuery Mobile-funktioner (teman, färgrutor och paneler) använder du en kompatibel, äldre version av jQuery.
Rekommenderad version: jQuery 1.11.1 (eller andra 1.x-versioner som stöds)
Exempel
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Lägg till en jQuery-version som stöds. Till exempel 1.11.1.
Se till att jQuery Mobile-biblioteket läses in efter jQuery-skriptet.
Ladda om sidan och kontrollera att teman, färgrutor och paneler renderas korrekt.
Obs!
Eftersom jQuery Mobile är föråldrat och inte längre uppdateras bör du fortsätta använda en kompatibel äldre jQuery-version för befintliga jQuery Mobile-projekt.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
