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

  • Getting started with jQuery and ASP.NETGetting started with jQuery and ASP.NET As promised, I am starting a series on jQuery.  Today our goal is to get a project setup in Visual Studio that uses jQuery.  We won't be explaining much in the way of syntax, but we will get our f...
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of ab...
  • jQuery – DropjQuery – Drop Last week we took a look at how to make an element draggable.  This isn't of much use unless we can drop it. Fortunately, making an item droppable is about as easy as making it draggable. $...
  • jQuery Looks like XPathjQuery Looks like XPath So far in our examination of jQuery we've seen how to select an ID, select a set of elements by tag name and select a set of elements by their class.  But what if we wanted to select a set of elem...
  • jQuery – class manipulationjQuery – class manipulation So, now that we've fully exhausted the topic of how to select elements using jQuery, what can we do with it? Well, one thing we can do is use the two built-in methods, addClass and removeClass, ...