Dreamweaver en jQuery Mobile Integration

• Mei 4, 2024

In de afgelopen paar jaar, Dreamweaver^R heeft een toenemend aantal functies gekregen voor het maken van mobiele webinhoud en mobiele applicaties. Deze nieuwe upgrade naar CS6 is geen uitzondering. Dreamweaver CS6 heeft een verbeterde workflow met jQuery Mobile-functies.

Het starten van een nieuw mobiel project is eenvoudig met de nieuwe optie Pagina uit voorbeeld in het dialoogvenster Nieuw document. U kunt een jQuery Mobile-voorbeeld kiezen in de map Mobile Starters. Deze voorbeeldpagina wordt geleverd met enkele vooraf gebouwde grafische, css- en JavaScript-bestanden.

Vanaf deze voorbeeldpagina kunnen we beginnen met het bouwen van ons project door elementen aan de pagina toe te voegen.

1. In het paneel Invoegen kiezen we jQuery Mobile uit het categoriemenu. Dit geeft de voorgebouwde componenten weer.
   
   
2. Om een ​​nieuw onderdeel toe te voegen, plaatsen we onze cursor op de locatie waar het nieuwe ontwerpelement wordt toegevoegd en klikken op een van de onderdelen in de lijst. Laten we voor ons voorbeeld een schuifregelaar kiezen.
   
   Dreamweaver voegt automatisch de code voor de schuifregelaar toe aan onze pagina. In de liveweergave zien we onze nieuwe schuifregelaar.
   
   

Maar deze pagina ziet er een beetje generiek uit. We hebben een snelle en eenvoudige manier om onze pagina te stijlen met het nieuwe paneel jQuery Mobile Swatches.

1. Klik op de menubalk op Venster - jQuery Mobile Swatches. Als u de ondersteunende grafische, css- en JavaScript-bestanden nog niet hebt geladen, ziet u een pop-upvenster. Klik op Kopiëren om de bestanden te laden.
   
   
2. Het nieuwe paneel jQuery Mobile Swatches is leeg totdat u een element op uw voorbeeldpagina selecteert. Wanneer u een element selecteert, geeft het paneel de bijbehorende stalen weer die beschikbaar zijn voor dat element. Als we het koptekstelement selecteren, zien we verschillende koptekstthema's.
   
   
3. Als we overschakelen naar Live view, kunnen we op elk van de themastalen klikken om een ​​voorbeeld te zien van hoe ze eruit zullen zien.
   
   

We kunnen dit herhalen voor alle ontwerpelementen op onze pagina. Terwijl we dit doen, geeft het paneel jQuery Mobile Swatches de bijbehorende beschikbare beschikbare themastalen weer. We kunnen ook de Resolution Switcher gebruiken om een ​​voorbeeld van het ontwerp te bekijken zoals het eruit zal zien op de desktop- en tabletresoluties.

Als we de koppeling Meer thema's ophalen onder aan het deelvenster gebruiken, wordt een browser geopend voor de ThemeRoller voor jQuery Mobile-website.

* Adobe heeft mij een exemplaar van deze software ter beoordeling verstrekt.

Copyright 2018 Adobe Systems Incorporated. Alle rechten voorbehouden. Schermafbeeldingen van Adobe-producten herdrukt met toestemming van 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 en Flash Paper is / zijn ofwel [a] geregistreerde handelsmerken [s] of een handelsmerk [s] van Adobe Systems Incorporated in de Verenigde Staten en / of andere landen.

Video-Instructies: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (Mei 2024).