Dreamweaver a jQuery Mobile Integration

• Smieť 16, 2024

V posledných rokoch Dreamweaver^R získal čoraz viac funkcií na vytváranie mobilného webového obsahu a mobilných aplikácií. Táto nová inovácia na CS6 nie je výnimkou. Dreamweaver CS6 má vylepšený pracovný postup s funkciami jQuery Mobile.

Spustenie nového mobilného projektu je jednoduché s novou možnosťou Stránka zo vzorky v dialógovom okne Nový dokument. Vzorku jQuery Mobile si môžete vybrať zo zložky Mobile Starters. Táto vzorová stránka sa dodáva s niektorými preddefinovanými grafickými súbormi, súbormi CSS a JavaScript.

Z tejto vzorovej stránky môžeme začať budovať náš projekt pridaním prvkov na stránku.

1. Na paneli Vložiť vyberieme z ponuky kategórie jQuery Mobile. Týmto sa zobrazia preddefinované komponenty.
   
   
2. Ak chcete pridať nový komponent, umiestnime kurzor na miesto, kde sa pridá nový konštrukčný prvok, a kliknite na niektorú zo zložiek v zozname. Pre náš príklad si zvoľte Posuvník.
   
   Dreamweaver automaticky pridá kód pre posúvač na našu stránku. V zobrazení Živé zobrazenie vidíme náš nový posuvný ovládač.
   
   

Táto stránka je však trochu všeobecná. S novým panelom jQuery Mobile Swatches máme rýchly a jednoduchý spôsob, ako navrhnúť našu stránku.

1. Na paneli Menubar kliknite na položku Okno - jQuery Mobile Swatches. Ak ste ešte nenačítali podporné grafické súbory, súbory CSS a JavaScript, zobrazí sa dialógové okno. Kliknutím na Kopírovať načítajte súbory.
   
   
2. Nový panel jQuery Mobile Swatches je prázdny, kým na vzorke nezvolíte prvok. Po výbere prvku sa na paneli zobrazia príslušné políčka pre daný prvok. Ak vyberieme prvok hlavičky, zobrazí sa niekoľko tém hlavičky.
   
   
3. Ak prepneme na živé zobrazenie, kliknutím na jednotlivé políčka témy zobrazíte ukážku, ako budú vyzerať.
   
   

Môžeme to zopakovať pre všetky prvky dizajnu na našej stránke. Keď to urobíme, panel jQuery Mobile Swatches zobrazí príslušné dostupné políčka témy. Pomocou prepínača Resolution (Rozlíšenie) môžete zobraziť ukážku dizajnu tak, ako bude vyzerať na rozlíšení pracovnej plochy a tabletu.

Ak použijeme odkaz Získať viac tém v dolnej časti panela, otvorí sa prehliadač pre webovú stránku ThemeRoller for jQuery Mobile.

* Spoločnosť Adobe mi poskytla kópiu tohto softvéru na účely kontroly.

Copyright 2018 Adobe Systems Incorporated. Všetky práva vyhradené. Snímky obrazovky produktov spoločnosti Adobe znova vytlačené so súhlasom spoločnosti 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, Fireworks, Contribute, Captivate, Flash Catalyst a Flash Paper je / sú [a] registrované ochranné známky alebo ochranné známky spoločnosti Adobe Systems Incorporated v USA a / alebo iných krajinách.

Video Návody: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (Smieť 2024).