115
Chapter 6
jQuery Mobile
In this chapter, we cover:
Introducing jQuery Mobile
Declaring a jQuery Mobile page
emes
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
platforms.
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:
<body>
<div data-role = "page" id = "page_id"></div>
…..
</body>
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:
<body>
<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.