master mobile web apps with jquery mobile (fourth of...2 a quick tutorial 13 ... 69 adding navbars...

Download Master Mobile Web Apps with jQuery Mobile (Fourth   of...2 A Quick Tutorial 13 ... 69 Adding Navbars 70 Highlighting Items in Navbars 71 ... Master Mobile Web Apps with jQuery Mobile

Post on 06-Feb-2018




1 download

Embed Size (px)


  • Matt Doyle

    Elated Books

    Master Mobile Web Apps with jQuery Mobile

    Fourth Edition

    Quickly learn to create great

    mobile web apps!


  • Master Mobile Web Apps with jQuery Mobile

    Fourth Edition

    Matt Doyle

    Elated Communications


  • Master Mobile Web Apps with jQuery Mobile (Fourth Edition)by Matt Doyle

    Published byElated CommunicationsPO Box 3313RobertsonNSW 2577Australia

    Copyright 2011-14 by Elated Communications, New South Wales, Australia.

    ISBN: 978-0-9873115-3-5

    Publishing History:

    August 2011: First Edition.December 2011: Second Edition.October 2012: Third Edition.March 2014:

    Fourth 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. 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 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 (Fourth Edition) ii


  • About the AuthorMatt 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 and SitePoint on a variety of topics, including PHP, CSS, JavaScript and, of course, jQuery Mobile.

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) iii

  • AcknowledgementsSeveral people have helped tremendously with this book. First of all, my wife Cat (, who has done a fantastic job helping with the books production and marketing. Secondly, Todd Parker and other members of the jQuery Mobile team (, who have been a great help with getting this book off the ground. Thirdly, Simon Meek (, who gave me a lot of useful ideas and feedback with the book, and who also designed the books cover.

    Last, but certainly not least, Id like to thank everyone who purchased the previous editions of this book, and made it such a great success. Your support and feedback have made it all worthwhile, and have made this fourth edition possible. So thank you!

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) iv

  • Table of ContentsPreface xxi

    Who This Book Is For xxi

    Whats In the Book xxi

    The Code Zip File xxii

    The Book Companion Site xxiii

    Whats New in the Fourth Edition xxiii

    Spread the Word xxvi

    Part I: Getting Started 11 Introducing jQuery Mobile 2

    Mobile Web Apps Explained 3

    What Is jQuery Mobile? 5

    Creating Native Apps with jQuery Mobile 7

    Supported Mobile Platforms 7

    jQuery vs. jQuery Mobile 9

    The Current State of Play 9

    Installing jQuery Mobile 10

    Summary 11

    2 A Quick Tutorial 13

    Creating the Home Page 14

    Creating the Products Page 19

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) v

  • Creating the Contact Form 22

    Creating the Contact Form Handler 25

    Testing the Website 28

    Summary 29

    Part II: jQuery Mobile Essentials 313 Creating Pages in jQuery Mobile 32

    Pages in jQuery Mobile 33

    A Basic Page Template 33

    Creating Multi-Page Documents 36

    Multi-Page vs. Separate Pages 38

    Updating the Title Bar 39

    Containers Are Optional 40

    Linking Back 41

    Creating Page Transitions 42

    Summary 46

    4 Adding Buttons 48

    Turning Links and button Elements into Buttons 49

    Styling Buttons 49

    Adding Button Icons 51

    Positioning Icons 51

    Styling Icons 52

    Making Your Own Icons 53

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) vi

  • Visually Grouping Buttons 55

    Creating Input Buttons 57

    Summary 60

    5 Working with Toolbars 62

    Creating Header Bars 62

    Adding Buttons to Headers 64

    Adding a Back Button to the Header 65

    Creating Footer Bars 68

    Adding Buttons to Footers 69

    Adding Navbars 70

    Highlighting Items in Navbars 71

    Adding More Than Five Links to Navbars 72

    Adding Icons to Navbar Buttons 72

    Positioning Toolbars 73

    Inline Positioning 74

    Fixed Positioning 75

    Fullscreen Positioning 78

    Creating Persistent Toolbars 79

    Summary 84

    6 Adding Dialogs, Popups and Panels 86

    Dialogs Explained 87

    Creating a Dialog 88

    Closing Dialogs 90

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) vii

  • Some Example Dialogs 91

    Popups Explained 95

    Creating a Basic Popup 97

    Customizing Popups 97

    The Anatomy of a Popup 98

    Controlling the Popups Corners and Shadow 98

    Adding Padding to Popups 99

    Positioning Popups 99

    Adding Transition Effects to Popups 100

    Adding Close Buttons to Popups 101

    Creating Non-Dismissible Popups 101

    Adding Arrows to Popups 102

    Disabling Browser History Support 103

    Controlling Popups with JavaScript 103

    Opening and Closing Popups 104

    Setting Popup Options 104

    Repositioning Popups 108

    Working with Popup Events 108

    Some Example Popups 109

    Panels Explained 116

    Creating a Basic Panel 118

    Opening and Closing Panels 119

    Opening and Closing Panels using JavaScript 119

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) viii

  • Controlling Panel Closing 120

    Adding a Close Button 121

    Disabling Panel Animation 122

    Customizing Panels 122

    Setting a Panels Position 123

    Setting a Panels Display Mode 123

    Styling Panels 124

    Creating Fixed Panels 125

    Creating Responsive Panels 127

    Setting Panel Options via JavaScript 130

    Working with Panel Events 132

    Summary 133

    7 Creating Forms 135

    Regular Forms vs. jQuery Mobile Forms 136

    Ajax Form Submission 136

    Form Field Enhancements 136

    Additional Markup 138

    Hiding Field Labels Accessibly 138

    Globally Unique Field IDs 139

    Responsive Form Layout 139

    Creating a Basic Form in jQuery Mobile 140

    Adding Text, Password, File and Textarea Fields 143

    Adding HTML5 Inputs 145

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) ix

  • Adding Search Boxes 147

    Adding Range Sliders 148

    Adding Radio Buttons 152

    Adding Checkboxes 154

    Adding Flip Switches 155

    Creating a Flip Switch from a Checkbox 156

    Creating a Flip Switch from a select Element 157

    Adding Select Menus 158

    A Simple Select Menu 158

    Grouping Select Menus 159

    Using Custom Select Menus 161

    Custom Menus with Lots of Options 163

    Disabling Options 164

    Working with Placeholders 165

    Allowing Multiple Selections 167

    Creating Option Groups 168

    Creating Mini Form Elements 170

    Summary 172

    8 Adding Listviews 174

    Creating a Basic Listview 175

    Creating a List of Links 176

    Inset Lists 178

    Adding List Dividers 180

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) x

  • Formatting List Content 182

    Adding Count Bubbles 183

    Adding Thumbnails and Icons 184

    Split-Button Lists 187

    Filtering Listviews and Other Elements 189

    Changing the Filtering Algorithm 190

    Supplying Alternative Text for Filtering Items 194

    Creating Autocomplete Fields with the filterablebeforefilter Event 195

    Easy Autocompletion with data-filter-reveal 198

    Filtering Other Types of Elements 199

    Forms in Listviews 202

    Summary 203

    9 Formatting Page Content 205

    How jQuery Mobile Formats Content 206

    Responsive Web Design with jQuery Mobile 207

    Taking the Mobile-First Approach 208

    jQuery Mobiles Responsive Web Design Features 208

    Working with Layout Grids 209

    Two Column Grids 210

    Three, Four and Five Column Grids 210

    Multi-Row Grids 211

    Grids and Button Margins 212

    Responsive Grids 213

    Master Mobile Web Apps with jQuery Mobile (Fourth Edition) xi


View more >