At the Forge - jQuery Plugins

Last month, we began to look at jQuery, an open-source JavaScript library that provides a great deal of functionality for Web developers, which is increasingly popular for client-side application development. We saw that jQuery's use of CSS-style selectors, combined with its “chaining” syntax, makes it easy to get started with the library and to attach behaviors to page elements. We also saw that jQuery inherently is unobtrusive, with event handlers being assigned via $(document).ready(), rather than inline with the HTML.

At the end of the day though, jQuery does many of the same things as Prototype, YUI and other JavaScript libraries. So, why have so many developers moved to jQuery? What makes it such an attractive choice? Speed and the API are obviously two factors, but a major reason for developers to use jQuery is the huge library of plugins that is available for it. Just as Perl programmers can enjoy a massive library of modules known as CPAN, jQuery users can benefit from a large number of plugins for a variety of tasks, from UI elements to AJAX form submission. Installing and using a jQuery plugin is extremely straightforward, and it can be installed (and evaluated) in minutes.

This month, let's look at a few of the many jQuery plugins that have been developed over the last few years, and also at how to use plugins to change our Web applications.

From a developer's perspective, a jQuery plugin is nothing more than an additional JavaScript file that you download, install in your Web application's JavaScript directory, include in your program with a <script> tag and then invoke. Typically, a plugin adds one or more new functions to the jQuery object, which means if you install a plugin named foo, you often can do the following:

$(document).ready(function() {
    $('#mybutton').foo();
}

The above construct tells jQuery that when the HTML document has been downloaded enough to start querying and modifying it with JavaScript, you invoke a function. That function, in turn, looks for an HTML element with the ID mybutton and then invokes the foo() method on it.

What does $('#mybutton').foo() do? That's up to the author of the plugin. Typically, a plugin adds functionality to an element or class of elements, quite possibly modifying the HTML around that element—adding new elements necessary for the plugin to do its job or adding classes that cause one or more CSS declarations to be invoked.

Because a jQuery plugin typically modifies the document's HTML, it's vitally important to look at a plugin's documentation to understand what HTML structure it expects to receive. Perhaps it expects to have an unordered list (<ul>) with list items (<li>) inside it. Perhaps it expects to have <div> tags with <span> tags inside it. Perhaps it expects something else altogether. If a plugin doesn't seem to do what you expected, double-check that your HTML matches the example and/or what's in the documentation.

jQuery plugins also rely in no small part on the powerful visualizations that CSS provides. Installing a jQuery plugin often means not only using JavaScript code, but also putting CSS styles into effect—either by incorporating the plugin's CSS file into your application or by copying the declarations into an existing CSS file. Just as many plugins require that your HTML be structured a certain way in order to work, some require that you set certain classes or IDs on your HTML elements.

The fact that jQuery plugins modify the HTML and/or CSS means that you might need some extra tools to understand and debug what is happening in your browser. I normally develop in Firefox, and I have found the Firebug extension to be a wonderful tool to identify issues and experiment with alternatives, in both JavaScript and CSS. Also quite valuable is the Web Developer extension for Firefox, whose “view generated HTML” does the same thing as “view source”, but shows you the HTML as it currently exists, not as it was downloaded originally from the server before JavaScript modified it.

Finally, some plugins come with images that enhance the way the plugin works.

The way I've described it so far might make it seem as though jQuery plugins are difficult to use or that they will force you to change and contort your HTML in numerous ways. But, nothing is further from the truth. On the contrary, the main problem I have had with jQuery plugins is the vast variety and scope of them, forcing me to choose among 20 different menuing plugins or ten different modal-dialog plugins. Comparing and evaluating these plugins, many of which have borrowed code from one another, can be difficult. But, when you find an appropriate plugin, it's usually quite easy to get started using it.

If you are trying to do something in jQuery that others probably have tried before, you always should look through the main plugin repository first, at plugins.jquery.com. There also is a large library of user-interface (UI) plugins at ui.jquery.com. And of course, large numbers of plugins are described, documented and downloadable from Web sites outside jquery.com.