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.
How jQuery Mobile Works

How jQuery Mobile Works

Whatever technique you use to build mobile-friendly interactivity and animation, the tool of choice is jQuery Mobile—a library of JavaScript objects that are supported in mobile devices. Dreamweaver provides easy access to jQuery Mobile design elements in two basic ways:

  • One method is to use the technique explored in the first article in this series: Use a sample starter page. Those pages rely on jQuery Mobile elements with what jQuery calls a data-role tag of "page".
  • The second way Dreamweaver CS5.5 provides access to jQuery Mobile layout tools revolves around a different jQuery Mobile design technique: the collapsible block. These blocks of content appear to toggle between expanded and collapsed mode when touched by a visitor.

In both cases, jQuery Mobile–based pages require links to the jQuery Mobile library and a version of the jQuery Mobile CSS (style sheet) file. Therefore, in this article, we'll start by using Dreamweaver's tools for generating pages that are linked to those essential external files.

4. Other Tools | Next Section Previous Section