Barry Goffett

Barry Goffett

The basics of creating a jQuery Plugin

Post by Barry Goffett on

jQuery Plugin Example - Code Screenshot

jQuery is a powerful JavaScript library, that is very useful at quickly creating interactive elements on a web page. It allows the user to target html selectors, similar to how CSS does, and then attach a function.

I’ve created various types of jQuery functions, ranging from show/hide functions, to ajax based applications that make periodical requests. I have also used various jQuery plugins, many a time, but never really given much thought to creating my own. Until, a colleague of mine thought the jQuery code i was writing would be useful on other sites and suggested i create a plugin for it.

Why create a jQuery plugin?

Have you ever created a piece of code that was so helpful, you have thought it would be useful on another project?. Well then, turn it into a plugin.

Yeah, you could possible just copy and paste the code you have from one project to the next, and change the selector, and maybe tweak it a bit, but why not just save yourself some time and energy by creating a re-usable plugin.

Best of all, if you create a plugin, and later decide to update it, you can than quickly update the other projects that use the plugin.

How do we go about creating a plugin?

Let’s assume we have the following setup:

Example jQuery Plugin Setup

Here we have a basic index.html page, that is loading in jQuery, our plugin and a css file.

Inside the myPlugin.js, we have the following:


/*!
* Plugin name here
* Author: Joe Bloggs
* Description: my super cool jQuery plugin
*/

//lets not assume jQuery is the only library being loaded. Here we declare the '$' as jQuery. Allowing us to use the $ without disrupting other JavaScript Libraries that might be loaded.
(function($) {

//Here we define our plugin name. So this one is called 'myPlugin'. This can be anything you like.
$.fn.myPlugin = function(options) {

// default options for the plugin
var config = $.extend({}, {
message: 'This is a default warning prompt'
}, options);
// execute the following for each matching element.
this.each(function() {

// here we can assign either the default message, or the one specifed when the plugin is executed. by using 'config.message'
$(this).click(function() {
alert(config.message);
});

});

//allow jQuery chain
return this;
};
})(jQuery);

I’ve commented on the file, to help get a better understanding of what each part is doing. Now using this plugin, we can include the following code on our html page:


<script>

$('a.warning').myPlugin();

</script>

The above code, will target any anchor links that have the class ‘warning’ attached to it. Clicking that link, will prompt the user with the following message ‘This is a default warning prompt’. You can also see we are using our own defined function ‘.myPlugin’.

Now let’s say we wanted to create another prompt. Rather than creating a new plugin, or amending the existing one, we can pass over a parameter to the plugin


<script>

$('a.terms').myPlugin({
message: 'this is a different message'
});

</script>

Here we are overriding the default message, with the one specified when executing the code.

Conclusion

There we have it, we have created our own jQuery plugin. Obviously this isn’t the greatest of plugins, but hopefully it’s sparked some interest, and you can think of those times where you can re-use your own code, and possible expand upon it using the options within the plugin.

Parting Tips

  • Try to give your plugin a unique name, and nothing like ‘slider’ or ‘carousel’ etc. They are likely already taken, and if your using multiple plugins, the chances are their may be another called something similar which may cause issues.
  • Don’t ‘hard code’ anything in to your plugin. Whether that be a message, height, width or colour. Always use the plugin options. Set a default message, height, width, that can be overridden if specified in the parameters. This will make your plugin more dynamic.
  • Clearly comment your code. It’s a personal habit of mine that i always comment what i’m doing, or trying to do. Therefore, if theres any issues further down the line, you can at least see what this plugin is doing, or trying to do.

Further Reading

Have a look at the following sites for further information: