a0098 apress pro jquery mobile dec 201 morebook vn 518

Books for professionals by professionals®

Companion

eBook

L

earn how to deliver cross-platform mobile web applications from a unified interface with Pro jQuery Mobile. This book will teach you how to
create themable, responsive, native-looking applications for iOS, Android,
Windows Phone, and more. You’ll see what sets jQuery Mobile apart from
other mobile web development platforms as author Brad Broulik walks you
through practical examples of jQuery Mobile features, including design elements and event handling.
Pro jQuery Mobile shows you how to:

• Apply jQuery Mobile to specific cases, including iOS and Android apps
• Use jQuery Mobile’s core features, including page structure, navigation,
and form elements
Format content with grids and CSS
Publish your apps to app stores via PhoneGap
Integrate web services and Google Maps into your jQuery Mobile apps
Combine responsive layouts with progressive enhancement to render
the best possible user experience from a single code base

•
•
•
•

With Pro jQuery Mobile, you’ll be creating and publishing amazing mobile
apps in no time.

Pro jQuery Mobile

Related Titles

Available

Cross-platform mobile development
with the power of jQuery

Pro

jQuery Mobile
Broulik

Companion eBook

SOURCE CODE ONLINE

www.apress.com

Shelve in
Mobile Computing
User level:
Intermediate–Advanced

Brad Broulik


Download from Wow! eBook <www.wowebook.com>

For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.


Contents at a Glance
Contents .............................................................................................................. v
About the Author.................................................................................................ix
About the Technical Reviewer .............................................................................x
Acknowledgments ............................................................................................. xi
Introduction ...................................................................................................... xii

■Chapter 1: Why jQuery Mobile? ....................................................................... 1

■Chapter 2: Getting Started with jQuery Mobile .............................................. 13

■Chapter 3: Navigating with Headers, Toolbars, and Tab Bars ....................... 39

■Chapter 4: Form Elements and Buttons ......................................................... 63

■Chapter 5: List Views ................................................................................... 107

■Chapter 6: Formatting Content with Grids and CSS Gradients .................... 125

■Chapter 7: Creating Themable Designs ....................................................... 147

■Chapter 8: jQuery Mobile API ...................................................................... 171

■Chapter 9: Service Integration Strategies ................................................... 201

■Chapter 10: Easy Deployment with PhoneGap ............................................ 227

Index ............................................................................................................... 249

iv


Chapter

1

Why jQuery Mobile?
jQuery Mobile is a new, simple to use, UI framework for building cross-platform Mobile
Web applications. In a matter of minutes, you can create mobile applications (apps) that
are optimized to run on nearly every phone, tablet, desktop, and e-reader device
available today. That’s right, with a single jQuery Mobile codebase we can create a
unified experience for nearly all consumers. jQuery Mobile is an ideal framework for any
Web designer or developer who needs a simple framework for creating a rich mobile
Web experience. The experience also extends beyond the Web. jQuery Mobile apps can
also be compiled with hybrid techniques for distribution within your favorite native app
store. As we begin our journey, let's review the important features that make jQuery
Mobile unique.

Universal Access
jQuery Mobile applications are universally accessible to all devices with a browser. This
is a favorable reach advantage to jQuery Mobile’s distribution model (see Figure 1–1).
Nearly every mobile device ships with a browser. If your app is universally accessible to
this broad spectrum it is a major competitive advantage. The following is a complete
listing of supported devices in jQuery Mobile 1.0, which includes most phones, tablets,
desktop browsers, and even e-readers.

1


2

CHAPTER 1: Why jQuery Mobile?

Figure 1–1. jQuery 1.0 Mobile Browser Coverage

Supported Devices:









Phones/Tablets



Android 1.6+




BlackBerry 5+




iOS 3+




Windows Phone 7




WebOS 1.4+

Symbian (Nokia S60)




Firefox Mobile Opera Mobile 11+




Opera Mini 5+

Desktop browsers



Chrome 11+




Firefox 3.6+




Internet Explorer 7+




Safari

e-readers

Kindle




Nook


Acknowledgments
I want to extend an enormous amount of appreciation to the entire jQuery Mobile core team:
John Resig, Todd Parker, Scott Jehl, Kin Blas, John Bender, and Ghislain Seguin. It has been a
pleasure to write about your remarkable creation.
I also want to thank the entire Apress team for their guidance and feedback: Michelle
Lowman, editor; Jessica Belanger, coordinating editor; Susan Ethridge, developmental editor;
Jorge Ramon, technical reviewer. This book would not have been possible without your help.
I want to especially thank my wife and daughter for their patience, support, and assistance
with this project. Thank you!

xi


Introduction
We are currently witnessing a shift in the way enterprises and individuals build and distribute
mobile applications. Initially, the strategy was to build separate native apps for each major
platform. However, teams quickly realized that maintaining multiple platforms was unsustainable
as mobile teams lost their agility. The mobile teams that can build once and ship to all devices
tomorrow will have a competitive advantage and jQuery Mobile can help get you there.
jQuery Mobile is a framework for delivering cross-platform mobile web applications with a
unified interface. jQuery Mobile combines responsive layouts with progressive enhancement to
render the best possible user experience from a single code base. With jQuery Mobile, we will see
how to create themable, responsive, native-looking applications for iOS, Android, Windows

Phone, Blackberry, and more. We will discover what sets jQuery Mobile apart from other mobile
web development platforms and we will walk through practical examples of jQuery Mobile
features, including design elements and event handling.

What you'll learn
■

Unique features of jQuery Mobile

■

jQuery Mobile core features, including page structure, navigation, form elements, lists,
and grids

■

How to create themable designs

■

The entire jQuery Mobile API, including data attributes, methods, and events

■

Integrating web services, Google Maps, and Geolocation into your jQuery Mobile apps

■

How to extend jQuery Mobile with PhoneGap when you need to distribute to an app
store or access device functionality

■

How to apply jQuery Mobile to specific cases, including iOS and Android apps

Who This Book Is For
Mobile developers who want to master jQuery Mobile and build cross-platform mobile web
applications from a single code base.

Downloading the code
The source code for this book is available to readers at in the Source Code
section of the book's home page. Please feel free to visit the Apress web site and download the
code there.

xii