Home / Articles / Adobe Dreamweaver / Customizing Mobile Pages with jQuery Mobile in Dreamweaver CS5.5

Customizing Mobile Pages with jQuery Mobile in Dreamweaver CS5.5

Article Description

New starter pages in Dreamweaver CS5.5 serve as templates for building mobile-friendly pages with jQuery Mobile animation and interactivity. Or you can use jQuery Mobile widgets to design mobile-friendly pages from scratch, with your own choice of jQuery Mobile objects. All without coding! David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, explores this Dreamweaver magic.
Additional Options

Additional Options

Do you need more than three expandable blocks on your home page? If so, copy-and-paste the code for one block, and change the code for one of the <div data-role="collapsible"> blocks of HTML. (And then, of course, customize the content of your copied block.)

To change the default setting for a block from expanded to collapsed, edit the collapsible code to look like this:

<div data-role="collapsible" data-collapsed="true"> </div>

To make the default state expanded, edit the code for a collapsible block to read as follows:

<div data-role="collapsible" data-collapsed="false"> </div>

Finally, you can apply one of the data-themes that format jQuery Mobile objects by adding data-theme="a", replacing "a" with "b" or "c" or "d" or "e" as desired to choose one of the other data-themes (see Figure 9).

Figure 9 jQuery Mobile data-theme applied.