Jon Reid
Building Cross-Platform Mobile Applications
Published by O’Reilly Media, Inc.,
1005 Gravenstein Highway North, Sebastopol, CA 95472.
1005 Gravenstein Highway North, Sebastopol, CA 95472.
 |
| jQuery Mobile |
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.
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 4, 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.
Screenshot
Purchase Now !
Just with Paypal
Just with Paypal
Product details
Price
|
|
|---|---|
File Size
| 6,530 KB |
Pages
|
124 p |
File Type
|
PDF format |
ISBN
| 978-1-449-30668-7 |
Copyright
| 2011 Jonathan Reid |
Table of Contents
Preface . . . . . . . . . . . . . ix
1. Meet jQuery Mobile . . . . . .. . . . . . 1
Overview of the jQuery Mobile Library 1
How jQuery Mobile Works 2
Create Your First jQuery Mobile Application 2
Under The Hood: the jqmData() Custom Selector 7
2. Application Structure and Navigation . . . . . . . . 9
Pages 9
Internal Pages 10
External Pages 12
Under The Hood: Page Initialization in jQuery Mobile 15
Page Hide and Show Events 17
Dialogs 20
Navigation and History 20
Transitions 22
Under The Hood: Animations in a jQuery Mobile Application 23
3. Page Elements . . . . . . .. . . . 25
Under The Hood: jQuery Plug-ins and Widgets 25
List Views 26
Basic List View 26
Advanced List Views 29
Under The Hood: Updating a List View 39
Toolbars 39
Navigation Bars 39
Positioning the Header and Footer 43
Buttons 44
Button Control Groups 46
Button Icons 47
Form Elements 49
Accessing Form Elements with JavaScript 49
Checkboxes and Radio Buttons 50
Flip Toggle 52
Input Fields and Textareas 53
Search Fields 54
Select Menus 55
Sliders 59
Layout Grids 61
4. Theming jQuery Mobile . . . . . . . . . . 65
Themes and Swatches 65
Under The Hood: Customizing a Swatch 74
Theming List View Elements 78
5. jQuery Mobile API . . . . . . . . . 79
jQuery Mobile Methods 79
changePage 79
pageLoading 80
silentScroll 80
addResolutionBreakpoints 80
Events 81
Touch Events 81
Initialization Events 83
Page Hide and Show Events 84
Scroll Events 85
Orientation Change Events 85
Responsive Layout API 85
CSS Selectors 85
Configuring jQuery Mobile 88
Available Options 88
Changing an Option via mobileinit 89
Under The Hood: Namespacing Data Attributes 90
6. jQuery Mobile in Action . . . . . . . 93
Application Pages 93
Initializing the Application 97
The initMainPage Method 97
The initSettings Method 102
The initDetailPage Method 103
Error Dialog 103
jqmTweet Take One 104
Improving the Interface 106
CSS Tweaks 106
Interaction Tweaks 106
Overall Approach 111
●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●
●❂●
═════● ●═════
