Tài liệu jQuery Mobile Cookbook ppt

jQuery Mobile

Cookbook

Over 80 recipes with examples and practical tips to help

you quickly learn and develop cross-platform applications

with jQuery Mobile

Chetan K Jain

BIRMINGHAM - MUMBAI

jQuery Mobile Cookbook

Copyright © 2012 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or

transmitted in any form or by any means, without the prior written permission of the publisher,

except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the

information presented. However, the information contained in this book is sold without

warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers

and distributors will be held liable for any damages caused or alleged to be caused directly or

indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies

and products mentioned in this book by the appropriate use of capitals. However, Packt

Publishing cannot guarantee the accuracy of this information.

First published: November 2012

Production Reference: 1011112

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84951-722-5

www.packtpub.com

Cover Image by Abhishek Pandey ([email protected])

Credits

Author

Chetan K Jain

Reviewers

Shaun Dunne

Ankit Garg

Yousef Jadallah

Acquisition Editor

Usha Iyer

Lead Technical Editor

Arun Nadar

Technical Editors

Kirti Puajri

Lubna Shaikh

Project Coordinator

Vishal Bodwani

Proofreader

Aaron Nash

Maria Gould

Indexer

Hemangini Bari

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Author

Chetan K Jain loves to code, and has been writing code for over 16 years now. He is a

Senior Architect, and has worked on mobile technologies for over 4 years for Nokia. Since

then, he has moved on to work as a freelance consultant.

Chetan has significant experience in writing cross-platform mobile apps using jQuery Mobile,

HTML5, CSS3, JavaScript, Nodejs, and has also worked extensively on Qt. Prior to mobile

technologies, he has worked with Java technology and was also certified as an MCSD and

MCSE in his early days.

Chetan is an active contributor to open source development, and tries to help jQuery Mobile

development whenever he can. He regularly participates in developer forums, and was earlier

a top-ranked member and a "mad scientist" in the Nokia Qt Developer Forum.

Chetan was born in Bangalore and lives there with his wife Shwetha and son Tanmay.

The only time he ventured to live away from Bangalore was when he worked for over

4 years in the USA. His adventure didn't end there. He did a solo US cross country drive

in his two door coupe from the east coast to the west and back, driving alone for over

8000 plus miles in 16 days to experience and live life as he calls it. His travelogue can

be found at http://adventure.chetankjain.net.

Chetan has contributed and published over 15 books to Gutenberg as a volunteer.

He has also published four books on Jaina Literature and History written by his mother

Saraswathamma. He is a voracious reader, and his other interests include music,

movies, and travelling. Photography is his favorite hobby, and his clicks can be found at

http://www.facebook.com/chetankjainphotos/photos_stream.

Chetan can be reached at [email protected]. He also blogs at

http://dev.chetankjain.net.

Acknowledgement

First and foremost, my wife Shwetha and son Tanmay deserve full credit for the completion

of this book. This book was possible only because of their understanding, support, and

countless sacrifices. For days I would be unavailable, miss many family events, and yet they

continued to shower me with all their love and affection.

I thank my parents, Mahendra Kumar Jaini and Saraswathamma, for their love, support, and

for everything that I am today. I miss my father, but he is always there with me. My mother is

my muse, and I follow her footsteps now as an author.

I have a very supportive sister Suma Jain and nephew Poojith Jain who never fail to pep me

up. Ashwin Das, is family, and I enjoy bouncing all my ideas with him.

I thank my very close friend, Chidananda P, for all the help and support that he continues to

give me. I thank my childhood friend Anand Rao for always being there as my buddy and for

encouraging every project of mine.

My venture into mobile space has been very enjoyable. I thank all my former colleagues in

Nokia—Prahalad Rao for being a great manager and for directly supporting me at work when

I started this book, Sathish EV for all those initial reviews, Bhuwan Lodha for encouraging me

to blog, Ashwin Das, Karthik S, Prasad S, Pavanesh, and Krishna KN for all the suggestions

given. A very special thanks to Govind Ashrit, who actually urged me to write this book.

Thank you guys!

I also thank Shaun Dunne, Ankit Garg, and Yousef Jadallah for reviewing the technical content

of the book, and suggesting valuable changes and corrections.

Finally, I thank Packt Publishers and Usha Iyer for giving me this opportunity. My heartfelt

thanks to my editors Vishal Bodwani, Arun Nadar, Kirti Pujari, and Lubna Shaikh for tirelessly

reviewing my writing—multiple times, and giving me many valuable suggestions. You guys were

just great!

About the Reviewers

Shaun Dunne is a Developer working for SapientNitro in London, UK, and has been

coding since 2008 with a passion for JavaScript and all the front-end goodness. Working

for a large agency over the past few years, Shaun has had the chance to use various web

technologies to build large scale applications, and found a passion for getting other people

excited about the web.

Shaun has been hacking the mobile web for a couple of years, trying and testing all the tools

available and sharing his discoveries where he can, to ensure that others are aware of what is

available to use and in what situation.

When he's not working or spending some family time with his kids, he can usually be found

on the web, tinkering, blogging, and building things. He's currently working on his own book,

a self-published title about SASS and Friends called UberCSS, which is due to be released in

the winter of 2012.

Ankit Garg is a Front-End Developer at iGate Global Solutions. He likes to call himself a

Mobile Web Application Developer, a JavaScript Developer, and a blogger.

He likes reading, practicing, and blogging new things in the Mobile Web and JavaScript space.

If you would like to reach him, send him an e-mail to [email protected].

Yousef J. Jadallah is a software developer. He has good hands-on experience of web

and .NET technologies, such as ASP.NET, SQL Server, AJAX, ASP.NET AJAX, C#,VB.NET, jQuery

Mobile, HTML5, Web Services, and REST.

He spends most of his leisure time helping the communities on Microsoft technologies,

specifically in the Microsoft official forum. He is honored with the Microsoft Community

Contributor Award - 2011 (CCA).

He is from Jordan. You can contact with him through his blog:

http://weblogs.asp.net/yousefjadallah.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to

your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub

files available? You can upgrade to the eBook version at www.PacktPub.com and as a print

book customer, you are entitled to a discount on the eBook copy. Get in touch with us at

[email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up

for a range of free newsletters and receive exclusive discounts and offers on Packt books

and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book

library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

f Fully searchable across every book published by Packt

f Copy and paste, print and bookmark content

f On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

PacktLib today and view nine entirely free books. Simply use your login credentials for

immediate access.

To Shwetha and Tanmay, you fill my life with joy and wonder.

Table of Contents

Preface 1

Chapter 1: Get Rolling 7

Introduction 7

Writing your first jQuery Mobile application 9

Using JS Bin to create a simple application 12

Chapter 2: Pages and Dialogs 17

Introduction 17

Writing a single-page template application 18

Writing a multi-page template application 22

Prefetching pages for faster navigation 25

Using the DOM cache to improve performance 29

Custom styling a dialog 32

Using CSS to create a bouncing page transition 36

Using JS to create a slide and fade page transition 40

Using data-url to handle the login page navigation 44

Using History API to create a custom error pop up 48

Chapter 3: Toolbars 55

Introduction 55

Using fullscreen fixed toolbars 55

Using persistent navbars in toolbars 59

Customizing the header with multiple buttons 64

Adding a customized round button to the header 66

Adding an image to the header 69

Adding a customized back button 70

Adding a layout grid to the footer 73

ii

Table of Contents

Chapter 4: Buttons and Content Formatting 77

Introduction 77

Scripting a dynamically added button 78

Using a custom icon in a button 80

Adding a custom icon sprite 83

Replacing the default icon sprite 86

Using alternate icons in a collapsible 89

Creating a nested accordion 92

Creating a custom layout grid 94

Using XML content 96

Using JSON content 99

Chapter 5: Forms 105

Introduction 105

Native styling of form controls 105

Disabling text controls 108

Grouping radio buttons in a grid 110

Customizing a checkbox group 113

Creating dynamic flip switch and slider controls 117

Using options to auto-initialize a select menu 120

Validating forms 123

Submitting a form using POST 126

Fetching data using GET 130

Creating an accessible form 133

Chapter 6: List Views 137

Introduction 137

Using inset and non-inset lists 138

Creating a custom numbered list 140

Using a nested list 142

Using a read-only nested list 145

Formatting content in a list 147

Using a split button list 150

Using image icons 154

Creating a custom search filter 155

Modifying a list with JavaScript 159

Chapter 7: Configurations 163

Introduction 163

Configuring the active classes 163

Configuring ajaxEnabled 167

Configuring autoInitializePage 169

Configuring the default transitions 170