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:

  1. Go to the File menu.
  2. Select New.
  3. Choose Page from Sample category.
  4. 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

Working in live view allows users to watch the theme be directly applied to their site as well as any other direct changes.

To Use jQuery Mobile Swatches:

  1. Go to the Window menu.
  2. 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


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.