There comes a point in every jQuery programmer's life when they look at some JavaScript they have just created and realize that it is time to integrate it with jQuery – in short create a plugin. It turns out to be easier than you might expect!.  

This is an extract from my book Just jQuery The Core UI.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

Plugins are simple ways to extend what jQuery does. If you create your plugin correctly then you will get the 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 return to the table generating function created in Chapter 8:

function table(n, m) { 
 var table = $("<table>"); 
 var tbody = $("<tbody>"); 
 var row = $("<tr>"); 
 var cell = $("<td>"); 
 for (var i = 0; i < n; i++) { 
  var tempRow = row.clone(); 
  for (var j = 0; j < m; j++) {
   tempRow.append(cell.clone().html(i+","+j));
  } 
  tbody.append(tempRow); 
 } 
 table.append(tbody); 
 return table; 
}

This builds a table element with n rows and m columns which it returns as the result of the function. This is really far too simple to integrate into jQuery, but imagine that it has lots of extra facilities implemented as properties and methods. You could also argue that it would be better integrated into jQuery UI rather than jQuery core and you would be correct – but it is a good example to enable you to grasp the essential steps involved in creating a plugin.

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:

jQuery.fn.myFunction= function definition

or:

$.fn.myFunction= function definition

After this you can use your function with the usual jQuery syntax:

$().myFunction();

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, after you have added your new function, if you try to use:

$.myFunction();

you will generate an error that jQuery doesn't have a myFunction property.

However:

$().myFunction();

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:

$.myFunction2=function{...};

adds the myFunction2 property to the jQuery constructor. not to the jQuery function object. Following this you can call myFunction2 as:

$.myFunction2();

as it is a method of the jQuery constructor, but not as:

$().myFunction2();

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, adding it to the constructor makes this very clear.

In other words, you cannot use selectors in:

$.myFunction2() 

but you can in:

$(selectors).myFunction2();

As already mentioned you don't need to know this to add a new plugin, but it is interesting and might even help you with debugging if anything goes wrong.