Using UI components in jQuery Mobile

Standard elements for attractive, touch-friendly web sites

Many UI components are available in the jQuery Mobile framework. This article provides a high-level overview of each element and how you can use it in a mobile website. It touches on specific UI components, explains the reasons to use them, and provides code examples of their use in a mobile website.

Share:

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris 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.



08 February 2012

Also available in Vietnamese Portuguese

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>

Pressed for time? (Don't answer that.)

Instantly add pre-built, managed, and scalable cloud services to your mobile apps with the Mobile cloud services on IBM Bluemix.

Choose from popular services for shared data, push notifications, and server-side scripting along with SDKs for Android, iOS, and Node.js. Sign up for a free Bluemix cloud trial and learn more.

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.


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.

Listing 1. Creating a header and footer toolbar with the jQuery Mobile framework
<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.

Listing 2. Setting a header and footer toolbar to fullscreen with the jQuery Mobile framework
<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.

Listing 3. Converting a list into a navigation bar using navbar
<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.


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).

Listing 4. Using a layout grid to create columns
<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.

Listing 5. Using a collapsible content area
<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.


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).

Listing 6. Creating a basic linked list with the jQuery Mobile framework
<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.


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).

Listing 7. Creating a split button list with the jQuery Mobile framework
<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.

Listing 8. Adding list dividers to a listview
<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).

Listing 9. Adding count bubbles to jQuery Mobile list items
<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).

Listing 10. Adding thumbnails to jQuery Mobile list items
<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.

Listing 11. Adding icons to jQuery Mobile list items
<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.


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).

Listing 12. Adding a search filter bar to a jQuery Mobile list
<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).

Listing 13. Adding a search filter bar to a jQuery Mobile list that includes list dividers
<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.


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.

Listing 14. Creating a slider element using the jQuery Mobile framework
<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.

Listing 15. Creating a toggle switch using the jQuery Mobile framework
<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.


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

Get products and technologies

Discuss

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

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Mobile development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Mobile development, Web development, Open source
ArticleID=792340
ArticleTitle=Using UI components in jQuery Mobile
publish-date=02082012