Jquery Mobile Develop and Design Develop and Design Jquery Mobile Jquery
Total Page:16
File Type:pdf, Size:1020Kb
Designer-Developers are hot commodities today. But how do you build your development chops fast enough to join their ranks? With Peachpit’s Develop and Design series for visual learners. jQuery Mobile jQuery Mobile DEVELOP AND DESIGN DEVELOP AND DESIGN jQuery Mobile THE jQUERY MOBILE FRAMEWORK CHANGES THE WAY “Author Kris Hadlock covers the details of mobile applications are accessed and distributed on mobile the framework with a practical, enjoyable narrative that will quickly get you up to speed and tablet devices. This game-changing JavaScript library takes and ready to create something great!” existing webpages and converts them into touch-friendly web- Scott Jehl sites and applications, eliminating the need for web developers Lead Developer of jQuery Mobile and Web Designer and Developer with Filament Group to create native applications for multiple mobile platforms. Long-time developer and author Kris Hadlock applies his real- THIS BOOK INCLUDES: world, practical experience in this complete introduction to J Easy step-by-step instruction, ample creating working mobile sites using the jQuery Mobile frame- DEVELOP illustrations, and clear examples work. Kris teaches you step by step how to write the code to cre- ate mobile websites. Covering the latest version of the jQuery J Real-world techniques to build your Mobile framework, this hands-on book is full of code examples, skills which are also available for download from the book’s J Insight into best practices from a companion website at http://peachpit.com/jquerymobile. veteran Web expert AND J Emphasis on strategies for creating reliable code that will work on all of DESIGN today’s devices KRIS HADLOCK is the founder and lead developer-designer of Phoenix-based COMPANION WEBSITE: web design and application development firm Studio Sedition (www.studio- http://peachpit.com/jquerymobile sedition.com), and has worked with companies such as SPIN Magazine, IKEA, United Airlines, and JP Morgan Chase. His other books include The ActionScript facebook.com/PeachpitCreativeLearning Migration Guide and Ajax for Web Application Developers, and he has written for H adlock Peachpit.com, InformIT.com, IBM developerWorks, and .net magazine. @peachpit PEACHPIT PRESS USUS $54.99$44.99 CANADACANADA $57.99 $46.99 WWW.PEACHPIT.COM ISBN-13: 978-0-321-82041-9 ISBN-10: 0-321-82041-X 54499 BOOK LEVEL BEGINNER TO INTERMEDIATE CATEGORY WEB DEVELOPMENT Kris Hadlock COVERS jQUERY MOBILE FRAMEWOrk COVER DESIGN ArEN HOWELL STRAIGER 9 780321 820419 jQuery Mobile DEVELOP AND DESIGN Kris Hadlock jQuery Mobile: Develop and Design Kris Hadlock Peachpit Press 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at: www.peachpit.com To report errors, please send a note to: [email protected] Peachpit Press is a division of Pearson Education. Copyright © 2012 by Kris Hadlock Acquisitions Editor: Michael Nolan Project Editor: Rebecca Gulick Development Editor: Robyn G. Thomas Contributing Writer: Jay Blanchard Technical Reviewer: Jay Blanchard Production Coordinator: Myrna Vladic Compositor: David Van Ness Copyeditor: Gretchen Dykstra Proofreader: Patricia Pane Indexer: Valerie Haynes-Perry Cover Design: Aren Howell Straiger Interior Design: Mimi Heft Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, elec- tronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the pub- lisher. For information on getting permission for reprints and excerpts, contact [email protected]. Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identi- fied throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book. ISBN-13: 978-0-321-82041-9 ISBN-10: 0-321-82041-X 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America To my wife, Lisa, who carried our first child while I wrote this book. Only true love can withstand the amount of time that it takes to write a book while having a new baby. And to my son, Lucas, words cannot express the love I feel for you. ACKNOWLEDGMENTS There are many people I would like to thank for the opportunity and help they gave before, during, and after this book was being written: Neil Salkind, for helping me navigate the world of publishing and for his support while I was writing. Robyn Thomas for her patience. Jay Blanchard for stepping in when needed and provid- ing excellent technical reviews. Rebecca Gulick for helping to move things along. Michael Nolan for working out the details. All my customers, for understanding how busy I’ve been. And, of course, Peachpit for giving me the opportunity to write for you. ABOUT THE AUTHOR Kris Hadlock has been a web developer and designer since 1996, working on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, Canon, and Phoenix Children’s Hospital, to name a few. Kris is a featured columnist and writer for numerous websites and design magazines, including Peachpit.com, InformIT.com, IBM developerWorks (www.ibm.com/developerworks), and Practical Web Design magazine. His other books include Ajax for Web Applica- tion Developers and The ActionScript 3.0 Migration Guide. He is the founder and lead developer-designer of Studio Sedition (www.studiosedition.com), specializing in the fusion of form and function. IV JQUERY MOBILE CONTENTS Introducing the Future of Web Development ........................ x Supported jQuery Mobile Platforms ................................ xvi PART I THE FOUNDATION OF JQUERY MOBILE chapter 1 UndERSTAndING JQUERY . 4 Getting Started ........................................................ 6 jQuery Fundamentals .................................................. 7 Selecting HTML elements ............................................... 7 Managing events and functions ........................................ 8 Waiting for documents to be ready ................................... 11 Applying special effects ............................................... 12 Using Ajax ............................................................. 14 Wrapping Up .......................................................... 17 chapter 2 THE ROLE OF HTML5 . 18 Semantic HTML5 .................................................... 20 Creating an HTML5 template ........................................ 20 The viewport Meta Tag .............................................. 21 Understanding data- Attributes ..................................... 24 Wrapping Up ......................................................... 27 chapter 3 GETTING StArtED WITH JQUERY MOBILE . 28 How jQuery Mobile Works ........................................... 30 Adding the jQuery Mobile framework to your website ............... 30 Page and toolbar components ......................................... 32 Structuring mobile webpages ......................................... 34 Wrapping Up ......................................................... 37 CONTENTS V PART II UI COMPONENTS chapter 4 CREATING MultIPAGE WEBSITES . 40 Multipage Template .................................................. 42 Single-Page Template ................................................ 45 Hashtags and history .................................................. 45 Link Types ........................................................... 47 Preloading and Caching Pages . 52 Working with Page Transitions ...................................... 55 Customizing Loading Messages ...................................... 58 Wrapping Up ......................................................... 59 chapter 5 DIALOG WIndOWS And ButtONS . 60 Creating a Basic Dialog Window ..................................... 62 Working with Buttons ............................................... 69 Wrapping Up ......................................................... 73 chapter 6 WOrkING WITH TOOLBARS . 74 Toolbars .............................................................. 76 Header toolbars ....................................................... 76 Adding buttons ........................................................ 78 Footer toolbars ........................................................ 82 Positioning toolbars ................................................... 83 Creating Navigation Bars ............................................. 85 Wrapping Up ......................................................... 87 chapter 7 LAYOut OptIONS . 88 Grids .................................................................. 90 Grid columns ......................................................... 90 Grid rows .............................................................