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 ﬁlter
◾ Creating Split Button lists
◾ Creating dialogs
◾ Creating forms in jQuery Mobile
◾ Displaying input ﬁelds, textarea, checkboxes, radio buttons, and drop-down lists
◾ Displaying date and time pickers
◾ Using on/oﬀ switches and sliders
◾ Grouping controls
Introducing jQuery Mobile
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 diﬀerent mobile
◾ It makes the applications compatible with diﬀerent browsers. Remember, there are a lot of
diﬀerences 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
apply certain jQueryMobile-speciﬁc attributes to enhance them. e UI controls are styled
and presented as touch screen controls. at is, jQuery Mobile uses the HTML tags, applies
predeﬁned 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 oﬀers ﬁve 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 application’s 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 ﬁle and unzip it in any folder.
Upon unzipping the ﬁle, we will ﬁnd two folders, demos and images, along with two pairs
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 deﬁned 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 deﬁning a page.
A jQuery Mobile page is usually composed of three basic elements: a header, content, and
footer. To deﬁne 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>