1204 jquery mobile web development essentials

www.it-ebooks.info


jQuery Mobile Web
Development Essentials

Learn to use the touch-optimized, cross-device,
cross-platform jQM web framework for smartphones
and tablets

Raymond Camden
Andy Matthews

BIRMINGHAM - MUMBAI

www.it-ebooks.info


jQuery Mobile Web Development Essentials
Copyright © 2012 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the authors, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the

companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.

First published: May 2012

Production Reference: 1200412

Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84951-726-3
www.packtpub.com

Cover Image by Faiz Fattohi ()

www.it-ebooks.info


Credits
Authors

Project Coordinator

Raymond Camden

Sai Gamare

Andy Matthews

Proofreader
Linda Morris

Reviewers
Md Mahmud Ahsan
Shameemah Kurzawa
M. Ali Qureshi

Monica Ajmera Mehta
Production Coordinators

Joe Wu

Nilesh R. Mohite

Acquisition Editor

Prachali Bhiwandkar

Usha Iyer
Lead Technical Editor
Dayan Hyames

Indexer

Cover Work
Nilesh R. Mohite

Technical Editor
Sonali Tharwani

www.it-ebooks.info


About the Authors
Raymond Camden is a Developer Evangelist for Adobe focusing on web

standards and mobile development. He is a contributing author to numerous
technical books including the best selling ColdFusion Web Application Construction
Kit, published by Adobe Press. He has spoken at conferences around the world
and maintains many popular ColdFusion community websites. He is the
manager of www.RIAForge.org, www.CFLib.org, and writes at his blog
www.raymondcamden.com. Raymond is happily married and a proud father
to three kids and is somewhat of a Star Wars nut.
I'd like to thank everyone on the jQuery and jQuery Mobile teams
for making tools that have changed my life. Without your hard work
and dedication, the web would be less awesome. Thank you Andy,
for coming on board and helping to make this book better.

www.it-ebooks.info


Andy Matthews has been working as a web and application developer for 13
years, with an experience in a wide range of industries, and has a skill set which
includes graphic design, programming, business strategy and planning, and
marketing. Throughout his career he has been privileged to work on projects
which interfaced with industry giants such as Craigslist, written code that allowed
Enterprise level sales teams to quickly and efficiently build presentations for their
clients. He stays up-to-date with current trends in the marketplace by helping
previous employers transition to newer, more effective, coding habits and standards.

He is a frequent speaker at conferences around the country. He has also developed
software for the open source community, and he currently works for a social
networking startup Goba.mobi in Nashville, TN.
I'd like to thank my wife Jaime, and my children Noelle, Evan, and
Mason for their patience and grace in letting me pursue my passion.
Most of all, thank you God for giving me the desire to learn, the
ability to pick things up quickly, and the perseverance to apply the
knowledge I've gained throughout the years.

www.it-ebooks.info


About the Reviewers
Md Mahmud Ahsan has been developing and leading some medium to large

web applications for the past six years. He has worked with a number of PHP
frameworks (Zend, CodeIgniter) and generally likes working with an MVC design
pattern. His experience ranges from developing web applications from scratch, as
well as modifying and adding functionality to existing custom in-house systems,
open source applications, and commercial applications. He graduated in Computer
Science and Engineering, and is a PHP5 Zend Certified Engineer. He is also an
expert in iPhone applications development and has in depth working knowledge
in Objective C, C, C++, Cocos2D, Box2D, and Xcode. Apart from his full time job,
he maintains a blog at . He lives in Bangladesh with his
wife Jinat Jahan.
Currently, he is self employed and has been developing iPhone and iPad
applications, which he publishes through his own site .
Besides this, he is a part time freelancer and works on LAMP based web
applications development.
He was a technical reviewer for the following books published by Packt Publishing:

•

Zend Framework 1.8 Web Application Development Book

•

PHP jQuery Cookbook

•

jQuery UI themes

•

Android 3.0 Application Development Cookbook
I'm very grateful to my father who brought a computer for me
in 2001, since then I have loved programming and work in
various technologies.

www.it-ebooks.info


Shameemah Kurzawa started programming when she was at high school.
Being motivated to be a System Analyst, she pursued both undergraduate
and postgraduate studies in Business Information Systems and Software
Engineering respectively.

She has been working as a Web Developer/Analyst for the past six years; she
has worked in the past for Australia's renowned broadcasting company SBS
and has freelanced for her own company since 2010. Besides work she enjoys

spending time with her family, traveling, and cooking. She likes to read and
try new web technologies.
She has previously reviewed jQuery UI themes and PHP jQuery Cookbook for
Packt Publishing.
I would like to thank my husband and the Packt team for their
support and understanding in helping me review this book.

M. Ali Qureshi is based in Lahore, Pakistan. He has developed a comprehensive

understanding of web development processes having worked in the capacity of
Web Designer, Frontend developer, PHP Developer, Flash ActionScript Developer,
Software Engineer, and Project Manager in the last 12 years designing and
developing creative, interactive and usable web solutions, that get high rankings
in search engines and drive qualified traffic to websites, making them a successful
technology investment.
He has done a Masters in Economics and Computer Sciences. Running along Lahore
canal early in the morning, watching good movies and listening to music, working
out at the gym, reading books, discussing politics, and an occasional stroll in
Lawrence Garden, Lahore are a few things that Ali mostly enjoys.
When not working, he spends his time blogging and exploring new technologies.
Ali is an avid sports fan and likes watching Cricket, especially Pakistan and Australia
which are his favorite teams.

www.it-ebooks.info


Joe Wu is a Senior PHP Web Developer and has more than four years of commercial
experience to date.
Joe is always enthusiastic about exploring new ideas, technologies and opportunities
that arise. He has a wide range of skills, specializing primarily in PHP, CodeIgniter

PHP Framework, MySQL, JQuery, HTML, and CSS. Joe's skills and experiences
further extends out to various other technologies and tools such as Subversion,
Microsoft CRM, SOAP, Bash Scripting, and Symfony PHP Framework.
Joe is also a professional Badminton player, achieving the highest ranking of 59 in
the world in singles and top ranking in Australasia in 2010.
If you would like to get in touch with Joe to discuss any opportunities please do not
hesitate to visit his personal website: />
www.it-ebooks.info


www.PacktPub.com
Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related
to your book.
Did you know that Packt offers eBook versions of every book published, with PDF
and ePub files available? You can upgrade to the eBook version at www.PacktPub.
com and as a print book customer, you are entitled to a discount on the eBook copy.
Get in touch with us at for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign
up for a range of free newsletters and receive exclusive discounts and offers on
Packt books and eBooks.



Do you need instant solutions to your IT questions? PacktLib is Packt's online digital
book library. Here, you can access, read and search across Packt's entire library of books. 

Why Subscribe?
•

Fully searchable across every book published by Packt

•

Copy and paste, print and bookmark content

•

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine entirely free books. Simply use your login credentials
for immediate access.

www.it-ebooks.info


www.it-ebooks.info


To my wife Jeanne. Thank you for always being there. Thank you for making me feel like I
could do this. Thank you being strong when I'm weak. Thank you for everything.


www.it-ebooks.info

-Raymond Camden

www.it-ebooks.info


Table of Contents
Preface1
Chapter 1: Preparing your First jQuery Mobile Project
11
Important preliminary points
11
Building an HTML page
11
Getting jQuery Mobile
13
Implementing jQuery Mobile
14
Working with data attributes
16
Summary18

Chapter 2: Working with jQuery Mobile Pages

19

Important preliminary points
19
Adding multiple pages to one file
20
jQuery Mobile, links, and you

22
Working with multiple files
23
jQuery Mobile and URLs
26
Additional customization
26
Page titles
27
Prefetching content
28
Changing page transitions
28
Summary29

Chapter 3: Enhancing Pages with Headers, Footers, and Toolbars 31
Important preliminary points
Adding headers
Icon sneak peak
Working with back buttons
Working with footers
Creating fixed and full screen headers and footers
Full screen positioning
Working with navigation bars
Persisting navigation bar footers across multiple pages

www.it-ebooks.info

31
31

34
34
36
38
39
40
42


Table of Contents

Summary44

Chapter 4: Working with Lists

45

Creating lists
45
Working with list feature
50
51
Creating Inset lists
Creating list dividers
52
Creating lists with count bubbles
53
54
Using thumbnails and icons
Creating Split Button lists

56
57
Using a search filter
Summary58

Chapter 5: Getting Practical – Building a Simple Hotel Mobile Site 59
Welcome to Hotel Camden
The home page
Finding the hotel
Listing the hotel rooms
Contacting the hotel
Summary

Chapter 6: Working with Forms and jQuery Mobile
Before you begin
What jQuery Mobile does with forms
Working with radio buttons and checkboxes
Working with select menus
Search, toggle, and slider fields
Search fields
Flip toggle fields
Slider fields

59
60
62
65
68
70

71
71
72
76
79
82

83
83
84

Using native form controls
85
Working with "mini" fields
85
Summary86

Chapter 7: Creating Modal Dialogs, Grids, and Collapsible Blocks 87
Creating dialogs
Laying out content with grids
Working with collapsible content
Summary

Chapter 8: jQuery Mobile Configuration, Utilities,
and JavaScript methods
Configuring jQuery Mobile
Using jQuery Mobile utilities
Page methods and utilities

[ ii ]

www.it-ebooks.info

87
91
97
102

103
103
109
109


Table of Contents

Path and URL related utilities
111
Miscellaneous utilities
115
jQuery widget and form utilities
115
Summary119

Chapter 9: Working with Events

121

Chapter 10: Moving further with the Notekeeper
Mobile Application

137

Working with physical events
121
Handling page events
129
133
What about $(document).ready?
Creating a real example
133
Summary136

What is a mobile application?
Designing your first mobile application
Listing out the requirements
Building your wireframes
Designing the add note wireframe
Display notes wireframe
View note/delete button wireframe

Writing the HTML
Adding functionality with JavaScript
Storing Notekeeper data
Using localStorage

137
138
138

139
139
140
140

141
143
146

146

Effective use of boilerplates
Building the Add Note feature

148
148

Dynamically adding notes to our listview
Viewing a note

153
154

Adding bindings
Collecting and storing the data
Building the Display Notes feature

Using the Live function

148

150
151

154

Dynamically creating a new page
155
Deleting a note
157
Summary158

Chapter 11: Enhancing jQuery Mobile

159

What's possible?
159
The visual building blocks of jQuery Mobile
160
Border-radius161
Applying drop shadows
162
Using text-shadow
Using box-shadow
CSS gradients

163
164
165

[ iii ]

www.it-ebooks.info


Table of Contents

The basics of jQuery Mobile theming
Bars (.ui-bar-?)
Content blocks (.ui-body-?)
Buttons and listviews (.ui-btn-?)
Mixing and matching swatches
Site-wide active state
Default icons
Creating and using a custom theme
What's ThemeRoller?

168
169
169
170
170
171
172
172
173

Using ThemeRoller
173
Preview175

Colors175
Inspector176
Tools177

Creating a theme for Notekeeper

178

Creating and using custom icons
CSS Sprites
Designing your first icon
High and low resolution
Updating the Notekeeper app
Adding our custom theme
Adding our custom icon
Summary

183
183
185
187
188
188
189
190

Exporting your theme

181

Chapter 12: Creating Native Applications

191

Chapter 13: Becoming an expert - Build an RSS
Reader application

205

HTML as a native application
Working with PhoneGap
Adding PhoneGap functionality
Summary

191
192
199
203

RSS Reader – the application
205
Creating the RSS Reader Application
208
The displayFeeds function
210
Storing our feeds
211
212
Adding an RSS feed

Viewing a feed
214
Creating the entry view
216
Going further
218
Summary218

Index219
[ iv ]

www.it-ebooks.info


Preface
What is jQuery Mobile?

On August 11, 2010, nearly two years ago, John Resig (creator of jQuery) announced
the jQuery Mobile project. While focused on the UI framework, it was also a
recognition of jQuery itself as a tool for mobile sites and that work would be done
to the core framework itself, to make it work better on devices. Release after release,
the jQuery Mobile project evolved into a powerful framework encompassing more
platforms, more features, and better performance with every update.
But what do we mean when we say a UI framework? What does it mean for developers
and designers? jQuery Mobile provides a way to turn regular HTML (and CSS) into
mobile friendly sites. As you will see soon in the first chapter, you can take a regular
HTML page, add in the required bits for jQuery Mobile (essentially five lines of
HTML), and find your page transformed into a mobile-friendly version instantly.
Unlike other frameworks, jQuery Mobile is focused on HTML. In fact, for a
framework tied to jQuery, you can do a heck of a lot of work without writing one

line of JavaScript. It's a powerful, practical way of creating mobile websites that
any existing HTML developer can pick up and adapt within a few hours. Compare
this to other frameworks, such as Sencha Touch. Sencha Touch is also a powerful
framework, but its approach is radically different, using JavaScript to help define
and layout pages. jQuery Mobile is much friendlier to people who are more familiar
with HTML, as opposed to JavaScript. jQuery Mobile is touch friendly, which will
make sense to anyone who has used a smart phone and struggled to click the exact
right spot on a website with tiny text and hard to spot links. It will make sense to
anyone who accidentally clicked on a Reset button instead of Submit. jQuery Mobile
will enhance your content to help solve these issues. Regular buttons become large,
fat, and easy to hit buttons. Links can be turned into list based navigation systems.
Content can be split into virtual pages with smooth transitions. You will be surprised
just how jQuery Mobile works without writing much code at all.

www.it-ebooks.info


Preface

jQuery Mobile has some very big sponsors. They include Nokia, Blackberry, Adobe,
and other large companies. These companies have put in money, hardware, and
developer resources to help ensure the success of the project:

What's the cost?

Ah, the million dollar question. Luckily this one is easy to answer: nothing. jQuery
Mobile, like jQuery itself, is completely free to use for any purpose. Not only that, it's
completely open source. Don't like how something works? You can change it. Want
something not supported by the framework? You can add it. To be fair, digging deep
into the code base is probably something most folks will not be comfortable doing.

However, the fact that you can if you need to, and the fact that other people can,
leads to a product that will be open to development by the community at large.
[2]

www.it-ebooks.info


Preface

What do you need to know?

Finally, along with not paying a dime to get, and work with, jQuery Mobile, the
best thing is that you probably already have all the skills necessary to work with
the framework. As you will see in the upcoming chapters, jQuery Mobile is an
HTML based framework. If you know HTML, even just simple HTML, you can use
the jQuery Mobile framework. Knowledge of CSS and JavaScript is a plus, but not
entirely required. (While jQuery Mobile uses a lot of CSS and JavaScript behind the
scenes, you don't actually have to write any of this yourself!)

What about native apps?

jQuery Mobile does not create native applications. You'll see later in the book how
you can combine jQuery Mobile with wrapper technologies such as PhoneGap to
create native apps but, in general, jQuery Mobile is for building websites. The
question on whether to develop a website or a mobile app is not something this book
can answer. You need to look at your business needs and see what will satisfy them.
Because we are not building mobile apps themselves, you do not have to worry
about setting up any accounts with Google or Apple, or paying any fees for the
marketplace. Any user with a mobile device that includes a browser will be able to
view your mobile-optimized sites.

Again – if you want to develop true mobile apps with jQuery Mobile, it's
definitely an option.

Help!

While we'd like to think that this book will cover every single possible topic you
would need for all your jQuery Mobile needs, most likely there will be things we
can't cover. If you need help, there are a couple of places you can try.
First, the jQuery Mobile docs ( cover
syntax, features, and development in general, much like this book. While the
material may cover some of the same ground, if you find something confusing here,
try the official docs. Sometimes a second explanation can really help.
Second, the jQuery Mobile forum ( />is an open ended discussion list for jQuery Mobile topics. This is the perfect place
to ask questions. Also, it's a good place to learn about problems other people are
having. You may even be able to help them. One of the best ways to learn a new
topic is by helping others.

[3]

www.it-ebooks.info


Preface

Examples

Want to see jQuery Mobile in action? There's a site for that. JQM Gallery
( is a collection of sites submitted by users,
built using jQuery Mobile. Not surprisingly, this website too uses jQuery Mobile,
which makes it yet another way to sample jQuery Mobile:

[4]

www.it-ebooks.info


Preface

What this book covers

Chapter 1, Preparing your First jQuery Mobile Project, works you through your first
jQuery Mobile project. It details what must be added to your project's directory
and source code.
Chapter 2, Working with jQuery Mobile Pages, continues the work in the previous
chapter and introduces the concept of jQuery Mobile pages.
Chapter 3, Enhancing Pages with Headers, Footers, and Toolbars, explains how to
enhance your pages with nicely formatted headers and footers.
Chapter 4, Working with Lists, describes how to create jQuery Mobile list views.
These are mobile optimized lists which are especially great for navigation.
Chapter 5, Getting Practical – Building a Simple Hotel Mobile Site, walks you through
creating your first "real" (albeit simple) jQuery Mobile application.
Chapter 6, Working with Forms and jQuery Mobile, explains the process of using jQuery
Mobile optimized forms. Layout and special form features are covered in detail.
Chapter 7, Creating Modal Dialogs, Grids, and Collapsible Blocks, walks you through
special jQuery Mobile user interface items for creating grid based layouts, dialogs,
and collapsible content areas.
Chapter 8, jQuery Mobile Configuration, Utilities, and JavaScript methods, describes the
various JavaScript-based utilities your code may have need of.
Chapter 9, Working with Events, details the events thrown by various jQuery
Mobile-related features, like pages loading and unloading.

Chapter 10, Moving Further with the Notekeeper Mobile Application, walks you
through the process of creating another website, an HTML5-enhanced note
taking application.
Chapter 11, Enhancing jQuery Mobile, demonstrates how to change the default
appearance of your jQuery Mobile sites by selecting and creating unique themes.
Chapter 12, Creating Native Applications, takes what you've learned previously
and shows how to use the open source PhoneGap project to create real
native applications.
Chapter 13, Becoming an expert ­Build an RSS Reader application, expands upon the
previous chapter by creating an application that lets you add and read RSS feeds
on mobile devices.

[5]

www.it-ebooks.info


Preface

What you need for this book

Nothing! Technically you need a computer, and a browser as well, but jQuery
Mobile is built with HTML, CSS, and JavaScript. No IDE (Integrated Development
Environment) or special tool will be required to work with the framework. If you've
got any editor on your system (and all operating systems include a free editor of
some sort), you can develop with jQuery Mobile.
There are good IDEs out there that can help you be more productive. For example,
Adobe Dreamweaver CS 5.5 includes native support for jQuery Mobile with code
assist and device previews:

At the end of the day, you can develop with jQuery Mobile for free. It's zero cost to
you to download, develop, and publish jQuery Mobile sites.

Who this book is for

This book is for anyone looking to embrace mobile development and expand their
skill set beyond the desktop.

[6]

www.it-ebooks.info


Preface

Conventions

In this book, you will find a number of styles of text that distinguish between
different kinds of information. Here are some examples of these styles, and an
explanation of their meaning.
Code words in text are shown as follows: "Notice the new data-title tag added
to the div tag."
A block of code is set as follows:
<html>
<head>
<meta name="viewport" content="width=device-width, initialscale=1">
<title>Multi Page Example</title>

New terms and important words are shown in bold. Words that you see on the
screen, in menus or dialog boxes for example, appear in the text like this: "Imagine

our Megacorp page. It's got three pages, but the Products page is a separate
HTML file."
Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about
this book—what you liked or may have disliked. Reader feedback is important for us
to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to ,
and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing
or contributing to a book, see our author guide on www.packtpub.com/authors.

[7]

www.it-ebooks.info


Preface

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to
help you to get the most from your purchase.

Downloading the example code

This book contains many code samples. You are not expected to type them in. You
should not type them all in. Rather, you should download them from the public
Github repository setup for the book: />jQuery-Mobile-Book. The Github repository will be updated as typos and other
mistakes are found in the book. Therefore, it is possible the code may not match
exactly the text in the book.
If you are not familiar with Github, then simply click the Downloads tab and then
either Download as zip or Download as tar.gz to quickly get an archived collection
of all the files.
You should extract these files onto a local web server. If you do not have one
installed, we recommend installing Apache ( Apache
works on all platforms, is free, and is typically easy to install. Once extracted, you
can edit these files, view them in your browser, or copy them as a starting point for
your own projects.
You can also download the example code files for all Packt books you have
purchased from your account at . If you purchased this
book elsewhere, you can visit and register
to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes
do happen. If you find a mistake in one of our books—maybe a mistake in the text or
the code—we would be grateful if you would report this to us. By doing so, you can
save other readers from frustration and help us improve subsequent versions of this
book. If you find any errata, please report them by visiting ktpub.
com/support, selecting your book, clicking on the errata submission form link, and
entering the details of your errata. Once your errata are verified, your submission
will be accepted and the errata will be uploaded to our website, or added to any list
of existing errata, under the Errata section of that title.

[8]

www.it-ebooks.info