logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 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


g features
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor