jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples

jQuery makes it easier than ever for developers to build robust, cross-platform websites and mobile apps. Now, there's a practical "cookbook" packed with realistic, easy-to-use solutions for making the most of jQuery Core, jQuery UI, plugins, and jQuery Mobile. Top web/mobile developer and architect Adriaan de Jonge presents more than 100 self-contained examples, each followed by an in-depth explanation of how and why each step works: all the information needed to extend or adapt each recipe for diverse real-world challenges. This book's examples are directly usable in virtually any web or mobile app, with any server-side platform: PHP, .NET, Java, Ruby, Node.js, or Python. de Jonge's proven "code first, explain later" approach supports experienced web/mobile developers who want to start experimenting as soon as possible. His readable examples don't take shortcuts, and never compromise technical quality. Coverage includes: * Getting started fast with the latest version of jQuery Core * Optimizing jQuery's performance * Selecting elements * Modifying pages via classes, attributes, elements, and inner HTML * Listening and responding to events * Communicating with servers via AJAX requests and JSON * Using jQuery UI to create robust user interactions * Changing app look and feel with CSS3 * Serving diverse mobile devices * Creating and working with plugins * Using plugins to add Twitter feeds, integrate Google Maps, and control video widgets

Preface xix

Acknowledgments xxiii

About the Author xxv

 

Part I: Core 1

 

Chapter 1: Getting Started with jQuery 3

Recipe: Introducing the Basic Usage of jQuery 3

Recipe: Using jQuery with Other Libraries 6

Recipe: Determining the jQuery Version 7

Recipe: Iterating Arrays with each() 8

Recipe: Manipulating Arrays by Using map() 9

Recipe: Working with Arrays of Elements 10

Recipe: Getting the Position of an Element by Using index() 12

Recipe: Finding Elements in an Array by Using grep() 13

Recipe: Determining the Size of an Element Set by Using length() 14

Recipe: Retrieving HTML5 data- Attributes 15

Recipe: Storing Element Data by Using data() 16

Recipe: Removing Element Data by Using removeData() 18

Recipe: Testing and Manipulating Variables 19

Recipe: Extending Objects by Using extend() 22

Recipe: Serializing the Data in a Form 24

Recipe: Testing Browsers for Feature Support 25

Summary 26

 

Chapter 2: Selecting Elements 27

Recipe: Combining Two Element

Sets by Using add() 27

Recipe: Refining the Selection by Using filter() 28

Recipe: Selecting Descendants by Using find() and children() 29

Recipe: Selecting Elements by Using

has() and Testing by Using is() 31

Recipe: Selecting Form Elements by

Using Pseudo-Selectors 32

Recipe: Nesting Selectors 33

Recipe: Emulating a CSS Hover Selector 34

Recipe: Selecting on Text by Using contains() 35

Example: Highlighting a Single Word 36

Recipe: Creating Custom Selectors 37

Recipe: Scoping the Selection Context 39

Summary 40

 

Chapter 3: Modifying the Page 41

Recipe: Adding Classes 41

Example: Removing Classes 42

Recipe: Generating Class Names 43

Recipe: Changing Properties and Attributes 45

Recipe: Changing the HTML Contained within an Element 46

Recipe: Adding Content by Using append() and appendTo() 48

Example: Appending the Outcome of a Function 49

Recipe: Adding Content by Using prepend() and prependTo() 50

Recipe: Generating HTML Dynamically

by Using jQuery 51

Recipe: Attaching and Detaching Elements 53

Recipe: Copying Elements by Using clone() 54

Recipe: Inserting Elements at Specific Positions 56

Example: Moving Items Up and Down the List 58

Recipe: Removing Elements 60

Recipe: Wrapping and Unwrapping Elements 61

Summary 64

 

Chapter 4: Listening and Responding to Events 65

Recipe: Listening to Mouse Events 65

Example: Drawing on a Canvas 67

Recipe: Listening to Keyboard Events 69

Recipe: Listening to Form Events 70

Recipe: Listening to Scroll Events 72

Recipe: Adding Central Event Listeners by Using live() and die() 73

Recipe: Delegating Events to Specific Ancestor Elements by Using delegate() 75

Recipe: Changing the Execution Context of a Function by Using proxy() 78

Summary 80

 

Chapter 5: Communicating with the Server 81

Recipe: Setting Up an Example Server in Node.js 81

Recipe: Performing a GET Request 83

Recipe: Loading HTML Directly 85

Recipe: Handling the Result by Using Promises 86

Recipe: Handling Server Errors 87

Recipe: Catching Page-not-Found Results 89

Recipe: Handling Page Redirects 90

Recipe: Setting Request Timeouts 91

Recipe: Passing HTTP Headers 93

Example: Validating Form Input on the Server Side 94

Recipe: Loading XML 96

Recipe: Listening to AJAX Events 97

Recipe: Reading JSONP from an External Server 98

Summary 100

 

Part II: UI 101

 

Chapter 6: Interacting with the User 103

Downloading and Installing jQuery UI 103

Recipe: Dragging Elements 104

Recipe: Dropping Elements 111

Recipe: Changing the Order of Elements by Using Sortable 116

Example: Sorting Elements in a Tree Structure 123

Recipe: Selecting Elements in an Unordered List 124

Example: Selecting Elements in a Tree Structure 128

Recipe: Resizing Elements 130

Summary 134

 

