Dreamweaver og jQuery Mobile Integration

• April 27, 2024

I løbet af de sidste par år, Dreamweaver^R har fået et stigende antal funktioner til oprettelse af mobilt webindhold og mobile applikationer. Denne nye opgradering til CS6 er ingen undtagelse. Dreamweaver CS6 har en forbedret arbejdsgang med jQuery Mobile-funktioner.

At starte et nyt mobilprojekt er enkelt med den nye side fra eksempelindstilling i dialogboksen Nyt dokument. Du kan vælge en jQuery Mobile-prøve fra mappen Mobile Starters. Denne eksempelside leveres med nogle forudbyggede grafik-, css- og JavaScript-filer.

Fra denne eksempelside kan vi begynde at opbygge vores projekt ved at tilføje elementer til siden.

1. I panelet Indsæt vælger vi jQuery Mobile fra kategorimenuen. Dette viser de forudbyggede komponenter.
   
   
2. For at tilføje en ny komponent vil vi placere vores markør på det sted, hvor det nye designelement tilføjes, og klikke på en af ​​komponenterne på listen. For vores eksempel, lad os vælge en skyder.
   
   Dreamweaver tilføjer automatisk koden til skyderen på vores side. I Live-visning kan vi se vores nye skyderkontrol.
   
   

Men denne side er lidt generisk. Vi har en hurtig og nem måde at style vores side på med det nye jQuery Mobile Swatches-panel.

1. Fra menulinjen skal du klikke på Window - jQuery Mobile Swatches. Hvis du ikke allerede har indlæst de understøttende grafik-, css- og JavaScript-filer, vil du se en pop-up-dialogboks. Klik på Kopier for at indlæse filerne.
   
   
2. Det nye jQuery Mobile Swatches-panel er tomt, indtil du vælger et element på din eksempelside. Når du vælger et element, viser panelet de tilsvarende farveprøver, der er tilgængelige for dette element. Hvis vi vælger overskriftselementet, vil vi se flere hovedtemaer.
   
   
3. Hvis vi skifter til Live-visning, kan vi klikke på hver af tematasterne for at se en forhåndsvisning af, hvordan de vil se ud.
   
   

Vi kan gentage dette for alle designelementer på vores side. Når vi gør dette, viser panelet jQuery Mobile Swatches de tilsvarende tilgængelige tematropper. Vi kan også bruge Resolution Switcher til at få vist et eksempel på designet, da det vil se ud på desktop- og tabletopløsningerne.

Hvis vi bruger linket Hent flere temaer i bunden af ​​panelet, åbnes en browser til ThemeRoller til jQuery Mobile-webstedet.

* Adobe leverede en kopi af denne software til mig til gennemgangsformål.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheder forbeholdes. Adobe-produktskærmbilleder (r) genudtrykt med tilladelse fra Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, fyrværkeri, Bidrage, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registreret varemærke [er] eller et varemærke [s] fra Adobe Systems Incorporated i USA og / eller andre lande.

Video Instruktioner: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (April 2024).