Adobe Dreamweaver CC

Create advanced design templates for jQuery Mobile

Learn how to use Dreamweaver's streamlined workflow for creating a jQuery Mobile project using jQuery's HTML5-based interface for creating easily themable designs. (Try it, 15 min)

FromChris Converse

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.

What do I need?

Get files Sample files to practice with (ZIP, 5 MB)

Get PDF Dreamweaver cheat sheet

Meanwhile, Adobe Dreamweaver features a streamlined workflow for creating a jQuery Mobile project. In this article, you will create a simple jQuery Mobile application with Dreamweaver. The following article walks you through the features of this Dreamweaver template for jQuery Mobile and assumes that you have some knowledge of HTML and CSS.

Figure 1. See the streamlined workflow in Dreamweaver for creating a jQuery Mobile project
Figure 1. See the streamlined workflow in Dreamweaver CS6 for creating a jQuery Mobile project

Figure 2. The jQuery Mobile app you will create in this tutorial.
Figure 2. The jQuery Mobile app you will create in this tutorial.

In Dreamweaver, select File > New > Page from Sample > jQuery Mobile with theme (local), and then 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.

Figure 3. Creating a new mobile website in Dreamweaver.
Figure 3. Creating a new mobile website in Dreamweaver CS6.

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.

Flexibility through CSS

One of the most advantageous aspects of 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. 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:

<ul data-role="listview">	
  <li>
    <a href="#about_us">About Us</a>
    ...
  </li>
</ul>

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.

<ul data-role="listview" class="ui-listview">
  <li class="btn_a ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li" data-theme="a">
    <div class="ui-btn-inner ui-li" aria-hidden="true">
      <div class="ui-btn-text">
        <a href="#about_us" class="ui-link-inherit">About Us</a>
        ...
      </div>
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">  
      </span>
    </div>
  </li>
</ul>

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:

#home .ui-listview {  }

The following figure shows the restyled list.

Figure 4. Restyled list.
Figure 4. 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.

Figure 5. Sprite Sheet
Figure 5. Sprite Sheet

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

Combining ThemeRoller with custom CSS

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.

Figure 6. Creating new themes with ThemeRoller
Figure 6. Creating new themes with 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.

Adding some custom jQuery scripts

jQuery Mobile is built on jQuery, so 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.

<ul data-role="listview" data-filter="true" data-inset="true" class="countries">   
  <li><a class="location" href="#contact_us" data-phone="123-456-7891">Albania</a></li>
  <li><a class="location" href="#contact_us" data-phone="123-456-7892">Algeria</a></li>
  <li><a class="location" href="#contact_us" data-phone="123-456-7893">Argentina</a></li>
  …
</ul>

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.

Figure 7. Injecting data into the Contact Us page
Figure 7. Injecting data into the Contact Us page

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.

Where to go from here

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.

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

 

chris-converse_83x83

Chris Converse

Chris is a designer and developer at Codify Design Studio, where his design execution spans a variety of media. Chris is also a featured speaker at Adobe MAX and HOW Design conferences, as well as an author on lynda.com and udemy.com.