jQuery for Mobile Sites - Dreamweaver CS5.5

Built upon the widely popular jQuery JavaScript framework, jQuery Mobile lets web designers and developers build mobile application interfaces quickly and consistently. In this article, you'll see how Dreamweaver CS 5.5 support for jQuery Mobile projects works.

How to Use jQuery

1. In Dreamweaver, go to the File menu.
2. Select New. The New Document menu will appear.
3. Select the Page from the Sample category.
4. In the Sample Folder column, select Mobile Starters.
5. In the Sample Page column, select a template.

   CDN vs. Local jQuery Mobile Files

   • The jQuery Mobile (CDN) option is for users who plan to host the jQuery mobile library on a CDN. CDN is a network that contains copies of data placed at various points in the network. 
   • The jQuery Mobile (Local) option is for users who plan to host the assets themselves or if the application does not rely on an internet connection.
   • The jQuery Mobile (PhoneGap) option is for users who plan to use their web page as an application which, when deployed, will access features native to mobile devices.
6. Set the doctype to HTML5.
7. Click Create. The jQuery template selected will then appear.

When saving a jQuery template, CS5.5 will prompt users to indicate if they wish to copy the remaining dependent files necessary to the function of the created page.

Change jQuery Theme

jQuery features themes that can be applied by going into the code and doing the following:

1. Click into the main div tag for the element.
2. Press the spacebar once. A Code Hint pop-up menu will then appear offering additional attributes.
3. Apply the following code into the div using the Code Hint pop-up menu:

   data-theme="theme"

    

   Note: CS5.5 only has six theme offerings for jQuery, all named A-F. In the code above, replace "theme"  with your choice of one of the six options.
   
   For example:

   data-theme="A"

Dreamweaver is a popular program for creating websites and applications from Adobe. It supports HTML5, CSS3, PHP, FTP, jQuery, and more, and works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the Dreamweaver Tutorials learning portal.