Dreamweaver og jQuery Mobile Integration

• Kan 6, 2024

I løpet av de siste årene Dreamweaver^R har fått et økende antall funksjoner for å lage mobilt nettinnhold og mobilapplikasjoner. Denne nye oppgraderingen til CS6 er intet unntak. Dreamweaver CS6 har en forbedret arbeidsflyt med jQuery Mobile-funksjoner.

Å starte et nytt mobilprosjekt er enkelt med det nye alternativet Side fra prøve i dialogboksen Nytt dokument. Du kan velge en jQuery Mobile-prøve fra mappen Mobile Starters. Denne eksempelsiden har noen forhåndsbygde grafiske, css- og JavaScript-filer.

Fra denne eksempelsiden kan vi begynne å bygge prosjektet vårt ved å legge elementer til siden.

1. I Sett inn-panelet vil vi velge jQuery Mobile fra kategori-menyen. Dette vil vise de forhåndsbygde komponentene.
   
   
2. For å legge til en ny komponent, plasserer vi markøren på stedet der det nye designelementet blir lagt til og klikker på en av komponentene i listen. For vårt eksempel, la oss velge en glidebryter.
   
   Dreamweaver vil automatisk legge til koden for glidebryteren på siden vår. I Live-visning kan vi se vår nye skyvekontroll.
   
   

Men denne siden er litt generisk. Vi har en rask og enkel måte å style siden vår på med det nye jQuery Mobile Swatches-panelet.

1. Fra menylinjen, klikk Window - jQuery Mobile Swatches. Hvis du ikke allerede har lastet inn de støttende grafikk-, css- og JavaScript-filene, vil du se en popup-dialogboks. Klikk på Kopier for å laste inn filene.
   
   
2. Det nye jQuery Mobile Swatches-panelet er tomt til du velger et element på prøvesiden din. Når du velger et element, vil panelet vise de tilsvarende fargeprøver som er tilgjengelige for det elementet. Hvis vi velger topptekstelement, vil vi se flere toppteksttemaer.
   
   
3. Hvis vi bytter til Live-visning, kan vi klikke på hvert av temaene fargeprøver for å se en forhåndsvisning av hvordan de ser ut.
   
   

Vi kan gjenta dette for alle designelementene på siden vår. Når vi gjør dette, viser jQuery Mobile Swatches-panelet de tilsvarende tilgjengelige temaprøver. Vi kan også bruke Resolution Switcher for å forhåndsvise designen, slik det vil se ut på skrivebordets og nettbrettet.

Hvis vi bruker koblingen Få flere temaer nederst på panelet, åpnes en nettleser til ThemeRoller for jQuery Mobile-nettstedet.

* Adobe ga meg en kopi av denne programvaren for gjennomgang.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheter forbeholdt. Adobes produktskjermbilder er skrevet ut på nytt med tillatelse 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, Fyrverkeri, Bidra, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registrert varemerke [s] eller et varemerke [s] fra Adobe Systems Incorporated i USA og / eller andre land.

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