The jQuery Mobile JavaScript library is a powerful way to let mobile and tablet devices access mobile applications by allowing users to connect directly to touch-friendly applications through a web browser.

To use any of the examples in this article, you must download or include the remotely hosted jQuery Mobile framework files, which you can find a link for in Resources.

Dialog boxes and pop-up windows

A dialog box is an important UI element, prompting users for a response or simply displaying information. Dialog boxes are most often used to present options to users to execute some sort of command based on the users' response. Typically, you can present dialog boxes in either of two ways—as a modal or non-modal window (with jQuery Mobile, they are presented as a modal dialog box). Modal dialog boxes block users from interacting with the web page below the dialog box, requiring a response from users before they can proceed.

To create a dialog box with jQuery Mobile, you must use the data-rel attribute on a hyperlink you want to open as a dialog window and assign it the value of dialog. The code below shows how to convert a simple hyperlink to a web page into a hyperlink that opens the associated web page as a dialog box:

<a href="dialog.html" data-rel="dialog">Open dialog</a>

By default, the jQuery Mobile framework adds rounded corners, a margin, and a dark background to the web page to make it appear as a dialog box positioned above the web page.

There are several ways to close a dialog box. The first option is simply to link to another page, which could be related to the response from the user. This would be a good option for any sort of processing that needs to take place—for instance, a Save button may link to a web page that saves some sort of information to a database, and then returns to the original parent web page with a confirmation message. The second option is to use the data-rel attribute on a hyperlink in your dialog box and set its value to back, as shown in the code below. This is a good option when including a Cancel button in your dialog box.

<a href="parent.html" data-rel="back">Cancel</a>

Unfortunately, this option doesn't work on devices that don't support JavaScript. The final option is to use JavaScript to call the dialog box's close method directly:

$('#my-dialog').dialog('close');

You can also use a number of transitions for dialog boxes to add flavor to your mobile website. You can set transitions by including a data-transition attribute to the hyperlink you're converting into a dialog box:

<a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

The data transitions currently available are pop, slidedown, and flip; each functions exactly as you would assume. The most common transition associated with dialog boxes is pop, but there are certainly cases where the other transitions may apply.

Back to top

Toolbars

The jQuery Mobile framework includes headers and footers as its standard toolbars; however, toolbars can also be used to display navigation, as with navbar. The default use of the header in jQuery Mobile is to serve as a page title that anchors to the top of the web page; the footer is most often the final element in a web page and includes content such as copyright information, additional hyperlinks, and so on.

Creating a header or footer is as easy as adding a data-role attribute to an HTML element. Listing 1 shows how easy it is to create a Header and Footer toolbar.

	
<div data-role="header">
  <h1>My Page Title</h1>
</div>

<!-- Some page content... -->

<div data-role="footer">
  <p>Copyright notice</p>
</div>

You can customize headers and footers using CSS, or you can use some of the available data- attributes, such as data-position, which sets the positioning behavior of a toolbar. The default value for this attribute is inline, but you can also set its value to fixed to keep a toolbar, such as the header, in a specific location, even when the web page is scrolled. Another position worth mentioning is fullscreen. The fullscreen mode is the same as fixed, but the toolbars do not appear on the web page until the user begins interacting with the page. When a user interacts with a web page, the toolbars appear, allowing the user to interact with them, and then disappear when the user stops interacting with the page (Listing 2). This option is useful when displaying a video player, photo gallery, or the like.

	
<div data-role="header" data-position="fullscreen">
  <h1>My Page Title</h1>
</div>

<!-- Some page content... -->

<div data-role="footer" data-position="fullscreen">
  <p>Copyright notice</p>
</div>

The navbar is used to display up to five buttons or navigation items within a header or footer. Depending on how many buttons you add to the navbar, it evenly distributes them so that they are all the same size. To create a navbar you can simply add a data-role attribute to an element that surrounds a list and set its value to navbar (Listing 3). The list is dynamically converted into a horizontal navigation bar with hover, static, and active states, which can all be customized using the jQuery Mobile theme framework.

	
<div data-role="header" data-position="fullscreen">
  <div data-role="navbar">
    <ul>
      <li><a href="#">Nav item 1</a></li>
      <li><a href="#">Nav item 2</a></li>
    </ul>
  </div>
</div>

Another nice feature of the navbar is that you can include custom icons within each button. The jQuery Mobile framework includes a set of standard mobile icons that can be used via the data-icon attribute, or you can use any custom icons you create or purchase.

Back to top

Layout options

Formatted content is an important way to provide users with an accessible way to reference and gather the information you are providing on your website. With the increase in mobile web traffic and the need for mobile website versions, formatted content is becoming even more important. We can no longer solely rely on our users sitting at a desk and spending time interacting with our websites. Users are on the move, and simple, nicely formatted content is more important than it has ever been.

When formatting content for a mobile web page, it's important to remember that most mobile devices have narrow screens. That said, there are still plenty of situations that call for column grids. jQuery Mobile includes a layout grid that you can easily use to create a grid of data via a CSS class (Listing 4).

	
<div class="ui-grid-a">
 <div class="ui-block-a">
    Left column
  </div>
 <div class="ui-block-b">
    Right column
  </div>
</div>

The CSS class used by default to create a grid from a group of HTML elements is the ui-grid-* class. The asterisk (*) represents the theme you choose to use for your grid. (For more information about the theming system, see Resources.) You can create as many columns as you choose, but I recommend using only two columns at the most, and then only when necessary.

Another handy way to format content is only to show a portion of the content, which provides users with an overview and the option to read more. Because most mobile devices have such a small screen, it's important to keep page length relatively short and to the point. Collapsible content blocks offer a great way to handle this functionality (Listing 5). The jQuery Mobile framework offers a data-role for collapsible content, which when used properly converts a header element and associated content into a collapsible block.

	
<div data-role="collapsible">
  <h2>My header</h2>
  <p>The full content would normally be longer than this, 
  which is why we would want to hide it by default and allow 
  the user to choose whether they wanted to read it by viewing 
  the title. Therefore the title plays an important role when 
  creating collapsible content blocks.</p>
</div>

By default, the block shows the header text as a button with a + icon. When clicked, the full content will be revealed, and the + icon will change to a - icon, indicating that the button can be clicked again to close the full content and return to the default button state.

Back to top

Creating simple lists

Lists are a common element to see on a mobile website. With jQuery Mobile, you can create a number of different list formats, such as basic linked lists, nested lists, numbered lists, split button lists, lists with dividers, lists with icons, thumbnail or count bubbles, and lists that include a search filter bar. A common list type to use is a basic linked list. To create a basic linked list, you simply need to create a standard HTML unordered list, add a data-role attribute, and assign it a value of listview (Listing 6).

	
<ul data-role="listview">
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
</ul>

To create a numbered list, you would use the same code as in Listing 6, simply changing the ul to ol to convert it to an ordered list.

Back to top

Enhancing lists

Once you understand how simple it is to create basic lists, you may find yourself wanting more options. One option for providing additional functionality to a list is what's called a split button list. A split button list allows you to provide two clickable options within the same list item. This functionality is useful for list items that include a link for, say, specific details about that particular item but may also need to include other actions related to that item, such as a button to purchase the item or to share it on a social network. Creating a split button list is simple: You add two anchor tags next to each other within a list item that uses the listview data-role (Listing 7).

	
<ul data-role="listview" data-split-icon="gear"> 
 <li>
    <a href="item-detail.html"> 
    <h3>Item title</h3> 
    <p>Item overview</p> 
    </a>
    <a href="item-purchase.html" data-rel="dialog">Purchase item</a>
  </li> 
  <li>
    <a href="item-detail.html"> 
    <h3>Item title</h3> 
    <p>Item overview</p> 
    </a>
    <a href="item-purchase.html" data-rel="dialog">Purchase item</a>
  </li>
</ul>

The split button list in Listing 7 provides list items that include a title and an overview that users can click to view additional details about the item. The list items also include an icon used as a hyperlink to purchase the item within a dialog box. You can also change the default icon for the split button that appears on the right-hand side of the list item by using the data-split-icon attribute.

Another useful addition for basic lists are list dividers. List dividers provide a way to categorize your list items. For example, you could alphabetize your list items and use list dividers to separate them by each letter of the alphabet, or you could have a group of list items that relate to music and categorize them with list dividers that correspond to different music genres. Listing 8 shows an example of a simple list enhanced with list dividers.

	
<ul data-role="listview"> 
  <li data-role="list-divider">Alternative</li> 
  <li><a href="#">Nirvana</a></li>
  <li data-role="list-divider">Rock and Roll</li> 
  <li><a href="#">Jimi Hendrix</a></li>
  <li><a href="#">Led Zeppelin</a></li>
