Anatomy of a Jquery Plugin

A jquery plugin is a powerful addition to the jquery library. also known as extensions these are nothing new to the development world and have been around for quite some time in various languages. But what makes jquery plugins so unique is the ease in which they can be developed.

This tutorial will take you over the basic requirements of a plugin and show you just whats needed to get started writing your own.

Naming Convention

it is a defacto standard to prefix and plugin with jquery. meaning if I were to create a new plugin which were to magnify an image I would name it like so:

jquery.magnify.js

this makes life a lot easier in the long run when we want to separate out javascript files and javascript plugins.

//works with 1.3.2 and above
$.fn.magnify = function() {
// code
};
//works with 1.2.6 and below
jQuery.fn.magnify = function() {
// code
}; 

It is important to note that if depending on the version of jquery you are running you will need to use either “$” in all instances of the word “jQuery” for the consistency of this tutorial I will stick to “jQuery”.

Calling the Plugin

Once you have the initial setup you can call your new plugin straight away like so:

$("selector").magnify();

Of course as this point your plugin wont do mauch as you havent given it any instrunctions. Note however that we are calling .magnify which is the same name as we have given to .fn.magnify this is what denotes the plugin name when being called to act on a seletor.

Setting Parameters

chances are you will want to pass parameters to your new plugin to enable you to overwrite features and customize the plugins performance. This can be done like so:

jQuery.fn.magnify = function(parameters) {
// default settings
var parameters = jQuery.extend( {
color: '#666666', // a colour parameter
},parameters);

All that happens here is we create a new object to store our parameters in, this can be called whatever you like. Once declared you can overwrite these when you call the plugin

Code

jQuery.fn.magnify = function(parameters) {
// default settings
var parameters = jQuery.extend( {
color: '#666666', // a colour parameter
},parameters);
jQuery(this).css('color');

after setting the parameters you will need the code that will actually carry out the actions. This is where you can be creative and write your own custom functionality whatever that may be. For the sake of the example all we are doing is finding the selector, denoted by “this” and setting the color of it to be our new parameter color of “#666666″.

If your not familiar with the the use of “this” in jquery it is used when we refer to a dynamic selector which can be passed into the plugin, for example:

$('#fred').magnify();

In the instance above when we call our plugin on a ID called fred, “this” becomes the representation of fred. you will see the use of $(‘this’) plotted all over the jquery documentation if you wish to know more.

Overwriting Parameters

Now we are ready to call the plugin we can put it all together and apply our specified rules which will overwrite the default values we passed into our plugin.

$("#fred").magnify({
color: '#DFDFDF',
});

And thats all there is to it. once you get the anaotomy of putting together a simple plugin you can make it as advanced as you want, alternatively you can use other peoples pre written plugins, and hopefully with the knowledge this tutorial has given you, it will help you understand a bit more of the inner working of the wonderous framework that is jquery. Happy coding!