g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Dreamweaver and jQuery Mobile Integration

Over the past few years, DreamweaverR has been given an increasing number of features for creating mobile web content and mobile applications. This new upgrade to CS6 is no exception. Dreamweaver CS6 has an improved workflow with jQuery Mobile features.

Starting a new mobile project is simple with the new Page from Sample option in the New Document dialog box. You can choose a jQuery Mobile sample from the Mobile Starters folder. This sample page comes with some prebuilt graphic, css and JavaScript files.

From this sample page, we can begin to build our project by adding elements to the page.

  1. In the Insert panel, we will choose jQuery Mobile from the category menu. This will display the prebuilt components.

  2. To add a new component, we will place our cursor in the location where the new design element will be added and click on one of the components in the list. For our example, let's choose a Slider.

    Dreamweaver will automatically add the code for the slider to our page. In Live view, we can see our new slider control.

But this page is a little generic looking. We have a fast and easy way to style our page with the new jQuery Mobile Swatches panel.

  1. From the Menubar, click Window - jQuery Mobile Swatches. If you haven't already loaded the supporting graphic, css and JavaScript files, you will see a pop up dialog box. Click Copy to load the files.

  2. The new jQuery Mobile Swatches panel is empty until you select an element on your sample page. When you select an element, the panel will display the corresponding swatches available for that element. If we select the header element, we will see several header themes.

  3. If we switch to Live view, we can click on each the theme swatches to see a preview of how they will look.

We can repeat this for all the design elements on our page. As we do this, the jQuery Mobile Swatches panel will display the corresponding theme swatches available. We can also use the Resolution Switcher to preview the design as it will look on the desktop and tablet resolutions.

If we use the Get More Themes link at the bottom of the panel, a browser will open to the ThemeRoller for jQuery Mobile website.

*Adobe provided a copy of this software to me for review purposes.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Add Dreamweaver+and+jQuery+Mobile+Integration to Twitter Add Dreamweaver+and+jQuery+Mobile+Integration to Facebook Add Dreamweaver+and+jQuery+Mobile+Integration to MySpace Add Dreamweaver+and+jQuery+Mobile+Integration to Digg Dreamweaver+and+jQuery+Mobile+Integration Add Dreamweaver+and+jQuery+Mobile+Integration to Yahoo My Web Add Dreamweaver+and+jQuery+Mobile+Integration to Google Bookmarks Add Dreamweaver+and+jQuery+Mobile+Integration to Stumbleupon Add Dreamweaver+and+jQuery+Mobile+Integration to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor