Advanced design template for jQuery Mobile

jQuery Mobile is a unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design. Meanwhile, Adobe Dreamweaver CS6 features a streamlined workflow for creating a jQuery Mobile project. In this article, you will create a simple jQuery Mobile application with Dreamweaver CS6.

The following video walks you through the features of this Dreamweaver template for jQuery Mobile.

In Dreamweaver, simply select File > New > Page from Sample > jQuery Mobile with theme (local), and finally click Create. When you save this file, Dreamweaver creates all of the necessary files including all of the CSS and HTML markup, to create a basic jQuery Mobile website.

Once you have created your mobile website, you are ready to begin customizing the CSS and HTML to mold this project into your desired experience. The following examples below explain some of the more advanced aspects of this template and provide you with a context to begin modifying deeper aspects of the jQuery Mobile framework.

One of the most advantageous aspects o the jQuery Mobile framework is its reliance on CSS for the layout and design. Since the core of the framework uses small amounts of HTML to build the structure, you only need to apply small amounts of CSS to alter the design.

In a multi-page implementation, you can use individual DIV tags for "pages," and use list views to create the homepage navigation to those pages. For more information on the page structure, refer to the article, Customizable starter design for jQuery Mobile. Since you make the listview from an unordered list, you can create CSS rules that target that list and redefine certain aspects to create larger buttons for the homepage.

The standard markup of a listview includes a data-role attribute assigned to the outer <UL> tag. See the code as follows:

Using a technique called injection, the jQuery framework adds additional CSS and HTML into the <UL> element and turns the above code into the following code snippet.

In addition to adding <DIV> and <SPAN> elements injected within the <LI> elements, the process also injects a class named ui-listview into the <UL> element at runtime with JavaScript. This gives you a path to target with your CSS rules, a path to lock on to. Lastly, having the list view inside of a <DIV> with an id set to home , you can use the following CSS rule name to specifically target the list view of the homepage:

The following figure shows the restyled list.

Using a Sprite Sheet and custom class assigned to each <LI> , you can adjust the x-position of the background graphic to create individual graphical buttons from a single image. In addition to a background image, you can also assign a padding-top to the nested <A> tags to give vertical room for the button graphics as shown in the following image.

The combination of these CSS rules and HTML markup transforms a traditional unordered list into an icon-based navigational system.

The jQuery Mobile website includes an online tool theme creation tool called ThemeRoller. This is a web-based tool that allows you to design color schemes for use with your custom jQuery mobile websites. The jQuery Mobile framework is built on the notion of themes, which are predefined styles for the look of your mobile website. Each theme includes a series style groups called swatches, which you can apply to entire jQuery Mobile pages, or just to a portion of a page. While you can certainly override the many CSS rules contained within a swatch, it is more efficient to create entirely new themes using ThemeRoller.

The ThemeRoller online design tool allows you to create, modify, and save themes for use in your projects. Once you download and unzip your theme, copy the files into your project folder and link the CSS. The ThemeRoller site even offers some HTML within the download window.

If you consider the fact that jQuery Mobile is built on jQuery, I have to point out the fact that you can use some simple scripts to add even more functionality into our mobile website. The template included with this tutorial that you can download from the Requirements section at the beginning of this article includes a simple script and some custom HTML that allows you to dynamically change the content of the Contact Us page based on the link that invokes it. Using a single Contact Us page, you will learn how to change the page's information based on HTML you add to each link.

The listview links below contain an additional attribute in the <A> tag named data-phone . In this code snippet, put the phone number of that country's office. In conjunction with the linked text of the <a> tag, we have enough information to inject custom data into a single Contact Us page and give the user the experience of many custom contact pages.

By hooking in the custom JavaScript file, you can lock on to many aspects of the markup and jQuery, and further manipulate the user experience. In this template I included a simple set of jQuery instructions that inject data into the Contact Us page, as shown in the following figure.

When the user taps or clicks a link in the location listing, the application uses jQuery to pick up the activated link, read the custom attribute and link label, and revise the elements of the Contact Us page with those elements. This gives you the ability to create the illusion of customized Contact Us pages, when, in fact, it is the same page with data dynamically injected into the page before it is animated.

In addition to the layout and page loading capabilities, jQuery Mobile provides a number of interactive form enhancements as well. Using basic HTML form markup, you can transform items like radio buttons and dropdown menus into mobile-friendly user experiences. What's more, the Dreamweaver Insert Panel contains many objects relating to jQuery Mobile, which you can add to your mobile website with a single click.