At the Forge - jQuery Plugins

Learn how to use jQuery plugins, one of the secrets to this JavaScript library's success.

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.

Plugin Basics

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.