|jQuery - Easy Plugins|
|Written by Ian Elliot|
|Monday, 11 February 2013|
Page 1 of 3
Available as a Book:
buy from Amazon
buy from Amazon
Plugins are simple ways to extend what jQuery does. If you create your plugin correctly then you will get additional benefits of being more closely integrated with jQuery. In particular, you can make your new facility work with jQuery chaining so that it can be part of a longer sequence of commands.
For the sake of an example, let's add the table generating function created in Getting Started With jQuery - Manipulating The DOM.
This builds a table element with n rows and m columns which it returns as the result of the function. This is far too simple to really integrate into jQuery but imagine that it has lots of extra facilities implemented as properties and methods.
The Basic Plugin
A plugin is just a function - one function is one plugin and to keep things simple you should try and include as much functionality within each plugin rather than pollute the jQuery namespace with multiple functions.
To add your function to jQuery all you have to do is create a new property on jQuery.fn e.g.
amd after this you can use your function with the usual jQuery syntax i.e.
This is too easy!
If you want to fully understand what is going on then you need a little more explanation. However, if you don't want to know then skip to the next section.
The first question is why do we assign our new method to jQuery.fn and not directly to jQuery which is the object we are extending?
The answer is subtle.
The jQuery object that you usually reference with $ is just a constructor function for the jQuery function object that you actually use to get things done. Hence the jQuery.prototype property can be used to set all of the default properties for the jQuery function object that you use. So to add to the jQuery function object you simply add to jQuery.prototype or more usually jQuery.fn which is set up in the jQuery code to point to the same object as the prototype.
What this means is that if after you have added your new function you try to use
then you will get an error that jQuery doesn't have a property called myFunction. However
works because $() acts as the constructor for the jQuery function object which is returned in the usual way and this, does have a myFunction property via the prototype mechanism.
If you do want to add a property to the constructor then you add it directly. For example:
adds the myFunction2 property to the jQuery constructor not to the jQuery function object. Following this you can call myFunction2 as:
as it is a method of the jQuery constructor but not as:
as it is not a property of the jQuery function object.
Why might you want to add a property to the constructor?
The answer is that if you need to create a plugin that doesn't operate on a jQuery object then adding it to the constructor makes this very clear. In other words you can not use selectors in $.myFunction2() but you can in $(selectors).myFunction2();
As already explained you don't need to know this to add a new plugin but it is interesting and might even help you debug things if anything goes very wrong.
The Table Plugin
So now we can create our table plugin which is easy:
Yes that's all we have to do. Of course in most cases you would define the function as an anonymous function e.g.
but you don't have to.
Now you can create a table just by writing
and then add it to a node in the DOM using
This is easy but surely the table function should append the element it creates to any elements selected by the jQuery call? That is it would be better if you could write
and have the new element automatically append to the body element as the last child.
The key to doing this is to know that when the table function is called the context, i.e. this, is set to the jQuery object returned by $("body"). What this means is that you can work with the jQuery object within your function quite easily.
To append the table to the DOM objects selected by "body" all you need to do is change the end of the function to read:
This works perfectly but it has some consequences. You can now write:
and the table will be appended as the last child element of the body.
The next problem is that the append will add your table object to each of the selected elements in the jQuery object. That is if you do:
a 3 by 2 table will be added as the last child of each matching div.
This might be exactly what you want to do but if you want to take the alternative standard jQuery action of only effecting the first selected element you have to code this in your plugin.
So for example if you want to change the behavior to adding a table to the first element of the selection you might use:
However, you have to be careful how to work with the selection - it has repercussions as we will see.
|Last Updated ( Sunday, 29 January 2017 )|