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 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 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 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 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 http://www.apress.com 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 ... 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... of supported devices in jQuery Mobile 1.0, which includes most phones, tablets, desktop browsers, and even e-readers CHAPTER 1: Why jQuery Mobile? Figure 1–1 jQuery 1.0 Mobile Browser Coverage... 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