Keith Wood - Extending jQuery

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

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 Mannings 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.20 Baldwin RoadPO Box 261Shelter Island, NY 11964

Development editor: Cynthia KaneCopyeditor: Benjamin BergTechnical proofreaders: Renso Hollhumer, Michiel TrimpeProofreader: Andy CarrollTypesetter: Marija TudorCover 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

Since jQuerys debut in 2006, it has grown into the most popular JavaScript library for managing and enhancing HTML documents. jQuerys cross-browser design allows developers to focus on building websites instead of puzzling out browser peculiarities. In 2013, more than one-half of the top million websites (measured by visitor traffic) use jQuery. Similarly, the jQuery UI library, which builds on jQuery, is the most popular source of UI widgets.

With that popularity comes the temptation for the jQuery team to add features so that nearly any problem encountered by a developer can be solved with the incantation of a jQuery method. Yet every feature added to the core code of jQuery means more bytes of JavaScript for website visitors to download, whether or not a feature is used in that sites development. Such a large monolithic library would degrade performance just for the convenience of web development, which isnt a good trade-off.

To combat the scourge of code bloat, jQuerys philosophy is to put only the most common functionality in the library and provide a foundation developers can extend. An incredible ecosystem of jQuery plugins has grown over the years, driven by each developers need to scratch a particular itch and their generosity in sharing code with the wider jQuery community. Much of jQuerys success can be attributed to this ethos and the team fosters it through sites like plugins.jquery.com.

Keith Wood is well suited to be your guide through Extending jQuery. Hes been a regular fixture in the jQuery Forum and a top contributor for several years, providing high-quality answers to the real-life problems developers encounter. Hes also earned his street cred by developing several popular jQuery plugins. As a result, Keith has a practitioners understanding of jQuery extensions combined with an instructors intuition about which jQuery topics deserve a deep explanation rather than a passing mention.

This book delves into just about every facet of extending jQuerys 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 UI widget-based plugins that are often a better foundation for visually oriented extensions. Detailed documentation on the jQuery UI widget factory is scarce, which makes these chapters all the more valuable.

Im especially pleased that Keith dedicates some time to the topics of unit tests. Having a set of thorough unit tests seems like needless extra work, right up until the point a few months later where an innocuous change to a plugin causes the entire web team hours of debugging on a live site while user complaints flood in. Unit tests cant find all bugs, but they act as a sanity check and prevent obvious regressions that manual testing by an impatient developer tends to miss.

Whatever your reason for learning about jQuery extensions, please consider contributing your work back to the community as open source if it seems that others might benefit from it. This is a natural fit with jQuerys own philosophy. Sharing your knowledge with others not only helps them, but it comes back to you in professional recognition.

D AVE M ETHVIN P RESIDENT , J Q UERY F OUNDATION

I first encountered jQuery in early 2007 and immediately found it intuitive and simple to use. I was quickly selecting elements and showing and hiding them. Next I tried to use some of the third-party plugins on offer, but found that they varied widely in usefulness and usability.

I was fortunate to start my plugin writing with what was to become a major plugin in the jQuery community. I came across Marc Grabanskis Clean Calendar plugin, which he had converted into a jQuery plugin, and liked the interface it provided for entering a date. I started playing with it to add more features as a way to explore jQuerys capabilities and eventually offered these back to Marc. So started a collaboration on this plugin over the next couple of years.

At that point the Calendar plugin had been renamed Datepicker and had been chosen by the jQuery UI team as the basis for its date-picker offering.

Since that start Ive been developing other plugins as the need or interest arose. Some of my most popular ones are an alternative Datepicker that also allows for picking date ranges or multiple individual dates, a Calendars plugin that provides support for non-Gregorian calendars, a Countdown plugin to show the time remaining until a given date and time, and an SVG Integration plugin that allows you to interact with SVG elements on the web page. During this time Ive learned a lot about JavaScript and jQuery and how to write plugins for the latter.

Creating plugins is an ideal way to capture functionality in a reusable format, making it simple to incorporate into other web pages. It lets you more thoroughly test the code and ensures consistent behavior wherever it is used.

jQuery has grown significantly in size and functionality over the intervening years, but it has remained true to its purpose of making the developers life easier. The thriving plugin community is a testament to the foresight of the jQuery team in providing a platform that can be easily extended. I hope that the insights presented in this book allow you to make the most of jQuery in your own projects.

Ill begin by thanking John Resig and the jQuery team for providing such a useful tool for web developers throughout the world.

Thanks also to Marc Grabanski for allowing me to contribute to the Calendar/ Datepicker plugin and for launching me into plugin development.