www.it-ebooks.info jQuery Mobile Web Development Essentials Second Edition Build mobile-optimized websites using the simple, practical, and powerful jQuery-based framework Raymond Camden Andy Matthews BIRMINGHAM - MUMBAI www.it-ebooks.info jQuery Mobile Web Development Essentials Second Edition Copyright © 2013 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 Second Edition: September 2013 Production Reference: 1190913 Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 978-1-78216-789-1 www.packtpub.com Cover Image by Suresh Mogre (suresh.mogre.99@gmail.com) www.it-ebooks.info Credits Authors Project Coordinator Raymond Camden Apeksha Chitnis Andy Matthews Proofreader Faye Coulman Reviewers Matt Gifford Indexer Eliecer Daza Parra Mariammal Chettiyar Olivier Pons Production Coordinator Acquisition Editor Melwyn D'sa Usha Iyer Lead Technical Editor Sweny M Sukumaran Cover Work Melwyn D'sa Technical Editors Dennis John Gaurav Thingalaya www.it-ebooks.info About the Authors Raymond Camden is a Senior Developer Evangelist for Adobe His work focuses on web standards, mobile development, and ColdFusion He's a published author, and presents at conferences and user groups on a variety of topics Raymond can be reached at his blog at www.raymondcamden.com, followed on Twitter (@cfjedimaster), or contacted via e-mail at raymondcamden@gmail.com As always, I dedicate this book to the one person who made this all possible, my wife Jeanne Thank you for believing in me and being strong when I am not I will love you always 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 Andy Matthews has been working as a web and application developer for over 16 years, with experience in a wide range of industries, and a skillset that includes UI/UX, graphic design, and programming He is the co-author of the book jQuery Mobile Web Development Essentials, Packt Publishing, and writes for online publications such as NetTuts and NET Magazine He is a frequent speaker at conferences around the country, and he has developed software for the open source community including several of the most popular jQuery Mobile projects on the Web He blogs at andyMatthews.net, tweets at @commadelimited, and lives in Nashville, TN, with his wife and four children Thanks to my wife and children who tolerate my time spent learning and writing Thanks to Packt Publishing for publishing this book Thanks to the jQuery Mobile team for creating such a great and easy-to-use open source project www.it-ebooks.info About the Reviewers Matt Gifford is an RIA developer from Cambridge, England, who specializes in ColdFusion, web application, and mobile development With over 10 years of industry experience across various sectors Matt is the owner of a development consultancy firm monkehWorks Ltd (www.monkehworks.com) He is a regular presenter at national and international conferences, and also contributes articles and tutorials for leading international industry magazines as well as publishes them on his blog at: http://www.mattgifford.co.uk As an Adobe Community Professional, Matt is an advocate of community resources and industry-wide knowledge sharing, with a focus on encouraging the next generation of industry professionals Matt is the author of Object-Oriented Programming in ColdFusion and PhoneGap Mobile Application Development Cookbook (both by Packt Publishing) as well as numerous open source applications, including the popular monkehTweets Twitter API wrapper You can reach Matt on Twitter via @coldfumonkeh or through his blog My eternal thanks always go to my constantly supportive family Big thanks also go to Ray and Andy for inviting me to review their work It has been a pleasure working with them, as always www.it-ebooks.info Eliecer Daza Parra has been a web developer since 2005 He has got ample experience in Java, Python, PHP, jQuery, and jQuery Mobile Elicer has an experience of more than years as a Java developer He has been a software developer for Information Management and Customer Relationship Management (CMR) for health promoting enterprises (EPS), public transportation, and education companies in the private and public sectors He has been working as a Python developer since more than years, working with responsive websites Among the main areas of his interest are the development of Linux, Python, Android, and Google Services He has a huge interest in nurturing blog spaces about Linux administration and programming My heartfelt appreciation to God, my beloved mother and friend, my family, and July Olivier Pons is a developer who's been building websites since 1997 He's a teacher at Ingésup (École supérieure d'ingénierie informatique), the University of Sciences (IUT) of Aix-en-Provence, France where he teaches Linux, Apache HTTP server, PHP, jQuery/jQuery Mobile, advanced website optimization, and advanced VIM techniques He has already written some technical reviews, including the Packlib book Ext JS First Look In 2011, he left a full-time job as a Delphi and PHP developer to concentrate on his own company, HQF Development (http://hqf fr) He currently runs a number of websites, including http://www.livrepizzas fr, http://www.papdevis.fr, and http://olivierpons.fr—his own web development blog He currently works as a consultant, project manager, and senior developer 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 service@packtpub.com 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 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 Customized downloads 14 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 25 Additional customization 26 Page titles 26 Prefetching content 26 Changing page transitions 27 Summary 28 Chapter 3: Enhancing Pages with Headers, Footers, and Toolbars 29 Important preliminary points Adding headers Icon sneak peak Working with back buttons Working with footers www.it-ebooks.info 29 29 31 31 33 Becoming an Expert – Building an RSS Reader Application So how we actually get the feed? Google has a cool service called the Feed API (https://developers.google.com/feed/) It lets us use Google to handle fetching in the XML of an RSS feed and converting it to JSON JavaScript can work with XML, but JSON is far easier since it becomes regular, simple JavaScript objects We've got a bit of error handling, but if everything works well, we simply cache the result The final bit is a call to displayFeed: Code 13-9: displayFeed function displayFeed(url) { var entries = feedCache[url]; var s = ""; for(var i=0; i