Chapter 6
jQuery Mobile
In this chapter, we cover:
Introducing jQuery Mobile
Declaring a jQuery Mobile page
Handling page navigation
Using lists
Creating count bubbles
Creating inset lists
Adding list dividers
Creating collapsible lists
Creating numbered lists
Displaying thumbnails and icons in the list
Applying a search filter
Creating Split Button lists
Creating dialogs
Creating forms in jQuery Mobile
Displaying input fields, textarea, checkboxes, radio buttons, and drop-down lists
Displaying date and time pickers
Using on/off switches and sliders
Grouping controls
Introducing jQuery Mobile
jQuery Mobile is an open-source JavaScript user interface (UI) framework built upon the popular
jQuery library, created by John Resig. It is one of the top frameworks used for developing applica-
tions for mobile devices. A few of the jQuery Mobile features are given below:
It is built on the very popular and robust jQuery and jQuery UI framework.
Well-written documentation is available for the jQuery Mobile framework.
116 ◾  PhoneGap Build
It provides a common UI platform to develop mobile applications across different mobile
It makes the applications compatible with different browsers. Remember, there are a lot of
differences among browsers. Some browsers are Web kit based and some are not.
jQueryMobile uses declarative UI building; that is, to build a UI, we do not need to write
any JavaScript code, but use the standard Hypertext Markup Language (HTML) tags and
apply certain jQueryMobile-specific attributes to enhance them. e UI controls are styled
and presented as touch screen controls. at is, jQuery Mobile uses the HTML tags, applies
predefined styles, and adapts them to the current browser.
e UI controls are manipulated as per the mobile device; that is, the UI controls are auto-
matically resized per the available screen space, that is, when the device is oriented from
landscape to portrait and vice versa.
e UI controls are given a professional appearance; that is, there is no need to apply styles
to enhance the appearance of UI controls. jQuery Mobile makes the UI controls quite read-
able and easier to select on a mobile device. jQueryMobile offers five built-in ready-to-use
themes: eme a, eme b, eme c, eme d, and eme e.
All forms in jQuery Mobile are submitted through Ajax. at means the data are sent
asynchronously to the server, hence increasing the applications response. Also, instead of
full-page reload, partial page reloading is done.
To use jQuery Mobile in mobile applications, download it from h t t p://jq u e r y m o b i l e.
com/download/. e latest version of jQuery Mobile available for download at the time of this
writing is 1.2.0. Download the jquery.mobile-1.2.0.zip file and unzip it in any folder.
Upon unzipping the file, we will find two folders, demos and images, along with two pairs
of jQueryMobile JavaScript and a Cascading Style Sheets (CSS) file. We will be using the .min
JavaScript and CSS file in developing the application, as they are minified JavaScript and CSS files.
Declaring a jQuery Mobile Page
jQuery Mobile uses data-attributes to apply styles and extend characteristics of HTML
elements. A page in jQuery Mobile is defined by using the data-role attribute in the div ele-
ment inside the body tag, as shown below:
<div data-role = "page" id = "page_id"></div>
We can see that the value page is assigned to the data-role attribute for defining a page.
A jQuery Mobile page is usually composed of three basic elements: a header, content, and
footer. To define page elements, that is, the header, content, and footer of a page, the values
header, content, and footer are assigned to the data-role attribute, respectively.
A sample format of a page in jQueryMobile is given below:
<div data-role = "page">
<div data-role = "header"></div>

Get PhoneGap Build now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.