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
attribute on a hyperlink you want to open as a
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
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>
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
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
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.
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
attribute to an HTML element. Listing 1 shows how easy it is
to create a
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
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 mode is the same as
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>
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
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
attribute, or you can use any custom icons you create or purchase.
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
content, which when used properly converts a
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
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
ol to convert it to
an ordered list.
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
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
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>
data-role attribute value of
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
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>
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.
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
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.
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
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
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
type attribute as
Then, you add
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
min value of
0, and a default
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
attribute with a value of
slider. This attribute value
converts a custom jQuery mobile select list into a toggle switch.
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.
- 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
- 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, or use a product in a cloud environment.
- Get involved in the developerWorks community. Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.