Chapter 7: Interacting with Widgets 135Recipe: Grouping Content by Using the Accordion 135

Recipe: Suggesting Input Values by Using Autocomplete 142

Recipe: Transforming Elements into Buttons 147

Example: Styling Radio Buttons by Using a Buttonset 151

Recipe: Choosing Dates by Using the Datepicker 152

Recipe: Attracting Attention with the Dialog 160

Recipe: Displaying Status of a Process by Using the Progressbar 168

Recipe: Retrieving Numbers by Using a Slider 170

Recipe: Navigating a Page by Using Tabs 174

Summary 181

 

Part III: Mobile 183

 

Chapter 8: Changing the Look and Feel 185

Changing the Styling of jQuery UI Components 185

Creating Animations by Using jQuery Core 186

Recipe: Animating Colors by Using jQuery UI 187

Recipe: Hiding Elements by Using Fade and Slide in jQuery Core 189

Recipe: Adding Graphical Effects by Using jQuery UI 191

Recipe: Animating Addition and Removal of CSS Classes by Using jQuery UI 192

Recipe: Displaying all Easing Functions in jQuery UI as Charts 194

Recipe: Displaying All Icons in jQuery UI 196

Recipe: Executing Code at the End of an Animation with a Promise 198

Recipe: Executing Code Within Animations by Using Queue and Dequeue 200

Summary 202

 

Chapter 9: Navigating Pages by Using jQuery Mobile 203

Recipe: Setting Up jQuery Mobile Basics 203

Recipe: Serving Multiple Pages from a Single HTML File 205

Recipe: Changing the Title Element 206

Recipe: Loading External Pages Using AJAX 208

Recipe: Displaying Page Loading Messages 210

Recipe: Linking to External Pages without AJAX 212

Recipe: Specifying the Transition Animation 213

Recipe: Specifying Custom Transition Animations 214

Recipe: Listening to Mobile Events 217

Recipe: Generating Back Buttons 221

Recipe: Adding Footers to the Bottom of the Page 223

Recipe: Fixing the Footer Across Pages 225

Recipe: Keeping the Footer in a Fixed Position 227

Recipe: Hiding and Showing the Footer 229

Recipe: Optimizing Headers and Footers for Fullscreen View 231

Recipe: Changing Color Schemes with Themes 232

Recipe: Using Multiple Columns 234

Recipe: Changing Pages by Using JavaScript Calls 236

Recipe: Loading Pages by Using JavaScript Calls 239

Recipe: Attaching Data to DOM Nodes in jQuery Mobile 241

Recipe: Utilizing jQuery Mobile Helper Functions 242

Summary 246

 

Chapter 10: Interacting with jQuery Mobile 249

Recipe: Displaying Toolbars Inline in Content 249

Recipe: Displaying a Warning Bar 250

Recipe: Adding Menu Bars to Footer Elements 252

Recipe: Navigating with a Navigation Bar 253

Recipe: Showing and Hiding Elements by Using Collapsible 257

Recipe: Adding Accordion Behavior by Using Collapsible Sets 258

Recipe: Acquiring Basic Text Input by Using Form Fields 260

Recipe: Acquiring Calendar-Based Input 261

Recipe: Displaying Input Fields by Using Alternative Keyboards 263

Recipe: Displaying Specialized Input Fields 265

Recipe: Acquiring Integers by Using Sliders 267

Recipe: Setting Binaries with Flip Switches 268

Recipe: Selecting a Single Element by Using Radio Buttons 269

Recipe: Selecting Multiple Elements by Using Check Boxes 271

Recipe: Selecting Elements from Drop-Down Lists 273

Recipe: Displaying Native Forms by Using jQuery

Mobile Off 276

Recipe: Displaying Lists of Elements 278

Recipe: Filtering List Elements 286

Recipe: Grouping Form Elements in Lists 288

Summary 289

 

Part IV: Plugins 291

 

Chapter 11: Creating Plugins 293

Recipe: Setting Up a Simple Static Plugin 293

Recipe: Creating Simple Context-Aware Plugins 295

Recipe: Chaining jQuery Functions and Plugins 296

Recipe: Parameterizing Plugins 297

Recipe: Providing Default Parameters 299

Recipe: Operating the Plugin by Using Methods 300

Recipe: Creating a Plugin that Creates Plugins 303

Recipe: Registering and Invoking Callback Functions 306

Recipe: Passing Context to Callback Functions 308

Recipe: Returning Deferred Objects to Call Separate Callbacks on Success and on Error 309

Recipe: Returning a Promise to Protect Internals 311

Recipe: Demonstrating the Promise(d) Protection 312

Recipe: Using Promise to Control Flow Structures 314

Recipe: Visualizing Progress Before the Final Callback 315

Recipe: Providing Context to Callback Functions 317

Recipe: Providing a Context to Progress Functions 319

Summary 320

 

Chapter 12: Working with Third-Party Plugins 323

Recipe: Displaying a Modal 323

Recipe: Using a Drop-Down Menu 326

Recipe: Using ScrollSpy 328

Recipe: Toggling Tabs 331

Recipe: Adding Tooltips 333

Recipe: Adding a Popover 334

Recipe: Alerting the User 336

Recipe: Button Control 338

Recipe: Collapsing Content 341

Recipe: Putting Content in a Carousel 344

Recipe: Using typeahead for Autocomplete 347

Summary 349

 

Index 351