100+ Practical jQuery Recipes for Solving Your Real-World Web and Mobile Development Challenges!
jQuery makes it easier than ever for developers to build exceptionally robust, cross-platform websites and mobile apps. jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples is a practical “cookbook,” packed with realistic, easy-to-use solutions for making the most of jQuery Core, jQuery UI, plugins, and jQuery Mobile.
This guide brings together more than one hundred self-contained, downloadable examples, each with an in-depth explanation of how the code works and how to adapt it for your own needs. Pioneering web/mobile developers Adriaan de Jonge and Phil Dutson present examples you can apply immediately in virtually any web or mobile app, and with any server-side platform, including PHP, .NET, Java, Ruby, Node.js, or Python. This extremely useful guide will help you
- Test browser support and provide for graceful degradation
- Fine-tune DOM element selection and manipulate your site’s DOM structure
- Master the newest techniques for event handling and binding
- Communicate with web servers: AJAX, page errors, redirects, XML, and more
- Use advanced UI widgets, from accordions and autocomplete to sliders and tabs
- Build mobile-optimized sites with the jQuery Mobile library
- Write and smoothly incorporate new plugins
- Integrate powerful third-party plugins, such as the Twitter Bootstrap framework
The authors’ proven “code first, explain later” approach supports developers at all levels who want to start experimenting immediately. Their exceptionally readable examples never take shortcuts or compromise quality,and their detailed walk-throughs are ideal for anyone who wants to thoroughly understand their code. If you have a working knowledge of HTML, CSS, and basic JavaScript, you’ll feel right at home immediately; if not, de Jonge and Dutson’s careful explanations and full HTML page layout examples will get you up to speed quickly.
Covers jQuery 1.6.4 and 1.7, with Tips for 1.8
Table of Contents:
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
About the Author :
Adriaan de Jonge is a consultant for Xebia IT Architects in The Netherlands. Adriaan specializes in Internet, content management, and Java. He is interested in new technologies like MongoDB, Node.js, HTML5, and various cloud computing platforms. Adriaan is also the author of Essential App Engine (Addison-Wesley, 2012) and several articles for IBM developerWorks on Java, XML, and Internet technologies. He was a conference speaker at JFall 2011 and the Scandinavian Developer Conference in 2012.
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. Phil cofounded and currently manages The E-Com DevBlog, a development blog focused on web development and solutions. To learn more visit dev.tonic1394.com. He is also the author of Sams Teach Yourself jQuery Mobile in 24 Hours (Sams, 2013).
