Sams Teach Yourself jQuery Mobile in 24 Hours

Phil Dutson is the lead front-end developer for ICON Health and Fitness. He has worked on projects and solutions for NordicTrack, ProForm, Freemotion, Sears, Costco, Sam’s Club, and others. He was an original team member of the iFit team that integrated Google Maps into personalized workout and playback. Phil co-founded and currently manages The E-Com DevBlog, a development blog focused on web development and solutions. To learn more visit http://dev.tonic1394.com.

Introduction 1
Key Features of This Book     1
How to Use This Book     2
How This Book Is Organized     2
Conventions Used in This Book.     3
Sample Code for This Book     3

Part I: Beginning jQuery Mobile

Hour 1: Getting to Know jQuery Mobile     7
Why You Should Use jQuery Mobile     7
Supported Devices     9
The Developer’s Arsenal     12
Summary     18
Q&A     18
Workshop     19

Hour 2: Working with HTML, CSS, and JavaScript     21
Building Content with HTML     21
Presenting CSS     27
Functioning with JavaScript     32
Summary     37
Q&A     38
Workshop     38

Hour 3: Using the jQuery Framework     41
Including jQuery in Your Site     42
Summary     58
Q&A     58
Workshop     59

Hour 4: Introduction to the jQuery Mobile Framework     61
Adding jQuery Mobile to Your Site.     61
Using Data Roles     63
Creating a Simple Page     65
Understanding the Mobile Initialization Event     69
Using the pageinit Event Instead of $(document).ready()     70
Summary     75
Q&A     76
Workshop     76

Hour 5: Building Your First Mobile Site     79
Structuring the Page     79
Adding a Header and Footer     82
Formatting Text Content.     84
Attaching an Image     86
Linking to a Second Page     89
Summary     91
Q&A     92
Workshop     92

Part II: Creating the User Interface

Hour 6: Knowing the Capabilities of Mobile Devices     97
Understanding Screen Resolutions and PPI     97
Additional Mobile Features    101
Looking at Mobile Operating Systems     105
Learning About Mobile Graded Browser Support     108
Summary     108
Q&A     109
Workshop     110

Hour 7: Learning About Page Layout     113
Using a Single Page Layout     113
Using a Multiple Page Layout     115
Aligning Content with a Grid     122
Conquering Collapsible Content     127
Summary     130
Q&A     130
Workshop     131

Hour 8: Tuning the Toolbars     133
Adding a Header Toolbar     133
Attaching a Navigation Toolbar     137
Adding a Footer Toolbar     139
Positioning the Toolbars     144
Adding Persistent Navigation     148
Summary     150
Q&A     150
Workshop     150

Hour 9: Designing Buttons     153
Beginning with Buttons     153
Overriding Button Defaults     156
Changing the Button Size     158
Adding Icons to Buttons     162
Summary     167
Q&A     167
Workshop     168

Hour 10: Formulating Your Forms     171
Getting Started with Forms     171
Enhancing Forms with jQuery Mobile     173
Extended Input Elements     181
Submitting Forms     186
Summary     188
Q&A     188
Workshop     188

Hour 11: Learning About Lists     191
Creating Standard and Inset Lists     191
Adding Extras to Lists     194
Using Icons and Thumbnails     196
Searching List Content     202
Using a List Within a Form     204
Summary     206
Q&A     206
Workshop     206

Hour 12: Handling Events     209
Events for Page Initialization     209
Brushing Up on Touch Events     215
Looking at Virtual Mouse Events     221
Adapting to the Orientation Event     223
Summary     225
Q&A     225
Workshop     226

Hour 13: Changing the Default Theme     229
Learning About the Theme Framework     229
Theming Site Components     236
Switching the Swatches     239
Summary     247
Q&A     248
Workshop     248

Part III: Customizing Your Content

Hour 14: Sprucing Up Your Design     253
Understanding Copyrights and Licensing     253
Finding Images     257
Functionality Enhancement with Plug-ins     261
Adding Custom Fonts     265
Summary     271
Q&A     271
Workshop     272

Hour 15: Responsive Site Layout     275
Appreciating Media Queries     275
Adjusting Layouts Based on Screen Size     276
Rotating Site Layout     286
Summary     289
Q&A     289
Workshop     290

Hour 16: Rolling Your Own Theme with ThemeRoller     293
Introduction to ThemeRoller     293
Creating a Theme with ThemeRoller     294
Working with a Custom Theme     302
Summary     305
Q&A     305
Workshop     306

Hour 17: Detecting Mobile Devices     309
Learning the Importance of Mobile Detection     309
Using the .htaccess File     310
Playing Device Detective with PHP     313
Using JavaScript as a Detection Method     316
Non-Detection Solutions     320
Summary     323
Q&A     323
Workshop     324

Part IV: Extending the Mobile Experience

Hour 18: Embedding Video Playback for Mobile     327
Understanding Video Playback     327
Embedding a Video with YouTube     328
Embedding a Video with Vimeo     334
Embedding Your Own Video     336
Exploring Other Video Embedding Services     340
Summary     341
Q&A     341
Workshop     341

Hour 19: Encoding Your Own Video for Mobile     343
Learning the Basics of Video Encoding     343
Comparing Video Codecs and Mobile Devices     349
Encoding Video for Mobile Playback     351
Delivering Video Content     357
Summary      359
Q&A     360
Workshop    360

Hour 20: Creating QR and Tag Codes     363
Delving into QR and Tag Codes     363
Scanning QR Codes     364
Rendering Quick Response Codes     365
Generating Microsoft Tag Codes     375
Summary     379
Q&A     379
Workshop     380

Hour 21: Learning to Minify Everything     381
Compressing Code     381
Using Gzip and Deflate     387
Compressing Images     389
Using mod_pagespeed on Your Apache Server     394
Summary     395
Q&A     395
Workshop     396

Hour 22: Using Mobile Device Emulators     397
Turning to Mobile Device Emulators     397
Finding Emulators for Testing     399
Using Emulators for Testing     411
Summary     415
Q&A     415
Workshop     416

Hour 23: Building an App with PhoneGap and jQuery Mobile     419
Getting Started with PhoneGap     419
Including jQuery Mobile in Your Project     430
Compiling the Application     . 437
Summary     440
Q&A     440
Workshop     440

Hour 24: Including jQuery Mobile with WordPress     443
Introducing the WordPress CMS     443
Installing WordPress     444
Creating a Custom Theme for WordPress     445
Adding jQuery Mobile to Your Theme     447
Summary     461
Q&A     462
Workshop     462

Index     465