Enhanced jQuery Mobile Support - Dreamweaver CS6
Adobe continues to add support for jQuery Mobile in CS6 with the addition of new jQuery Mobile Sample Pages and the jQuery Mobile Swatch panel. The new jQuery Mobile Swatch panel allows you to quickly apply themes visually to your jQuery Mobile projects regardless of where the themes were created. The new Sample Pages feature improved architecture that makes it easy to swap out themes without affecting layout or functionality.
Opening a New jQuery Mobile Page
To open a new jQuery mobile page:
- Go to the File menu.
- Select New.
- Choose Page from Sample category.
- Select jQuery with Theme (known in past CS versions as PhoneGap).
Upon saving, files to be saved will be visible, including default theme and structure sheets. These sheets are kept separate so that Dreamweaver users can work in a more modular aspect.
Using jQuery Mobile Swatches
To Use jQuery Mobile Swatches:
- Go to the Window menu.
- Select jQuery Mobile Swatches.
Users can apply available swatches to any element on their jQuery pages by selecting an element. After selecting an element, a popup will appear with a selection of swatches available for use that are generated by the external style sheet.
Using jQuery Themeroller
Activation
To activate jQuery Themeroller, click on the Get More Themes link at the bottom of the jQuery Mobile Swatch window.
Themeroller allows users to create their own jQuery themes in a visual environment and permits the utilization of Adobe Kuler swatches by means of a click, drag and drop.
Downloading Themes
You can get custom themes by clicking the Download Theme link in the Themeroller page. The download provided will be a compressed zip file containing the theme jQuery library, starter and html pages as well as any related CSS files.
The downloaded theme from Themeroller can be applied in Dreamweaver by opening the zip file in the program, allowing the theme to be applied to current and future projects.
What's New in Dreamweaver CS6
- Inserting HTML5 Video Content
- Using Fluid Grid Layouts
- Selecting Multiple Classes
- Improved FTP Performance
- Enhanced jQuery Mobile Support
- Using the CSS Transitions Panel
Dreamweaver is a popular Adobe program for creating websites and applications. It supports HTML5, CSS3, PHP, FTP, jQuery and more, and it works with HostGator web hosting.
You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV. The video in this article is courtesy of Adobe TV.