</ul>

Using the data-role attribute value of list-divider provides a visual style that differentiates these list items from other list items.

You can also create different visual styles by using icons, thumbnails, and count bubbles. You can add count bubbles to a list item by using the ul-li-count class (Listing 9).

	
<ul data-role="listview"> 
  <li>
    <a href="inbox.html">Inbox 
      <span class="ui-li-count">12</span>
    </a>
  </li>
</ul>

You can add thumbnails just as you would add an image to an HTML page. Simply add an anchor element to a list item, add an image that will act as a thumbnail, and then add the copy that you want to appear next to it. jQuery Mobile handles the rest (Listing 10).

	
<ul data-role="listview"> 
  <li>
    <a href="zeppelin.html#thank-you"> 
      <img src="images/album-cover.jpg" /> 
      <h3>Led Zeppelin</h3> 
      <p>Thank You</p> 
   </a>
  </li>
  <li>
    <a href="zeppelin.html#ten-years"> 
      <img src="images/album-cover.jpg" /> 
      <h3>Led Zeppelin</h3> 
      <p>Ten Years</p>
    </a>
  </li> 
</ul>

You add icons the same way as thumbnails; the only difference is that you use the ui-li-icon class, as shown in Listing 11.

	
<ul data-role="listview"> 
  <li>
    <a href="zeppelin.html"> 
      <img src="images/album-cover.jpg" class="ui-li-icon" /> 
      Led Zeppelin Album
   </a>
  </li>
  <li>
    <a href="hendrix.html"> 
      <img src="images/album-cover.jpg" class="ui-li-icon" /> 
      Jimi Hendrix Album
    </a>
  </li> 
</ul>

The ul-li-icon class limits the image size to a max width and height of 40px and positions the image properly in the list item.

Back to top

Search filtering

In addition to all the great list enhancement features just covered, one final enhancement provides great usability improvements to long lists. Sometimes, it's just not possible to pare down all of the content that needs to go on a mobile website. When this is the case and you have a long list that seems nearly unusable, the search filter bar is a great way to handle the problem. Luckily, it doesn't take much effort to add a search filter bar to a list with jQuery Mobile. Just add the data-filter attribute to your list and give it a value of true (Listing 12).

	
<ul data-role="listview" data-filter="true">
  <li><a href="#">Chris A.</a></li>
  <li><a href="#">Cindy V.</a></li>
  <li><a href="#">John B.</a></li>
  <li><a href="#">Tammy D.</a></li>
</ul>

The search filter bar adds a text input that provides the functionality for users to type what they're looking for while the list is filtered in real time based on the input. For example, if you had a list of employee names and you added a search filter bar to that list, users would be able to filter and narrow down the results displayed on that page by entering one or more characters into the search filter text input.

You can also go a step farther and add dividers to your listview while still including a search filter bar (Listing 13).

	
<ul data-role="listview" data-filter="true">
  <li data-role="list-divider">C</li> 
  <li><a href="#">Chris A.</a></li>
  <li><a href="#">Cindy V.</a></li>
  <li data-role="list-divider">J</li>
  <li><a href="#">John B.</a></li>
  <li data-role="list-divider">T</li>
  <li><a href="#">Tammy D.</a></li>
</ul>

The combination of list dividers and a search filter bar is quite a nice feature and truly adds to the usability of long, tedious lists that would otherwise be unusable.

Back to top

Form elements

With jQuery Mobile, native form elements are all converted into custom controls when the browser supports it. These custom controls are enhanced versions of native form elements as well as a few special form elements specifically created by the framework. Fortunately, all the form elements downgrade for browsers that do not support them, so usability is not a concern. Text inputs with jQuery Mobile are essentially the same as native text inputs; however, you can use new HTML5 input types such as email, tel, and number. To create any of these form elements, you simply need to set the input type to one of those mentioned values. For a complete list of HTML5 input types, see Resources.

In addition to the supported HTML5 input types, you can create a slider. A slider includes a handle and a gutter upon which the handle slides. The value of the slider is stored as the handle is moved, and that value is then submitted when the form is submitted. To create a slider, you start with a basic HTML input, but you define the type attribute as range. Then, you add min, max, and value attributes and define a default value for the value attribute, which determines where the handle will be positioned on the slider. Listing 14 shows an example of a slider element with a max value of 10, a min value of 0, and a default value of 2.

	
<div data-role="fieldcontain">
	<label for="slider">My slider:</label>
 	<input type="range" name="slider" id="slider" value="2" min="0" max="10"  />
