www.it-ebooks.info
jQuery Mobile Web Development Essentials
Learn to use the touch-optimized, cross-device, cross-platform jQM web framework for smartphones and tablets
Raymond Camden Andy Matthews
BIRMINGHAM - MUMBAI
www.it-ebooks.info
jQuery Mobile Web Development Essentials 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 authors, 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: May 2012
Production Reference: 1200412
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84951-726-3 www.packtpub.com
Cover Image by Faiz Fattohi (
[email protected])
www.it-ebooks.info
Credits Authors
Project Coordinator
Raymond Camden
Sai Gamare
Andy Matthews
Proofreader Linda Morris
Reviewers Md Mahmud Ahsan Shameemah Kurzawa M. Ali Qureshi
Monica Ajmera Mehta Production Coordinators
Joe Wu
Nilesh R. Mohite
Acquisition Editor
Prachali Bhiwandkar
Usha Iyer Lead Technical Editor Dayan Hyames
Indexer
Cover Work Nilesh R. Mohite
Technical Editor Sonali Tharwani
www.it-ebooks.info
About the Authors Raymond Camden is a Developer Evangelist for Adobe focusing on web
standards and mobile development. He is a contributing author to numerous technical books including the best selling ColdFusion Web Application Construction Kit, published by Adobe Press. He has spoken at conferences around the world and maintains many popular ColdFusion community websites. He is the manager of www.RIAForge.org, www.CFLib.org, and writes at his blog www.raymondcamden.com. Raymond is happily married and a proud father to three kids and is somewhat of a Star Wars nut. I'd like to thank everyone on the jQuery and jQuery Mobile teams for making tools that have changed my life. Without your hard work and dedication, the web would be less awesome. Thank you Andy, for coming on board and helping to make this book better.
www.it-ebooks.info
Andy Matthews has been working as a web and application developer for 13 years, with an experience in a wide range of industries, and has a skill set which includes graphic design, programming, business strategy and planning, and marketing. Throughout his career he has been privileged to work on projects which interfaced with industry giants such as Craigslist, written code that allowed Enterprise level sales teams to quickly and efficiently build presentations for their clients. He stays up-to-date with current trends in the marketplace by helping previous employers transition to newer, more effective, coding habits and standards. He is a frequent speaker at conferences around the country. He has also developed software for the open source community, and he currently works for a social networking startup Goba.mobi in Nashville, TN. I'd like to thank my wife Jaime, and my children Noelle, Evan, and Mason for their patience and grace in letting me pursue my passion. Most of all, thank you God for giving me the desire to learn, the ability to pick things up quickly, and the perseverance to apply the knowledge I've gained throughout the years.
www.it-ebooks.info
About the Reviewers Md Mahmud Ahsan has been developing and leading some medium to large
web applications for the past six years. He has worked with a number of PHP frameworks (Zend, CodeIgniter) and generally likes working with an MVC design pattern. His experience ranges from developing web applications from scratch, as well as modifying and adding functionality to existing custom in-house systems, open source applications, and commercial applications. He graduated in Computer Science and Engineering, and is a PHP5 Zend Certified Engineer. He is also an expert in iPhone applications development and has in depth working knowledge in Objective C, C, C++, Cocos2D, Box2D, and Xcode. Apart from his full time job, he maintains a blog at http://thinkdiff.net. He lives in Bangladesh with his wife Jinat Jahan. Currently, he is self employed and has been developing iPhone and iPad applications, which he publishes through his own site http://ithinkdiff.net. Besides this, he is a part time freelancer and works on LAMP based web applications development. He was a technical reviewer for the following books published by Packt Publishing: •
Zend Framework 1.8 Web Application Development Book
•
PHP jQuery Cookbook
•
jQuery UI themes
•
Android 3.0 Application Development Cookbook I'm very grateful to my father who brought a computer for me in 2001, since then I have loved programming and work in various technologies.
www.it-ebooks.info
Shameemah Kurzawa started programming when she was at high school. Being motivated to be a System Analyst, she pursued both undergraduate and postgraduate studies in Business Information Systems and Software Engineering respectively.
She has been working as a Web Developer/Analyst for the past six years; she has worked in the past for Australia's renowned broadcasting company SBS and has freelanced for her own company since 2010. Besides work she enjoys spending time with her family, traveling, and cooking. She likes to read and try new web technologies. She has previously reviewed jQuery UI themes and PHP jQuery Cookbook for Packt Publishing. I would like to thank my husband and the Packt team for their support and understanding in helping me review this book.
M. Ali Qureshi is based in Lahore, Pakistan. He has developed a comprehensive
understanding of web development processes having worked in the capacity of Web Designer, Frontend developer, PHP Developer, Flash ActionScript Developer, Software Engineer, and Project Manager in the last 12 years designing and developing creative, interactive and usable web solutions, that get high rankings in search engines and drive qualified traffic to websites, making them a successful technology investment. He has done a Masters in Economics and Computer Sciences. Running along Lahore canal early in the morning, watching good movies and listening to music, working out at the gym, reading books, discussing politics, and an occasional stroll in Lawrence Garden, Lahore are a few things that Ali mostly enjoys. When not working, he spends his time blogging and exploring new technologies. Ali is an avid sports fan and likes watching Cricket, especially Pakistan and Australia which are his favorite teams.
www.it-ebooks.info
Joe Wu is a Senior PHP Web Developer and has more than four years of commercial experience to date. Joe is always enthusiastic about exploring new ideas, technologies and opportunities that arise. He has a wide range of skills, specializing primarily in PHP, CodeIgniter PHP Framework, MySQL, JQuery, HTML, and CSS. Joe's skills and experiences further extends out to various other technologies and tools such as Subversion, Microsoft CRM, SOAP, Bash Scripting, and Symfony PHP Framework. Joe is also a professional Badminton player, achieving the highest ranking of 59 in the world in singles and top ranking in Australasia in 2010. If you would like to get in touch with Joe to discuss any opportunities please do not hesitate to visit his personal website: http://www.joewu.net/.
www.it-ebooks.info
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? •
Fully searchable across every book published by Packt
•
Copy and paste, print and bookmark content
•
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.
www.it-ebooks.info
www.it-ebooks.info
To my wife Jeanne. Thank you for always being there. Thank you for making me feel like I could do this. Thank you being strong when I'm weak. Thank you for everything.
www.it-ebooks.info
-Raymond Camden
www.it-ebooks.info
Table of Contents Preface 1 Chapter 1: Preparing your First jQuery Mobile Project 11 Important preliminary points 11 Building an HTML page 11 Getting jQuery Mobile 13 Implementing jQuery Mobile 14 Working with data attributes 16 Summary 18
Chapter 2: Working with jQuery Mobile Pages
19
Important preliminary points 19 Adding multiple pages to one file 20 jQuery Mobile, links, and you 22 Working with multiple files 23 jQuery Mobile and URLs 26 Additional customization 26 Page titles 27 Prefetching content 28 Changing page transitions 28 Summary 29
Chapter 3: Enhancing Pages with Headers, Footers, and Toolbars 31 Important preliminary points Adding headers Icon sneak peak Working with back buttons Working with footers Creating fixed and full screen headers and footers Full screen positioning Working with navigation bars Persisting navigation bar footers across multiple pages
www.it-ebooks.info
31 31 34 34 36 38 39 40 42
Table of Contents
Summary 44
Chapter 4: Working with Lists
45
Creating lists 45 Working with list feature 50 51 Creating Inset lists Creating list dividers 52 Creating lists with count bubbles 53 54 Using thumbnails and icons Creating Split Button lists 56 57 Using a search filter Summary 58
Chapter 5: Getting Practical – Building a Simple Hotel Mobile Site 59 Welcome to Hotel Camden The home page Finding the hotel Listing the hotel rooms Contacting the hotel Summary
Chapter 6: Working with Forms and jQuery Mobile Before you begin What jQuery Mobile does with forms Working with radio buttons and checkboxes Working with select menus Search, toggle, and slider fields Search fields Flip toggle fields Slider fields
59 60 62 65 68 70
71 71 72 76 79 82
83 83 84
Using native form controls 85 Working with "mini" fields 85 Summary 86
Chapter 7: Creating Modal Dialogs, Grids, and Collapsible Blocks 87 Creating dialogs Laying out content with grids Working with collapsible content Summary
Chapter 8: jQuery Mobile Configuration, Utilities, and JavaScript methods Configuring jQuery Mobile Using jQuery Mobile utilities Page methods and utilities
[ ii ]
www.it-ebooks.info
87 91 97 102
103 103 109 109
Table of Contents
Path and URL related utilities 111 Miscellaneous utilities 115 jQuery widget and form utilities 115 Summary 119
Chapter 9: Working with Events
121
Chapter 10: Moving further with the Notekeeper Mobile Application
137
Working with physical events 121 Handling page events 129 133 What about $(document).ready? Creating a real example 133 Summary 136
What is a mobile application? Designing your first mobile application Listing out the requirements Building your wireframes Designing the add note wireframe Display notes wireframe View note/delete button wireframe
Writing the HTML Adding functionality with JavaScript Storing Notekeeper data Using localStorage
137 138 138
139 139 140 140
141 143 146
146
Effective use of boilerplates Building the Add Note feature
148 148
Dynamically adding notes to our listview Viewing a note
153 154
Adding bindings Collecting and storing the data Building the Display Notes feature
Using the Live function
148 150 151
154
Dynamically creating a new page 155 Deleting a note 157 Summary 158
Chapter 11: Enhancing jQuery Mobile
159
What's possible? 159 The visual building blocks of jQuery Mobile 160 Border-radius 161 Applying drop shadows 162 Using text-shadow Using box-shadow CSS gradients
163 164 165
[ iii ]
www.it-ebooks.info
Table of Contents
The basics of jQuery Mobile theming Bars (.ui-bar-?) Content blocks (.ui-body-?) Buttons and listviews (.ui-btn-?) Mixing and matching swatches Site-wide active state Default icons Creating and using a custom theme What's ThemeRoller?
168 169 169 170 170 171 172 172 173
Using ThemeRoller 173 Preview 175
Colors 175 Inspector 176 Tools 177
Creating a theme for Notekeeper
178
Creating and using custom icons CSS Sprites Designing your first icon High and low resolution Updating the Notekeeper app Adding our custom theme Adding our custom icon Summary
183 183 185 187 188 188 189 190
Exporting your theme
181
Chapter 12: Creating Native Applications
191
Chapter 13: Becoming an expert - Build an RSS Reader application
205
HTML as a native application Working with PhoneGap Adding PhoneGap functionality Summary
191 192 199 203
RSS Reader – the application 205 Creating the RSS Reader Application 208 The displayFeeds function 210 Storing our feeds 211 212 Adding an RSS feed Viewing a feed 214 Creating the entry view 216 Going further 218 Summary 218
Index 219 [ iv ]
www.it-ebooks.info
Preface What is jQuery Mobile?
On August 11, 2010, nearly two years ago, John Resig (creator of jQuery) announced the jQuery Mobile project. While focused on the UI framework, it was also a recognition of jQuery itself as a tool for mobile sites and that work would be done to the core framework itself, to make it work better on devices. Release after release, the jQuery Mobile project evolved into a powerful framework encompassing more platforms, more features, and better performance with every update. But what do we mean when we say a UI framework? What does it mean for developers and designers? jQuery Mobile provides a way to turn regular HTML (and CSS) into mobile friendly sites. As you will see soon in the first chapter, you can take a regular HTML page, add in the required bits for jQuery Mobile (essentially five lines of HTML), and find your page transformed into a mobile-friendly version instantly. Unlike other frameworks, jQuery Mobile is focused on HTML. In fact, for a framework tied to jQuery, you can do a heck of a lot of work without writing one line of JavaScript. It's a powerful, practical way of creating mobile websites that any existing HTML developer can pick up and adapt within a few hours. Compare this to other frameworks, such as Sencha Touch. Sencha Touch is also a powerful framework, but its approach is radically different, using JavaScript to help define and layout pages. jQuery Mobile is much friendlier to people who are more familiar with HTML, as opposed to JavaScript. jQuery Mobile is touch friendly, which will make sense to anyone who has used a smart phone and struggled to click the exact right spot on a website with tiny text and hard to spot links. It will make sense to anyone who accidentally clicked on a Reset button instead of Submit. jQuery Mobile will enhance your content to help solve these issues. Regular buttons become large, fat, and easy to hit buttons. Links can be turned into list based navigation systems. Content can be split into virtual pages with smooth transitions. You will be surprised just how jQuery Mobile works without writing much code at all.
www.it-ebooks.info
Preface
jQuery Mobile has some very big sponsors. They include Nokia, Blackberry, Adobe, and other large companies. These companies have put in money, hardware, and developer resources to help ensure the success of the project:
What's the cost?
Ah, the million dollar question. Luckily this one is easy to answer: nothing. jQuery Mobile, like jQuery itself, is completely free to use for any purpose. Not only that, it's completely open source. Don't like how something works? You can change it. Want something not supported by the framework? You can add it. To be fair, digging deep into the code base is probably something most folks will not be comfortable doing. However, the fact that you can if you need to, and the fact that other people can, leads to a product that will be open to development by the community at large. [2]
www.it-ebooks.info
Preface
What do you need to know?
Finally, along with not paying a dime to get, and work with, jQuery Mobile, the best thing is that you probably already have all the skills necessary to work with the framework. As you will see in the upcoming chapters, jQuery Mobile is an HTML based framework. If you know HTML, even just simple HTML, you can use the jQuery Mobile framework. Knowledge of CSS and JavaScript is a plus, but not entirely required. (While jQuery Mobile uses a lot of CSS and JavaScript behind the scenes, you don't actually have to write any of this yourself!)
What about native apps?
jQuery Mobile does not create native applications. You'll see later in the book how you can combine jQuery Mobile with wrapper technologies such as PhoneGap to create native apps but, in general, jQuery Mobile is for building websites. The question on whether to develop a website or a mobile app is not something this book can answer. You need to look at your business needs and see what will satisfy them. Because we are not building mobile apps themselves, you do not have to worry about setting up any accounts with Google or Apple, or paying any fees for the marketplace. Any user with a mobile device that includes a browser will be able to view your mobile-optimized sites. Again – if you want to develop true mobile apps with jQuery Mobile, it's definitely an option.
Help!
While we'd like to think that this book will cover every single possible topic you would need for all your jQuery Mobile needs, most likely there will be things we can't cover. If you need help, there are a couple of places you can try. First, the jQuery Mobile docs (http://jquerymobile.com/demos/1.0/), cover syntax, features, and development in general, much like this book. While the material may cover some of the same ground, if you find something confusing here, try the official docs. Sometimes a second explanation can really help. Second, the jQuery Mobile forum (http://forum.jquery.com/jquery-mobile), is an open ended discussion list for jQuery Mobile topics. This is the perfect place to ask questions. Also, it's a good place to learn about problems other people are having. You may even be able to help them. One of the best ways to learn a new topic is by helping others.
[3]
www.it-ebooks.info
Preface
Examples
Want to see jQuery Mobile in action? There's a site for that. JQM Gallery (http://www.jqmgallery.com/), is a collection of sites submitted by users, built using jQuery Mobile. Not surprisingly, this website too uses jQuery Mobile, which makes it yet another way to sample jQuery Mobile:
[4]
www.it-ebooks.info
Preface
What this book covers
Chapter 1, Preparing your First jQuery Mobile Project, works you through your first jQuery Mobile project. It details what must be added to your project's directory and source code. Chapter 2, Working with jQuery Mobile Pages, continues the work in the previous chapter and introduces the concept of jQuery Mobile pages. Chapter 3, Enhancing Pages with Headers, Footers, and Toolbars, explains how to enhance your pages with nicely formatted headers and footers. Chapter 4, Working with Lists, describes how to create jQuery Mobile list views. These are mobile optimized lists which are especially great for navigation. Chapter 5, Getting Practical – Building a Simple Hotel Mobile Site, walks you through creating your first "real" (albeit simple) jQuery Mobile application. Chapter 6, Working with Forms and jQuery Mobile, explains the process of using jQuery Mobile optimized forms. Layout and special form features are covered in detail. Chapter 7, Creating Modal Dialogs, Grids, and Collapsible Blocks, walks you through special jQuery Mobile user interface items for creating grid based layouts, dialogs, and collapsible content areas. Chapter 8, jQuery Mobile Configuration, Utilities, and JavaScript methods, describes the various JavaScript-based utilities your code may have need of. Chapter 9, Working with Events, details the events thrown by various jQuery Mobile-related features, like pages loading and unloading. Chapter 10, Moving Further with the Notekeeper Mobile Application, walks you through the process of creating another website, an HTML5-enhanced note taking application. Chapter 11, Enhancing jQuery Mobile, demonstrates how to change the default appearance of your jQuery Mobile sites by selecting and creating unique themes. Chapter 12, Creating Native Applications, takes what you've learned previously and shows how to use the open source PhoneGap project to create real native applications. Chapter 13, Becoming an expert Build an RSS Reader application, expands upon the previous chapter by creating an application that lets you add and read RSS feeds on mobile devices.
[5]
www.it-ebooks.info
Preface
What you need for this book
Nothing! Technically you need a computer, and a browser as well, but jQuery Mobile is built with HTML, CSS, and JavaScript. No IDE (Integrated Development Environment) or special tool will be required to work with the framework. If you've got any editor on your system (and all operating systems include a free editor of some sort), you can develop with jQuery Mobile. There are good IDEs out there that can help you be more productive. For example, Adobe Dreamweaver CS 5.5 includes native support for jQuery Mobile with code assist and device previews:
At the end of the day, you can develop with jQuery Mobile for free. It's zero cost to you to download, develop, and publish jQuery Mobile sites.
Who this book is for
This book is for anyone looking to embrace mobile development and expand their skill set beyond the desktop.
[6]
www.it-ebooks.info
Preface
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning. Code words in text are shown as follows: "Notice the new data-title tag added to the div tag." A block of code is set as follows: Multi Page Example
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Imagine our Megacorp page. It's got three pages, but the Products page is a separate HTML file." Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply send an e-mail to
[email protected], and mention the book title through the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
[7]
www.it-ebooks.info
Preface
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
This book contains many code samples. You are not expected to type them in. You should not type them all in. Rather, you should download them from the public Github repository setup for the book: https://github.com/cfjedimaster/ jQuery-Mobile-Book. The Github repository will be updated as typos and other mistakes are found in the book. Therefore, it is possible the code may not match exactly the text in the book. If you are not familiar with Github, then simply click the Downloads tab and then either Download as zip or Download as tar.gz to quickly get an archived collection of all the files. You should extract these files onto a local web server. If you do not have one installed, we recommend installing Apache (http://httpd.apache.org/). Apache works on all platforms, is free, and is typically easy to install. Once extracted, you can edit these files, view them in your browser, or copy them as a starting point for your own projects. You can also download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub. com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
[8]
www.it-ebooks.info
Preface
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at
[email protected] with a link to the suspected pirated material. We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at
[email protected] if you are having a problem with any aspect of the book, and we will do our best to address it.
[9]
www.it-ebooks.info
www.it-ebooks.info
Preparing your First jQuery Mobile Project You know what jQuery Mobile is, the history of it as well as its features and goals. Now we're actually going to build our first jQuery Mobile website (well, web page) and see how easy it is to use. In this chapter we will: • • • •
Create a simple HTML page Add jQuery Mobile to the page Make use of custom data attributes (data-*) Update the HTML to make use of the data attributes jQuery Mobile recognizes
Important preliminary points
You can find all the source code for this chapter in the c1 folder of the ZIP file you downloaded from Github. If you wish to type everything out by hand, we recommend you use similar file names.
Building an HTML page
Let's begin with a simple web page that is not mobile optimized. To be clear, we aren't saying it can't be used on a mobile device. Not at all. But it may not be usable on a mobile device. It may be hard to read (text too small). It may be too wide. It may use forms that don't work well on a touch screen. We don't know what kinds of problems will have at all until we start testing. (And we've all done testing of our websites on mobile devices to see how well they work, right?)
www.it-ebooks.info
Preparing your First jQuery Mobile Project
Lets have a look at Listing 1-1: Listing 1-1: test1.html First Mobile Example Welcome
Welcome to our first mobile web site. It's going to be the best site you've ever seen. Once we get some content. And a business plan. But the hard part is done!
Copyright Megacorp © 2012
As we said, nothing too complex, right? Let's take a quick look at this in the browser:
You can also download the example code files for all Packt books you have purchased from your account at http:// www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
[ 12 ]
www.it-ebooks.info
Chapter 1
Not so bad, right? But let's take a look at the same page in a mobile simulator:
Wow, that's pretty tiny. You've probably seen web pages like this before on your mobile device. You can, of course, typically use pinch and zoom or double click actions to increase the size of the text. But it would be preferable to have the page render immediately in a mobile friendly view. This is where jQuery Mobile enters.
Getting jQuery Mobile
In the preface we talked about how jQuery Mobile is "just" a set of files. That isn't said to minimize the amount of work done to create those files, or how powerful they are, but to emphasize that using jQuery Mobile means you don't have to install any special tools or server. You can download the files and simply include them in your page. And if that's too much work, you have an even simpler solution. jQuery Mobile's files are hosted on a Content Delivery Network (CDN). This is a resource hosted by them and guaranteed (as much as anything like this can be) to be online and available. Multiple sites are already using these CDN hosted files. That means when your users hit your site they will already have the resources in their cache. For this book we will be making use of the CDN hosted files, but just for this first example we'll download and extract the bits. I recommend doing this anyway for those times when you're on an airplane and wanting to whip up a quick mobile site.
[ 13 ]
www.it-ebooks.info
Preparing your First jQuery Mobile Project
To grab the bits, visit http://jquerymobile.com/download. There are a few options here but you want the ZIP file option. Go ahead and download that ZIP file and extract it. (The ZIP file you downloaded earlier from Github has a copy already.) The following screenshot demonstrates what you should see after extracting the files from the ZIP file:
Important note: At the time this book was written, jQuery Mobile was preparing for the release of Version 1.1. The released version was 1.0.1. But with 1.1 so close to release, that version is in use. Obviously, by the time you read this book a later version may be released. The file names you see listed in the previous screenshot are version specific, so keep in mind they may look a bit different for you.
Notice the ZIP file contains a CSS and JavaScript file for jQuery Mobile, as well as a minified version of both. You will typically want to use the minified version in your production apps and the regular version while developing. The images folder has 6 images used by the CSS when generating mobile optimized pages. So, to be clear, the entire framework, and all the features we will be talking about over the rest of the book, will consist of a framework of 8 files. Of course, you also need to include the jQuery library. You can download that separately at www.jquery.com.
Implementing jQuery Mobile
Ok, we've got the bits, how do we use them? Adding jQuery Mobile support to a site requires the following three steps at a minimum: 1. First add the HTML 5 doctype to the page: . This is used to help inform the browser about the type of content it will be dealing with.
[ 14 ]
www.it-ebooks.info
Chapter 1
2. Add a viewport metatag:
