.NET Answers

Last week we looked at how to have jQuery execute our own functions. I suggested at the time that if you were going to need to use that function in multiple applications, you might want to consider turning it into a plug-in.

Today we’ll look at how to do that.

Before we start we need to take a look at what the $ in jQuery represents. It actually represents the jQuery variable so that we can use either:

$('someElement')

or

jQuery('someElement')

to retrieve the list of “someElement” elements in your DOM. You need to know this prior to creating a plug-in because the code you write in your plug-in should use the jQuery variable instead of the $ variable (alias, really) because it is possible that the $ alias may have been turned off by whoever is using your plug-in. They would do this if they had another library that was also using the $ for something and using it in jQuery would cause a variable collision.

To create the actual plug-in you extend the jQuery.fn object. fn is an internal object that hangs off the jQuery variable. To create a new method for jQuery, just give it a name and assign it to an anonymous function:

jQuery.fn.NewFunc = function() {
    alert('you called NewFunc');
}

running the code above would then allow us to write this code:

$('someElement').NewFunc();

which would display the alert box with ‘you called NewFunc’ as the message once and only once.

But typically, we want our method to do something with the elements that were selected. We do this by accessing this and using the each function we introduced last week.

jQuery.fn.NewFunc = function() {
    this.each(function() {
        alert('you called NewFunc on ' + this);
    });
}

Now the alert box shows for each element that was retrieved.

The last thing we need to do is to return this from the method so that we can chain the methods together with other methods.

jQuery.fn.NewFunc = function() {
    this.each(function() {
        alert('you called NewFunc on ' + this);
    });
    return this;
}

You would then include this code in a ready handler of a separate js file and include the js file in your html page so that you could use it in the jQuery code elsewhere in your application.

You should name your plug-in’s js file as “jquery.” + pluginName + “.js” (Hey, sometimes using code is more clear than trying to type it all out in prose.)

We’ll take a look at parameter passing and what to do if the method is supposed to filter the list of objects we started with in later articles.

Other Related Items:

Lightwave 3D Plug-In Power - Macroform, Particle Storm & WavefilterInstruction tape in the use of three Plug-ins for Lightwave 3D: Macroform, Particle Storm, & Wavefilter

For Navigon 2100 2120 5100 MAX GPS Portable Travel USB Plug-in 12V Car Charger

No More War Peace Sign Distressed logo Women's Tee Shirt in 6 Colors Small thru XXLPick from the petite form-fitting babydoll style or standard regular fit womens style. Please refer to our sizing chart for measurements.This design also available as a men's Tee shirt, and a men's hoodie and sweat shirt in our other amazon.com listings.

Related Post

• Do you Need My Help?
• jQuery 1.4 Released
• jQuery Expand/Collapse Using Head Tags
• Does jQuery Make Us Lazy?
• jQuery – Dialog

Bookmark to:

Hide Sites

One Response to “jQuery – Creating Plug-ins”