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 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 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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
