How to Use Dreamweaver’s jQuery Mobile Widgets - dummies

How to Use Dreamweaver’s jQuery Mobile Widgets

By Janine Warner

The Insert menu in Dreamweaver includes a collection of jQuery mobile widgets you can use to create form elements and other features commonly used in mobile web apps. For example, you can use the jQuery mobile widget to add mobile-friendly form elements, such as text areas and check boxes.

Before you can use any of the jQuery mobile widgets, you must first define a jQuery Mobile page by choosing Page, the item in the list of jQuery mobile widgets.


  1. Create a web page in Dreamweaver.

  2. Click to place your cursor in the top-left of the new page, and then choose Page in the jQuery Mobile Insert panel.

    The jQuery Mobile files dialog box opens.

  3. Change the default settings in the jQuery Mobile files dialog box (or leave them set to the defaults), and click OK.

    The Page dialog box opens.

  4. Enter a name in the ID field, and select or deselect the check boxes next to Header and Footer based on whether you want header and footer sections in your mobile page.

  5. Replace the Header, Content, and Footer text with the text, images, and other elements you want in your mobile page.

    You can add text and insert images and other elements into a jQuery mobile page just as you would any other page in Dreamweaver.

    The text should be short and the images should be small for displaying on small mobile screens.

  6. Click the Mobile Size icon in the bottom-right of the workspace to view the page in a smaller window.

    The Mobile Size option enables you to view the page in a manner similar to how it will appear on a small mobile device.


  7. Add other jQuery Mobile options as desired.

    The rest of the jQuery Mobile options in the Mobile jQuery Insert panel are optional. Use them to add additional features to your mobile page, including form elements such as password fields, radio buttons, and text areas.

  8. Choose File→Save to save the page; when the Copy Dependent Files dialog box appears, click OK to generate all the related files.

    For the jQuery Mobile features to work, you must upload these files to your web server when you upload the web page.

  9. To preview your work in a browser, click the globe icon at the top of the workspace and select a browser.

To test a mobile website or web app on a mobile device, publish the page and all related files to a web server, and then view the page in a web browser on an iPhone, an Android device, a Blackberry, or another mobile device.