MANNING Keith Wood FOREWORD BY Dave Methvin www.it-ebooks.info Extending jQuery www.it-ebooks.info ii www.it-ebooks.info Extending jQuery KEITH WOOD MANNING SHELTER ISLAND www.it-ebooks.info For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: orders@manning.com ©2013 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without elemental chlorine. Manning Publications Co. Development editor: Cynthia Kane 20 Baldwin Road Copyeditor: Benjamin Berg PO Box 261 Technical proofreaders: Renso Hollhumer, Michiel Trimpe Shelter Island, NY 11964 Proofreader: Andy Carroll Typesetter: Marija Tudor Cover designer: Marija Tudor ISBN: 9781617291036 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – MAL – 18 17 16 15 14 13 www.it-ebooks.info v brief contents PART 1 SIMPLE EXTENSIONS 1 1 ■ jQuery extensions 3 2 ■ A first plugin 17 3 ■ Selectors and filters 30 PART 2 PLUGINS AND FUNCTIONS 51 4 ■ Plugin principles 53 5 ■ Collection plugins 70 6 ■ Function plugins 97 7 ■ Test, package, and document your plugin 107 PART 3 EXTENDING JQUERY UI 129 8 ■ jQuery UI widgets 131 9 ■ jQuery UI mouse interactions 159 10 ■ jQuery UI effects 182 www.it-ebooks.info BRIEF CONTENTS vi PART 4 OTHER EXTENSIONS 201 11 ■ Animating properties 203 12 ■ Extending Ajax 216 13 ■ Extending events 233 14 ■ Creating validation rules 250 www.it-ebooks.info vii contents foreword xiv preface xvi acknowledgments xviii about this book xix about the cover illustration xxiii PART 1 SIMPLE EXTENSIONS . 1 1 jQuery extensions 3 1.1 jQuery background 4 Origins 4 ■ Growth 5 ■ Today 7 1.2 Extending jQuery 8 What can you extend? 8 1.3 Extension examples 11 jQuery UI 11 ■ Validation 12 ■ Graphical slider 13 Google Maps integration 14 ■ Cookies 14 ■ Color animation 15 1.4 Summary 15 www.it-ebooks.info CONTENTS viii 2 A first plugin 17 2.1 jQuery architecture 18 jQuery extension points 19 ■ Selectors 20 ■ Collection plugins 21 ■ Utility functions 21 ■ jQuery UI widgets 21 jQuery UI effects 22 ■ Animating properties 22 ■ Ajax processing 22 ■ Events handling 23 ■ Validation rules 24 2.2 A simple plugin 24 Placeholder text 24 ■ Watermark plugin code 25 ■ Clearing the watermarks 26 ■ Using the Watermark plugin 27 2.3 Summary 29 3 Selectors and filters 30 3.1 What are selectors and filters? 31 Why add new selectors? 31 ■ Basic selectors 32 Pseudo-class selectors 33 3.2 Adding a pseudo-class selector 37 The structure of a pseudo-class selector 37 ■ Adding an exact content selector 39 ■ Adding a pattern matching content selector 41 ■ Adding element type selectors 43 ■ Adding a foreign language selector 43 ■ Selectors from the Validation plugin 45 3.3 Adding a set filter 45 The structure of a set selector 46 ■ Adding a middle elements set selector 47 ■ Enhancing the equals selector 48 3.4 Summary 50 PART 2 PLUGINS AND FUNCTIONS 51 4 Plugin principles 53 4.1 Plugin design 54 Plugin benefits 54 ■ Planning the design 54 Modularize the plugin 56 4.2 Guiding principles 56 Provide progressive enhancements 56 ■ Only claim a single name and use that for everything 57 ■ Place everything under the jQuery object 57 ■ Don’t rely on $ being the same as jQuery 58 ■ Hide the implementation details by using scope 58 ■ Invoke methods for additional functionality 59 Return the jQuery object for chaining whenever possible 60 www.it-ebooks.info CONTENTS ix Use the data function to store instance details 60 Anticipate customizations 61 ■ Use sensible defaults 62 Allow for localisation/localization 63 ■ Style your plugin with CSS 64 ■ Test on the major browsers 66 ■ Create a repeatable test case suite 66 ■ Provide demonstrations and documentation 67 4.3 Summary 69 5 Collection plugins 70 5.1 What are collection plugins? 71 5.2 A plugin framework 71 The MaxLength plugin 71 ■ MaxLength plugin operation 72 5.3 Defining your plugin 74 Claiming a namespace 74 ■ Encapsulation 74 ■ Using a singleton 75 5.4 Attaching to an element 76 Basic attachment 77 ■ Plugin initialization 78 ■ Invoking methods 79 ■ Getter methods 80 5.5 Setting options 82 Plugin defaults 82 ■ Localisations/localizations 83 Reacting to option changes 85 ■ Implementing MaxLength options 86 ■ Enabling and disabling the widget 88 5.6 Adding event handlers 89 Registering an event handler 89 ■ Triggering an event handler 90 5.7 Adding methods 90 Getting the current length 90 5.8 Removing the plugin 91 The destroy method 91 5.9 Finishing touches 92 The plugin body 92 ■ Styling the plugin 94 5.10 The complete plugin 95 5.11 Summary 96 6 Function plugins 97 6.1 Defining your plugin 98 Localization plugin 98 ■ Framework code 99 ■ Loading localizations 100 www.it-ebooks.info [...]... of jQuery to jQuery 1.9 and later www.it-ebooks.info jQuery background 7 (continued) Using Google’s CDNa All jQuery releases are available on the Google CDN, but jQuery doesn’t control this CDN and there may be a delay between a jQuery. .. was formed in September 2009 to look after all the jQuery projects, including jQuery Core, jQuery UI, jQuery Mobile, Sizzle, and QUnit Contributions and donations by the jQuery community provide the financial basis for this support 1.2 Extending jQuery If jQuery offers so much functionality, why would you want to extend it? To keep the size of the jQuery code manageable, only those functions that are... javascript_library/all www.it-ebooks.info 8 CHAPTER 1 jQuery extensions You can also find a lot of activity on the jQuery forums (https://forum .jquery. com), with more than 250,000 responses to more than 110,000 questions Within the forums you’ll find special sections devoted to using and developing jQuery plugins The ongoing development of jQuery is now managed by the jQuery Foundation (http:/ /jquery. org) It was... text jQuery and jQuery UI are open source libraries that are released under the MIT license1 and can be downloaded directly from the corresponding websites: http:// jquery. com/ and http://jqueryui.com/ respectively The source code for all examples in this book is available from the book’s page on the Manning’s website: http://www.manning.com/ExtendingjQuery Author Online The purchase of Extending jQuery. .. are enhanced selectors for jQuery the building blocks behind finding the right element to operate upon These are covered in chapter 3, with numerous examples of how to create your own www.it-ebooks.info 2 CHAPTER www.it-ebooks.info jQuery extensions This chapter covers ■ jQuery s origins and purpose ■ What you can extend in jQuery ■ Examples of existing extensions Today, jQuery is the most widely used... jQuery extensions combined with an instructor’s intuition about which jQuery topics deserve a deep explanation rather than a passing mention This book delves into just about every facet of extending jQuery s functionality, whether for personal needs or professional profit The best-known type of extension is the basic jQuery plugin that extends jQuery Core methods, but the book gives equal time to jQuery. .. maximum use of it as well 3 www.it-ebooks.info 4 CHAPTER 1 1.1 jQuery extensions jQuery background The jQuery website defines jQuery as “a fast, small, and feature-rich JavaScript library It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers” (http:/ /jquery. com) It’s a library of JavaScript... need to download it at all Using CDNs To download jQuery from one of the CDNs that hosts it, include one of the script tags shown in this sidebar You may need to change the version of jQuery requested to suit your requirements Using jQuery s CDN provided by MediaTemple You can include the jQuery Migration plugin from this site too, to... available to the jQuery community He frequently answers questions in the jQuery forums and was a top five contributor for 2012 In his day job he’s a web developer using Java/J2EE for the back end and jQuery on the front end He lives in Sydney, Australia, with his partner Trecialee and spends his spare time dancing www.it-ebooks.info about the cover illustration The figure on the cover of Extending jQuery is... src="http://ajax.aspnetcdn.com/ajax /jQuery/ ➥ jquery- 1.9.1.min.js"> All jQuery releases are available on the Microsoft CDN, but jQuery doesn’t control this CDN and there may be a delay between a jQuery release and its availability there a Google Developers, “Google Hosted Libraries—Developer's Guide,” https://developers.google.com/speed/libraries/ devguide #jquery b ASP.NET, “Microsoft Ajax Content . 97 7 ■ Test, package, and document your plugin 107 PART 3 EXTENDING JQUERY UI 129 8 ■ jQuery UI widgets 131 9 ■ jQuery UI mouse interactions 159 10 ■ jQuery UI effects 182 www.it-ebooks.info BRIEF CONTENTS vi PART. SIMPLE EXTENSIONS . 1 1 jQuery extensions 3 1.1 jQuery background 4 Origins 4 ■ Growth 5 ■ Today 7 1.2 Extending jQuery 8 What can you extend? 8 1.3 Extension examples 11 jQuery UI 11 ■ Validation. MANNING Keith Wood FOREWORD BY Dave Methvin www.it-ebooks.info Extending jQuery www.it-ebooks.info ii www.it-ebooks.info Extending jQuery KEITH WOOD MANNING SHELTER ISLAND www.it-ebooks.info For