jQuery Mobile

Preface

Introduction

Mobile applications come in two basic flavors: native applications, which are compiled programs that run natively on the device, and mobile web applications, which run inside a web browser on the device.

Native applications get almost all of the press these days, especially given the financial success of the iTunes App Store and the Android Market. And with good reason, as native applications have many advantages: they are fast, have access to all of the power of the platform they are built for, and so forth. However, native applications suffer from one important limitation: they are not portable. If you want to make your application available on multiple platforms, you either have to write it in multiple languages (resulting in multiple code bases to maintain) or use a platform abstraction layer like Titanium or PhoneGap.

Mobile web applications, on the other hand, are created in HTML, CSS, and JavaScript, and run in the web browser on the mobile device. This means one code base to maintain, but mobile web applications still need to account for variations in web browsers across platforms.

Enter jQuery Mobile. Based on the popular jQuery JavaScript library, jQuery Mobile is designed to create mobile web applications that function on a broad range of devices. With jQuery Mobile, it is possible to quickly create mobile web applications that look and behave consistently across all supported devices, and that have advanced user interface capabilities. jQuery Mobile gives the developer a standard set of layouts, user interface widgets, and interactions, as well as a rich API for applying and extending them.

jQuery Mobile is not yet in production—as of this writing, it is in its Alpha 4 release, with the beta coming soon.

Even so, the library already has a broad set of features and is remarkably stable. In fact, I have already used it in one production project with great success, and if you review posts on the jQuery Mobile forums, you’ll see that there are many people using jQuery Mobile in production. As jQuery Mobile advances, we hope to update this ebook to cover new features and provide new tips and techniques.

What This Book Covers

This book covers how the jQuery Mobile library works, and how to use it to create mobile web applications. While I was writing this book I was engaged in a project in which I was using jQuery Mobile to create a mobile web application. This gave me a unique insight into how to use jQuery Mobile in a production environment, so this book takes a practical approach for using the library and focuses on example code and screenshots. In addition, throughout the book there are “Under The Hood” sections where I explore a topic in more detail: page initialization, using swipe events to trigger page transitions, animation in a jQuery Mobile application, and so forth.

In Chapter 1, we will provide a high-level overview of jQuery Mobile, how it works, and how to use it. If you follow the examples in the chapter, at the end of the chapter you will have built your first jQuery Mobile application. It won’t do much, but it will show how easy it is to set up a jQuery Mobile application and introduce you to some important jQuery Mobile concepts.

Chapter 2 covers paging and navigation in jQuery Mobile, including dialogs, AJAX content, and history.

In Chapter 3, we will cover the UI elements that jQuery Mobile can create: toolbars, buttons, lists, form elements, and layout grids.

In Chapter , we will cover the jQuery Mobile theme framework, how to use it, and how to customize it.

In Chapter 5, we will take a look at the new events that jQuery Mobile creates, the methods it exposes, and how to customize jQuery Mobile for your own applications.

Chapter 6 is where we will put everything together and build an actual mobile application: jqmTweet. We’ll walk through how to approach building a mobile application with jQuery Mobile from start to finish.

What You Need To Know

This book assumes you are already familiar with the jQuery JavaScript library. You should be able to create jQuery selectors and apply jQuery methods to them.

This book assumes you are familiar with HTML markup and Cascading Style Sheets. Throughout the code examples, we will be using HTML 5 and CSS 3, and employing industry best practices like semantic markup and progressive enhancement.

This book also assumes that you have a basic familiarity with mobile web browsers. Though jQuery Mobile aims to provide a cross-platform API, it is still necessary for a mobile web developer to understand mobile browsers and their capabilities.

Finally, this book assumes you are familiar with the technologies of the web: HTTP, clients and servers, security, etc.

Conventions Used In This Book

The following typographical conventions are used in this book:

Italic

Indicates a term, URL, email address, or filenames or extensions.

Constant Width

Used for code examples and for code elements such as variable names, function names, keywords, etc. that are included in regular paragraphs.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Note

This signifies a tip, suggestion, or note of interest.

Warning

This indicates a warning or caution: a bug in the library, a common problem, etc.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “jQuery Mobile by Jon Reid (O’Reilly). Copyright 2011 Jonathan Reid, 978-1-449-30668-7.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://www.oreilly.com/catalog/0636920020585

To comment or ask technical questions about this book, send email to:

[e-mail]

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

I’d like to thank RJ Owen for volunteering to do the technical review of this book. His honesty and encouragement helped make this book a success.

I also want to thank Juan Sanchez for providing suggestions for the “Under The Hood” sections in the book.

The HTML development team at EffectiveUI patiently listened to me rave about jQuery Mobile and obsess about this book: Aaron Congleton, Ryan McGinty, Kevin Bauman, Shane Church, Tony Walt, and George Robison. Thanks, guys.