Nội dung

Quickly learn to create great mobile web apps! ,. Covers jQuery Mobile Beta 2 Master Mobile Web Apps with jQuery Mobile Matt Doyle Elated Books Master Mobile Web Apps with jQuery Mobile Matt Doyle Elated Communications Ltd www.elated.com Master Mobile Web Apps with jQuery Mobile by Matt Doyle Published by Elated Communications Ltd 212 Freshfield Road Brighton BN2 9YD United Kingdom www.elated.com Copyright © 2011 by Elated Communications Ltd, Brighton, UK. ISBN: 978-0-9569218-0-2 Publishing History: August 2011: First Edition. 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 — electronic, mechanical, photocopying, recording, or otherwise — without the prior written permission of the copyright owner and publisher. Elated and the Elated logo are trademarks of Elated Communications Ltd. All other trademarks mentioned in the book are the property of their respective owners. Rather than using a trademark symbol with every trademarked name in the book, the names are used merely in an editorial fashion and to the benefit of the trademark owner. No intention of infringement of the trademark is intended. Elated Communications Ltd is not associated with any product, service or vendor mentioned in this book. While they have taken care in the preparation of this book, the author and publisher make no expressed or implied warranty of any kind, and assume no responsibility for errors or omissions. The author and publisher assume no liability to any person or entity with respect to any loss or damage caused or alleged to be caused, directly or indirectly, by the information contained in this book, or by the information and software code associated with this book. Master Mobile Web Apps with jQuery Mobile ii About the Author Matt Doyle is an experienced technical author and coder who has written two well-received books on Photoshop and PHP. He has also written articles for Elated.com and SitePoint on a variety of topics, including PHP, CSS, JavaScript and, of course, jQuery Mobile. Master Mobile Web Apps with jQuery Mobile iii Table of Contents Preface xiv Who This Book Is For xiv What’s In the Book xiv The Code Zip File xv The Book Companion Site xv Part I: Getting Started 1 1 Introducing jQuery Mobile 2 Mobile Web Apps Explained 2 What Is jQuery Mobile? 5 Creating Native Apps with jQuery Mobile 6 Supported Mobile Platforms 7 jQuery vs. jQuery Mobile 8 The Current State of Play 9 Installing jQuery Mobile 9 Summary 2 A Quick Tutorial 11 12 Creating the Home Page 13 Creating the Products Page 16 Creating the Contact Form 20 Creating the Contact Form Handler 24 Master Mobile Web Apps with jQuery Mobile iv Summary 28 Part II: jQuery Mobile Essentials 13 3 Creating Pages in jQuery Mobile 14 Pages in jQuery Mobile 15 A Basic Page Template 15 Creating Multi-Page Documents 18 Multi-Page vs. Separate Pages 20 Updating the Title Bar 21 Containers Are Optional 22 Linking Back 23 Creating Page Transitions 23 Summary 27 4 Adding Buttons 28 Turning Links into Buttons 28 Creating Form Buttons 29 Adding Button Icons 30 Positioning Icons 32 Making Your Own Icons 32 Creating Custom HD (“Retina”) Icons 34 Visually Grouping Buttons 36 Summary 37 5 Working with Toolbars Master Mobile Web Apps with jQuery Mobile 38 v Creating Header Bars 38 Adding Buttons to Headers 40 Adding a Back Button to the Header 41 Rolling Your Own Headers 43 Creating Footer Bars Adding Buttons to Footers Adding Navbars 44 44 46 Highlighting Items in Navbars 47 Adding More Than Five Links to Navbars 48 Positioning Toolbars 48 Inline Positioning 49 Fixed Positioning 50 Fullscreen Positioning 51 Creating Persistent Footers 52 Summary 6 Adding Dialogs 56 58 Creating a Dialog 59 Dialogs and History 60 Closing Dialogs 61 Some Example Dialogs 62 Summary 66 7 Creating Forms Regular Forms vs. jQuery Mobile Forms Master Mobile Web Apps with jQuery Mobile 68 69 vi Ajax Form Submission 69 Form Field Enhancements 69 Additional Markup 70 Globally Unique Field IDs 71 Responsive Form Layout 71 Creating a Basic Form in jQuery Mobile 72 Adding Text, Password and Textarea Inputs 75 Adding Email, Phone, URL and Number Inputs 77 Adding Search Boxes 78 Adding Range Sliders 79 Adding Toggle Switches 81 Adding Radio Buttons 82 Adding Checkboxes 84 Adding Select Menus 85 A Simple Select Menu 86 Using Custom Select Menus 87 Custom Menus with Lots of Options 88 Disabling Options 90 Working with Placeholders 91 Allowing Multiple Selections 93 Creating Option Groups 94 Working with Degraded Form Inputs 96 Summary 97 Master Mobile Web Apps with jQuery Mobile vii 8 Adding List Views Creating a Basic List View 98 98 Creating a List of Links 100 Inset Lists 101 Adding List Dividers 103 Nested Lists 104 Formatting List Content 107 Adding Count Bubbles 108 Adding Thumbnails and Icons 110 Split-Button Lists 112 Adding Search Filtering 114 Forms in List Views 115 Summary 117 9 Formatting Page Content 118 How jQuery Mobile Formats Content 118 Working with Layout Grids 119 Two Column Grids 120 Three, Four and Five Column Grids 121 Multi-Row Grids 122 Creating Collapsible Content Blocks 123 Collapsing Blocks by Default 124 Nesting Collapsible Blocks 124 Creating Accordions 125 Master Mobile Web Apps with jQuery Mobile viii Summary Part III: Beyond the Basics 10 Theming jQuery Mobile Understanding Themes and Swatches 127 128 129 130 Themes 130 Swatches 130 The jQuery Mobile Default Swatches 132 How jQuery Mobile Assigns Swatches 134 Changing Swatch Assignments 136 Swatch Inheritance 137 Setting a Whole Page’s Swatch 138 Setting a Range Slider’s Swatches 140 Setting a Select Menu’s Swatches 141 Setting a List View’s Swatches 142 List Dividers 143 Count Bubbles 143 Split-Button Icons 145 Search Filter Boxes 146 Setting a Collapsible Block’s Swatches Editing Swatches 147 148 How to Edit a Swatch 148 Tips for Editing Swatches 151 Master Mobile Web Apps with jQuery Mobile ix