</div>

The last custom input type is a flip toggle switch, which is already common on mobile devices. It's a great element to handle on/off or true/false types of data. There are multiple ways that users can work with the flip switch—by taping one side or the other of the switch or by dragging the flip handle like a slider. Creating a toggle switch is similar to creating a slider, although there are a few big differences. The input becomes a select element, and two options are added. Listing 15 provides an example of a toggle switch that could be used to provide on/off functionality.

	
<div data-role="fieldcontain">
  <label for="slider">Select slider:</label>
  <select name="slider" id="slider" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select> 
</div>

You probably also noticed that there is a data-role attribute with a value of slider. This attribute value converts a custom jQuery mobile select list into a toggle switch.

Back to top

Conclusion

The jQuery Mobile framework provides a quick solution to creating usable UI components for mobile websites. In most cases, with just a few simple lines of HTML you can include a mobile UI component that adds value to your mobile website. The complete list of components that the framework provides isn't covered in this article, but to learn more about the framework components and see them in action, check out the links in Resources.

Resources

Learn

• To learn how to create a custom theme for your jQuery Mobile UI components, check out Create custom jQuery mobile themes (developerWorks, November 2011).
  
  
• Be sure also to read Use the jQuery Mobile API for fine-grained custom control (developerWorks, January 2012).
  
  
• Get a complete list of HTML5 input types.
  
  
• Read the current documentation for the jQuery Mobile framework.
  
  
• The jQuery Mobile demo page provides a full list of the current button icons that the jQuery Mobile framework provides.
  
  
• The Open source zone on developerWorks provides a wealth of how-to information on open source tools and technologies.
  
  
• Check for mobile updates on the developerWorks Mobile development blog.
  
  
• You'll find many more articles on mobile topics, including articles on Dojo Mobile on developerWorks.
  
  
• Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics.
  
  
• Attend a free developerWorks Live! briefing to get up-to-speed quickly on IBM products and tools, as well as IT industry trends.
  
  
• Watch developerWorks on-demand demos ranging from product installation and setup demos for beginners, to advanced functionality for experienced developers.
  
  
• Follow developerWorks on Twitter.
  
  

Get products and technologies

• Download and reference the jQuery Mobile JavaScript and CSS files.
  
  
• Download and try the IBM Mobile Technology Preview, a set of code samples and services to help you get started building mobile applications that extend and integrate into the enterprise. The preview includes a RESTful notification service; PhoneGap, an open source framework for building hybrid mobile apps; a lightweight WebSphere Application Server runtime; and sample code to let you see how it all works.
  
  
• IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile includes the IBM Dojo 1.7 Toolkit, new mobile and rich Internet application (RIA) building blocks, and a Dojo-based diagram component. With accompanying Rational tools, the Feature Pack helps you take WebSphere applications developed originally for desktop browsers and adapt and deploy them to mobile devices.
  
  
• Evaluate IBM products in the way that suits you best: Download a product trial, try a product online, use a product in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement Service Oriented Architecture efficiently.
  
  

Discuss

• Get involved in the developerWorks community. Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.
  
  

About the author

Kris Hadlock has been a contract web developer and designer since 1996. He has worked on projects for companies such as SPIN Magazine, Phoenix Children's Hospital, United Airlines, JP Morgan Chase, and 1-800-Recycling. He is the author of Ajax for Web Application Developers (Sams) and The ActionScript Migration Guide (New Riders) as well as a featured columnist and writer for numerous websites and design magazines, including IBM developerWorks, Peachpit.com, InformIT.com, and Practical Web Design magazine. Kris is also the founder and lead developer/designer of Studio Sedition, a web design and software development studio specializing in fusion of form and function. To learn more about Studio Sedition and the services they have to offer, visit www.studiosedition.com.

Rate this article

Comments

Back to top

Table of contents

• Dialog boxes and pop-up windows
• Toolbars
• Layout options
• Creating simple lists
• Enhancing lists
• Search filtering
• Form elements
• Conclusion
• Resources
• About the author
• Comments

Dig deeper into Open source on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers