Fr

Third Edition
jQuery Mobile is a HTML5-based touch-optimized
web framework. jQuery Mobile can be used to build
responsive cross-platform websites and apps for a
wide range of smartphones, tablets, and desktop
devices. The jQuery Mobile framework can be integrated
with other mobile app frameworks such as PhoneGap,
IBM MobileFirst, and more.
This book explains how to add the framework to
your HTML pages to create rich, mobile-optimized
web pages with minimal effort. You'll learn how to
use jQuery Mobile's automatic enhancements and
congure the framework for customized, powerful,
mobile-friendly websites. We then dig into forms, events,
and styling. You'll see how jQuery Mobile automatically
enhances content, and will nd out how to use the
JavaScript API to build complex sites.

Who this book is written for

Create mobile-optimized sites using

simple HTML
Structure your sites so users can browse
them on mobile devices
Find out how to work with multiple pages in
the jQuery Mobile framework and embed
multiple pages in HTML les
Enhance simple pages using various toolbars
Include mobile-optimized forms for
interactive sites

E x p e r i e n c e

D i s t i l l e d

jQuery Mobile Web

Development Essentials

Use HTML5's local storage feature in

jQuery Mobile to include persistent
client-side storage
Explore the rich sets of widgets and themes
available and discover how to modify them
for use in your jQuery Mobile site

Raymond Camden

P U B L I S H I N G

Convert desktop sites into mobile versions

$ 44.99 US
28.99 UK

community experience distilled

Sa
m

pl

C o m m u n i t y

Andy Matthews

This book is for any web developer who is looking to create

mobile-optimized websites. Basic knowledge of HTML is
required. Minor familiarity with JavaScript would help but
is not required.

What you will learn from this book

jQuery Mobile Web Development Essentials

Third Edition

jQuery Mobile Web

Development Essentials

ee

Third Edition
Build a powerful and practical jQuery-based framework in order to
create mobile-optimized websites

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

Raymond Camden
Andy Matthews

In this package, you will find:

The authors biography

A preview chapter from the book, Chapter 1 'Preparing Your First jQuery
Mobile Project'
A synopsis of the books content
More information on jQuery Mobile Web Development Essentials - Third
Edition

About the Authors

Raymond Camden is a developer advocate for IBM. His work focuses on the

StrongLoop platform, Bluemix, hybrid mobile development, Node.js, HTML5, and

web standards in general. He's a published author and presents at conferences
and user groups on a variety of topics. Raymond can be reached at his blog
(http://www.raymondcamden.com), @raymondcamden on Twitter, or via e-mail at
raymondcamden@gmail.com.
Raymond Camden is the author of many development books, including Apache
Cordova in Action, Manning Publications and Client-Side Data Storage, O'Reilly
Media, Inc.

Andy Matthews has been working as a software engineer for nearly 20 years with
experience in a wide range of industries and a skillset that includes UI/UX, graphic
design, and programming. He is the coauthor of the books Creating Mobile Apps with
jQuery Mobile and jQuery Mobile Web Development Essentials by Packt Publishing. He
has written for online publications, such as Adobe, NetTuts, and .NET Magazine.
He has spoken at conferences all over the country, and has developed a number of
projects for the open source community.

Preface
What is jQuery Mobile?
On August 11, 2010, nearly six years ago, John Resig (creator of jQuery) announced
the jQuery Mobile project. While it focused on the UI framework, it was also a
recognition of jQuery itself as a tool for mobile websites 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 websites. As you will see soon in the first chapter, you can take a
regular HTML page, add the required bits for jQuery Mobile (essentially, lines of
HTML), and your page is 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 smartphone and struggled to click the exact
spot on a website with tiny text and hard-to-spot links. It will make sense to anyone
who has 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.

Preface

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
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, will lead to a
product that will be open to development by the community at large.

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 hybrid mobile technologies, such as Apache
Cordova, 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 websites.
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.

Preface

First, the jQuery Mobile docs (http://jquerymobile.com/demos/) 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 (http://forum.jquery.com/jquery-mobile)
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.

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 Website, 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 Grids, Panels, and Other Widgets, walks you through special jQuery
Mobile UI items for creating grid-based layouts and other common UI elements.
Chapter 8, Moving Further with the Notekeeper Mobile Application, walks you
through the process of creating another website, an HTML5-enhanced
note-taking application.
Chapter 9, jQuery Mobile Configuration, Utilities, and JavaScript Methods, describes the
various JavaScript-based utilities your code may have need of.
Chapter 10, Working with Events, details the events thrown by various jQuery
Mobile-related features, like pages loading and unloading.

Preface

Chapter 11, Enhancing jQuery Mobile, demonstrates how to change the default
appearance of your jQuery Mobile websites 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 Building an RSS Reader Application, expands upon the
previous chapter by creating an application that lets you add and read RSS feeds on
mobile devices.

Preparing Your First jQuery

Mobile Project
You know what jQuery Mobile is, the history of it, as well as its features and goals.
Now, we're actually going to build our first jQuery Mobile website (well, web page)
and see how easy it is to use.
In this chapter, we will be covering the following topics:

Creating a simple HTML page

Adding jQuery Mobile to the page

Updating the HTML to make use of the data attributes jQuery

Mobile recognizes

Important preliminary points

You can find all the source code for this chapter in the c1 folder of the ZIP file
you downloaded from GitHub. If you wish to type everything out by hand,
we recommend you to use similar filenames.

Building an HTML page

Let's begin with a simple web page that is not mobile-optimized. To be clear, we
aren't saying it can't be viewed on a mobile device. Not at all! But it may not be
usable on a mobile device. It may be hard to read (the text may be too small). It may
be too wide. It may use forms that don't work well on a touchscreen. We don't know
the kinds of problems we will face until we start testing (and we've all tested our
websites on mobile devices to see how well they work, right?).

[1]

Preparing Your First jQuery Mobile Project

Let's have a look at Listing 1-1:

Listing 1-1: test1.html
<html>
<head>
<title>First Mobile Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>
Welcome to our first mobile web site. It's going to be the
best site you've ever seen. Once we get some content. And a
business plan. But the hard part is done!
</p>
<p>
<i>Copyright Megacorp &copy; 2015</i>
</p>
</body>
</html>

As we said, it isn't too complex, right? Let's take a quick look at this in the browser:

[2]

Chapter 1

Not so bad, right? But let's take a look at the same page in a mobile simulator:

[3]

Preparing Your First jQuery Mobile Project

Wow, the text is in a barely readable font size. You've probably seen web pages like
this before on your mobile device. You can, of course, typically use pinch and zoom
or double-click actions to increase the size of the text. But it would be preferable to
have the page render immediately in a mobile-friendly view. This is where jQuery
Mobile enters.

Getting jQuery Mobile

In the preface, we talked about how jQuery Mobile is just a set of files. This wasn't
said to minimize the amount of work done to create those files or to play down how
powerful they are, but to emphasize that using jQuery Mobile means that you don't
have to install any special tools or server. You can download the files and simply
include them in your page. And if that's too much work, you have an even simpler
solution. jQuery Mobile's files are hosted on a Content Delivery Network (CDN).
This is a resource hosted by them and it is guaranteed (as much as anything like this
can be) to be online and available. Multiple websites are already using these CDN
hosted files. This means that when users hit your website, they may already have
the resources in their cache. For this book, we will be making use of the CDN hosted
files. Just for this first example, we'll download the ZIP file and extract the files
we need.
I recommend doing this anyway for the times when you're on an
airplane and wanting to whip up a quick mobile website.

To grab the files, visit http://jquerymobile.com/download. There are a few

options here, but you want the ZIP file option. Go ahead and download the ZIP file
and extract it (the ZIP file you downloaded earlier from GitHub has a copy already).
The following screenshot demonstrates what you should see after extracting the
content from the ZIP file:

[4]

Chapter 1

An important note: at the time this book was written, jQuery Mobile
was at version 1.4.5. Obviously, by the time you read this book, a
later version may be released. The filenames you see listed in the
previous screenshot are version-specific, so keep in mind that they
may look a bit different for you.

The ZIP file contains demos and both the minified and regular versions of the jQuery
Mobile framework. Additional files are provided for theming and other purposes,
but your main concern will be with jquery.mobile-1.4.5.min.css and jquery.
mobile-1.4.5.min.js. You will typically want to use the minified version in your
production apps though. The images folder contains various images used by jQuery
Mobile's CSS file. Of course, you also need to include the jQuery library.
You can download this separately at http://www.jquery.com.

[5]

Preparing Your First jQuery Mobile Project

Implementing jQuery Mobile

Ok, we've got the bits. How do we use them? Adding jQuery Mobile support to a
website requires the following three steps at a minimum:
1. First, add the HTML5 DOCTYPE declaration to the page:
<!DOCTYPE html>

This is used to help inform the browser about the type of content it will be
dealing with
2. Add a viewport meta tag:
<meta name="viewport" content="width=device-width, initialscale=1">

This will help set better defaults for pages when viewed on a mobile device
3. Finally, the CSS, the JavaScript library, and jQuery itself need to be included
into the file.
Let's look at a modified version of our previous HTML file that adds all of these:
Listing 1-2: test2.html
<!DOCTYPE html>
<html>
<head>
<title>First Mobile Example</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></
script>
</head>
<body>
<h1>Welcome</h1>
<p>
Welcome to our first mobile web site.
It's going to be the best site you've ever seen.
Once we get some content. And a business plan.
But the hard part is done!
</p>
<p>
<i>Copyright Megacorp &copy; 2015</i>
</p>
</body>
</html>
[6]

Chapter 1

For the most part, this version is the exact same as listing 1, except for the
addition of the DOCTYPE declaration, the CSS link, and our two JavaScript libraries.
Notice that we pointed to the hosted version of the jQuery library. It's perfectly fine
to mix local JavaScript files and remote ones. If you want to ensure that you can
work offline, you can simply download the jQuery library as well.
So, while nothing changed in the code between the body tags, there is going to be a
radically different view now in the browser. The following screenshot shows how
the iOS mobile browser renders the page now:

[7]

Preparing Your First jQuery Mobile Project

Right away, you see a couple of differences. The biggest difference is the relative
size of the text. Notice how much bigger and easier to read it is. As we said, the user
could have zoomed in on the previous version, but many mobile users aren't aware
of this technique. This page loads up immediately in a manner that is much more
usable on a mobile device.

Working with data attributes

As we saw in the previous example, just adding in jQuery Mobile goes a long way
to updating our page for mobile support. But there's a lot more involved to really
prepare our pages for mobile devices. As we work with jQuery Mobile over the
course of the book, we're going to use various data attributes to mark up our pages
in a way that jQuery Mobile understands. But what are data attributes?
HTML5 introduced the concept of data attributes as a way to add ad hoc values to
the Document Object Model (DOM). As an example, this is a perfectly valid HTML:
<div id="mainDiv" data-ray="moo">Some content</div>

In the previous HTML, the data-ray attribute is completely made up. However,
because our attribute begins with data-, it is also completely legal. So, what happens
when you view this in your browser? Nothing! The point of these data attributes is to
integrate with other code, like JavaScript that does whatever it wants with them. So,
for example, you could write JavaScript that finds every item in the DOM with the
data-ray attribute and change the background color to whatever was specified in
the value.
This is where jQuery Mobile comes in, making extensive use of data attributes both
for markup (to create widgets) and behavior (to control what happens when links
are clicked). Let's look at one of the main uses of data attributes within jQuery
Mobiledefining pages, headers, content, and footers:
Listing 1-3: test3.html
<!DOCTYPE html>
<html>
<head>
<title>First Mobile Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery2.1.3.min.js"></script>

[8]

Chapter 1
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></
script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Welcome</h1></div>
<div role="main" class="ui-content">
<p>
Welcome to our first mobile web site.
It's going to be the best site you've ever seen.
Once we get some content. And a business plan.
But the hard part is done!
</p>
</div>
<div data-role="footer">
<h4>Copyright Megacorp &copy; 2015</h4>
</div>
</div>
</body>
</html>

Compare the previous code snippet to listing 1-2 and you will see that the main
difference was the addition of the div blocks. One div block defines the page. Notice
that it wraps all of the content inside the body tags. Inside the body tag, there are
three separate div blocks. One has a role of header, another a role of content, and
the final one is marked as footer. The header and footer blocks use data-role,
which should give you a clue that we're defining a role for each of the blocks. The
center div block, the one for content, uses the role attribute instead of data-role
and adds a class. This is a special exception where jQuery Mobile (most recently) has
switched to using a class directly to help speed up the initial layout of the page. As
we stated earlier, these data attributes mean nothing to the browser itself, but jQuery
Mobile can recognize them and enhance them.

[9]

Preparing Your First jQuery Mobile Project

Let's look at the new version of the page:

Notice right away that both the header and footer now have a gray background
applied to them. This makes them stick out even more from the rest of the content.
Speaking of content, the page text now has a bit of space between it and the sides.
The header and footer were enhanced automatically by the jQuery Mobile JavaScript
library, while the use of the ui-class style on the main content made use of the CSS
provided with the framework. This is a theme you will see repeated again and again
as we go through this book. A vast majority of the work you'll be doing will involve
the use of data attributes or a bit of CSS.

[ 10 ]

Chapter 1

Summary
In this chapter, we talked a bit about how web pages may not always render well in
a mobile browser. We talked about how the simple use of jQuery Mobile can go a
long way to improve the mobile experience of a website. Specifically, we discussed
how you can download jQuery Mobile and add it to an existing HTML page, what
data attributes mean in terms of HTML, and how jQuery Mobile makes use of data
attributes to enhance your pages.
In the next chapter, we will build upon this usage and start working with links and
multiple pages of content.

[ 11 ]

Get more information jQuery Mobile Web Development Essentials - Third

Edition

Where to buy this book

You can buy jQuery Mobile Web Development Essentials - Third Edition from the
Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: