It has become commonplace for businesses that engage customers via the web to also provide a corresponding application or website tailored to a mobile device. But as more and more mobile devices and platforms come on the market, the task of developing cross-platform web applications with a single code base becomes more challenging. Mobile developers have their work cut out for them.
One tool that can make it easier for developers to handle diverse mobile-device requirements is the jQuery Mobile framework. jQuery Mobile effectively deals with mobile platform variations by providing features for managing the different layouts required for a variety of device types and screen sizes. In this article, I will introduce jQuery Mobile and provide some examples that demonstrate how to use it in building a mobile website UI.
jQuery Mobile Fundamentals
jQuery Mobile uses a combination of HTML5 attributes and Cascading Style Sheets (CSS) classes to create an impressive mobile UI, filled with components for setting up layouts, input controls for capturing inputs, toolbars and navigation bars for driving navigation of a page, and much more. Each component requires specifying a set of attributes, HTML tags, and CSS classes.
Even as jQuery Mobile benefits the developer, it provides new challenges as well. Developing applications with jQuery Mobile is not quite the same as developing a traditional web application. Even so, it is not a complete departure from developing an application using jQuery.
As an illustration, suppose we had a wizard-like interface with three steps. The user navigated through each of these steps to complete the process. Using jQuery, you could accomplish this task using the code in Figure 1.
This is the first page.
Figure 1 is an oversimplification of a wizard, but it gives you a sense of how this could be done with jQuery. This form uses CSS classes to identify the pages of the wizard. Clicking each link navigates back and forth between pages.
jQuery Mobile has some similarities to the approach in Figure 1. jQuery Mobile works with pages, or parts of the HTML page that are shown. Let's take a closer look at pages and other key components of jQuery Mobile.
Pages. In a mobile application, the content on a single web page is broken out into individual pages in the mobile application. Take Amazon.com, for instance. Amazon's product page displays star ratings and comments, other product recommendations, product descriptions, and additional information for each product. Within Amazon's mobile application, the product page displays brief information about the product, allowing the user to select a feature (e.g., product description). The application loads another page to display the full description to the user.
This concept of a page is what drives the UI in jQuery Mobile. To identify a page, the framework uses an HTML5 attribute: data-role. As you'll see in Figure 2, a page is nothing more than a div element with a data-role="page" designation. When a single div element with a page role exists on the page, this is typically referred to as a single-page template. Otherwise, multiple page role elements on a page are referred to as a multi-page template. A page consists of a header, footer, and content section; only the latter is required. The header and footer pin to the top and bottom of the view, with the content taking up the remaining space.
Let's look at the multi-template page example in Figure 2. (A single-page template would consist of only one page definition.) Notice the hyperlinks on the page. They represent jQuery's button concept, which I'll explain later.
First page of content.Next Page
When should you use a single-page versus a multi-page template? It really depends. If you have large pages, it's wise to break them out into separate HTML pages with a single-page template instead of using a multi-page template. jQuery uses an AJAX loading feature to prevent the browser from posting back to the server to get the next page. If you want to disable the automatic AJAX feature, you can do so by adding a data-ajax="false" attribute.
Dialogs. A dialog is another type of page that appears as a pop-up dialog window with a modal backdrop. A dialog window is set up as an ordinary page, with one distinction: The link that opens the dialog must declare the data-rel="dialog" attribute. Additionally, a link within the dialog that navigates back to the main page can declare data-rel="back" to indicate it is linking back to the original page. Figure 3 contains some examples that show the use of links to open and close a dialog.
jQuery Mobile assumes everything specified in the href attribute of the hyperlink is an internal link -- that is, a #PageID reference or an HTML page within your site. In some instances, your application may need to refer to an outside source. In this case, append a rel="external" designation. jQuery Mobile will process the request as a standard redirection.Because jQuery Mobile uses links as a button, the framework provides a variety of additional features, such as icons. Buttons have at their disposal an excellent set of available icons. To apply an icon, include the data-icon="type" attribute. The "type" value can be "plus", "minus", "delete", or one of many others (you can find a complete list of icons on the jQuery Mobile website). Buttons can also be positioned in a specific way; the data-iconpos attribute controls the directional appearance to the button's border (to the left, right, top, or bottom). Figure 4 shows some samples of iconified buttons positioned in various ways.
Buttons by default stretch the entire width of the screen. This is a "block" behavior of the button; however, if you would like the button to consume the minimal real estate that it needs, add the statement data-inline ="true". Additionally, inline or block buttons can also be a part of a group of buttons. A group is a div element identified by the data-role="controlgroup" designation; a control group groups the buttons together vertically or horizontally. Figure 5 demonstrates the use of controlgroup for positioning buttons.
Toolbars. Each page can have a header and footer. The header is usually the perfect choice for a toolbar of some sort to appear. jQuery Mobile doesn't support an explicit toolbar role; however, the header was built to act as an application's toolbar. A toolbar can appear fixed at the top of each page. Alternatively, other settings allow for a toolbar to scroll into view and appear fixed at the top of the page.
jQuery Mobile automatically formats the content in the header, formatting content to the left, center, and right. Buttons appearing in the header in Figure 6 are positioned to the far left and right, while the header is positioned in the center. You can customize the left or right align of a button by appending the ui-btn-left or ui-btn-right CSS class, which acts as an override.
Navigation bars. Navigation bars work similarly to a button control group and provide a list of clickable, selectable buttons, acting as a menu of sorts. The code in Figure 7 shows an example usage of navigation bars.
The navigation bar provides three buttons for selecting various features. The navigation bar can then switch between internal pages or link to an external page in the application. If the navigation bar needs to default the selection of an item, add a CSS class definition of ui-btn-active to the button. Navigation bars also provide other features -- for example, the ability to globally apply attributes to a navigation bar's children (e.g., the icon position, as shown in Figure 7).
More jQuery Mobile Components
Now that you have a feel for some of the basic jQuery Mobile components, let's look at some additional components for content formatting, form controls, and list views.
Grid. jQuery Mobile provides support for multi-column, multi-row grids up to five columns wide. Grids are not indicated by a data-role; instead, a grid is styled using one of four existing CSS classes: ui-grid-a (for a two-column grid), ui-grid-b (for a three-column grid), ui-grid-c (for a four-column grid), and ui-grid-d (take a guess how many). This style is usually applied to a div element. A grid's cell is usually another div with another set of predefined CSS classes in the convention of ui-block-a through ui-block-e. The grid intends to create each column with equal spacing, regardless of the number of columns.
A grid doesn't have a row designation. Instead, the row is interpreted by the number of cells defined with the appropriate CSS class, as shown in Figure 8.
First Name(Required)Last Name(Required)
Collapsible panels. Collapsible panels are headered panels that expand or collapse when the header or header icon is clicked. A collapsible panel is marked with data-role="collapsible" and uses a header element to identify the panel's title. The remaining content of a collapsible panel is the content panel that toggles visibility. Collapsible panels work in only collapsed and expanded states and are a great way to minimize the viewing space on a larger page. Panels are collapsed by default but can be expanded by adding data-collapsed="false". Collapsible panels can also nest other panels. To see an example of nested collapsible panels, refer to the sample code in Figure 9.
Nested Sample Header
Sample Collapsed 1This is content that is collapsed, but can be expanded by clicking on the header.
Sample Collapsed 2This is content that is collapsed, but can be expanded by clicking on the header.
Collapsible panels can also be linked together to act as an accordion. By using a new role (data-role="collapsible-set") and applying this to a div that wraps a series of collapsible panels, those panels change their behavior to act as an accordion, showing only one panel at a time.
Form controls. The jQuery Mobile framework incorporates styles for making standard HTML input controls more visually appealing. In addition, jQuery Mobile supports the new HTML5 input types, such as email, tel, url, and number. jQuery Mobile also styles a select element nicely and uses it to support two different types of elements, as shown in Figure 10.
List view. A list view represents one of the most common mobile interaction controls employed today; it is a scrollable list of items that can be clicked and drilled through. One common usage of this control is in preference screens. A list view is represented by an unordered list with a data-role="listview" definition, as shown in Figure 11; each list item is an entry in the list. A list item can then also have another unordered list as its children, in which each item can have its own lists, and so on.
- New Jersey Devils
- New York Islanders
- New York Rangers
- Philadelphia Flyers
- Pittsburgh Penguins
The list view is a pretty powerful control; because you control the markup, the control can be very flexible. The template can be whatever you want -- for example, a link to another page, an input control.
Themes. jQuery Mobile provides five built-in themes for styling your applications. The themes are labeled "a", "b", "c", "d", and "e" and can be applied by using the data-theme="a" declaration. You can also create your own themes using the online ThemeRoller tool.
Themes automatically propagate to the children; however, each control can override the default theme applied by setting the data-theme attribute to a different value. In addition, some container controls also allow you to apply a theme to the content by setting the data-content-theme (e.g., a collapsible panel) attribute to one of the supplied themes. This attribute is certainly optional and will by default inherit from the value set in data-theme.
A Versatile Mobile Framework
Although it isn't possible to cover everything that jQuery Mobile offers in a single article, this introduction should help you get started exploring the framework. The downloadable code samples included with this article also contain information about some of the other items related to jQuery Mobile. In "Build a Client-Side Mobile Web App Using jQuery Mobile," we'll show you how to get started building your first mobile app using jQuery Mobile, which I think you'll find it to be a powerful framework for developing mobile applications that work on a variety of devices.