jQuery – Creating Plug-ins

spider 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 post in jQuery

Related Post

One Response to “jQuery – Creating Plug-ins”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear