Extend jQuery with Your Very Own Plugin

By Joydip Kanjilal


[next]

jQuery, the open source, cross-browser JavaScript library, simplifies event handling, animations, and Ajax-enabled web page development by promoting rapid application development. JQuery also has an excellent plugin architecture; if you are comfortable writing jQuery code, you can easily develop and implement your own plugin to extend the jQuery library seamlessly.

This article discusses the basics of plugins in jQuery and explains how you can develop one of your own, plug it in, and use it in your application. You can download the latest version of the jQuery library freely, and it comes pre-installed on Visual Studio 2010.

Prerequisites

To work with the code examples in this article, you should have Visual Studio 2010 RC or higher installed in your system. Alternatively, you should have Visual Studio 2008 and Visual Studio 2008 SP1 installed. However, in this case, you should manually install the jQuery library as it doesn't ship with Visual Studio 2008.

The code examples in this article were compiled using Visual Studio 2008. However, you can still use the code examples in Visual Studio 2010 RC or higher.

Plugins: Extending the jQuery Library

What is a jQuery plugin, and why should you use it anyway? A plugin is a piece of jQuery code that you can easily plug in to the existing jQuery library to provide extensibility. You can use plugins in jQuery to extend the jQuery library and to promote code reuse. In essence, you can use plugins in jQuery to extend jQuery itself.

Declaring a Plugin

In its simplest form, you can declare a jQuery plugin using the fn function declaration in jQuery as shown here:

Implementing a plugin is a two-step process. First, you need to write a function that would be a plugin to the existing jQuery library. Here's an example:

Next, you use this plugin in your code. Here's how you can do it:

Note that you should name your plugin like this:

As an example, if the name of your plugin function is logMessage, the plugin should be stored in a file with the name jQuery.logMessage.js.


[next]