Extending jQuery Keith Wood Copyright 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: [email protected] ©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 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – MAL – 18 17 16 15 14 13 Brief Table of Contents Copyright Brief Table of Contents Table of Contents Foreword Preface Acknowledgments About this Book About the Cover Illustration 1. Simple extensions Chapter 1. jQuery extensions Chapter 2. A first plugin Chapter 3. Selectors and filters 2. Plugins and functions Chapter 4. Plugin principles Chapter 5. Collection plugins Chapter 6. Function plugins Chapter 7. Test, package, and document your plugin 3. Extending jQuery UI Chapter 8. jQuery UI widgets Chapter 9. jQuery UI mouse interactions Chapter 10. jQuery UI effects 4. Other extensions Chapter 11. Animating properties Chapter 12. Extending Ajax Chapter 13. Extending events Chapter 14. Creating validation rules Regular expressions Glossary Index List of Figures List of Tables List of Listings Table of Contents Copyright Brief Table of Contents Table of Contents Foreword Preface Acknowledgments About this Book About the Cover Illustration 1. Simple extensions Chapter 1. jQuery extensions 1.1. jQuery background 1.1.1. Origins 1.1.2. Growth 1.1.3. Today 1.2. Extending jQuery 1.2.1. What can you extend? 1.3. Extension examples 1.3.1. jQuery UI 1.3.2. Validation 1.3.3. Graphical slider 1.3.4. Google Maps integration 1.3.5. Cookies 1.3.6. Color animation 1.4. Summary Chapter 2. A first plugin 2.1. jQuery architecture 2.1.1. jQuery extension points 2.1.2. Selectors 2.1.3. Collection plugins 2.1.4. Utility functions 2.1.5. jQuery UI widgets 2.1.6. jQuery UI effects 2.1.7. Animating properties 2.1.8. Ajax processing 2.1.9. Events handling 2.1.10. Validation rules 2.2. A simple plugin 2.2.1. Placeholder text 2.2.2. Watermark plugin code 2.2.3. Clearing the watermarks 2.2.4. Using the Watermark plugin 2.3. Summary Chapter 3. Selectors and filters 3.1. What are selectors and filters? 3.1.1. Why add new selectors? 3.1.2. Basic selectors 3.1.3. Pseudo-class selectors 3.2. Adding a pseudo-class selector 3.2.1. The structure of a pseudo-class selector 3.2.2. Adding an exact content selector 3.2.3. Adding a pattern matching content selector 3.2.4. Adding element type selectors 3.2.5. Adding a foreign language selector 3.2.6. Selectors from the Validation plugin 3.3. Adding a set filter 3.3.1. The structure of a set selector 3.3.2. Adding a middle elements set selector 3.3.3. Enhancing the equals selector 3.4. Summary 2. Plugins and functions Chapter 4. Plugin principles 4.1. Plugin design 4.1.1. Plugin benefits 4.1.2. Planning the design 4.1.3. Modularize the plugin 4.2. Guiding principles 4.2.1. Provide progressive enhancements 4.2.2. Only claim a single name and use that for everything 4.2.3. Place everything under the jQuery object 4.2.4. Don’t rely on $ being the same as jQuery 4.2.5. Hide the implementation details by using scope 4.2.6. Invoke methods for additional functionality 4.2.7. Return the jQuery object for chaining whenever possible 4.2.8. Use the data function to store instance details 4.2.9. Anticipate customizations 4.2.10. Use sensible defaults 4.2.11. Allow for localisation/localization 4.2.12. Style your plugin with CSS 4.2.13. Test on the major browsers 4.2.14. Create a repeatable test case suite 4.2.15. Provide demonstrations and documentation 4.3. Summary Chapter 5. Collection plugins 5.1. What are collection plugins? 5.2. A plugin framework 5.2.1. The MaxLength plugin 5.2.2. MaxLength plugin operation 5.3. Defining your plugin 5.3.1. Claiming a namespace 5.3.2. Encapsulation 5.3.3. Using a singleton 5.4. Attaching to an element 5.4.1. Basic attachment 5.4.2. Plugin initialization 5.4.3. Invoking methods 5.4.4. Getter methods 5.5. Setting options 5.5.1. Plugin defaults 5.5.2. Localisations/localizations 5.5.3. Reacting to option changes 5.5.4. Implementing MaxLength options 5.5.5. Enabling and disabling the widget