Web Development Magazine

jQuery Plugin Tutorial

jQuery is getting really popular lately. Employers looking for JavaScript developers often requires them to know this library inside out, so today i want to show you my practical guide to jQuery plugins development. With the emphasis on best practices in plugin development. Creating plugin is plain simple, but developing a high quality plugin is a different story. Further more it shocks me that there are tons of tutorials online that do not even make distinction between jQuery extension and jQuery Plugin.

Prerequisites

At official jQuery site there is already guide to Plugin Authoring you can read it and learn how to develop plugins from it, although this tutorial contains only most important aspects of plugin development and introduces good practices, so if you are looking for a “magic pill” keep reading .

Here is what will do the plugin that we are going to develop here:

• On mouse over it will change element background color to the color specified by user or default color
• On mouse out it will revert back to white background
• On click custom function will be fired. By default function that will display element content in alert box

We will name the plugin hihglight and keep it in jquery-highlight.js file.

jQuery Plugin Structure

Without further ado, look at the … let’s call it a plugin template, along with the plugin functionality. (That’s a complete source code for this tutorial.)

// jquery-highlight.js
(function($) {
    $.fn.highlight = function(options) {
 
        // merge default options with user options
        var settings = $.extend({
            color: "yellow",
            onClick: function() {
                alert($(this).html());
            }
        }, options);
 
        return this.each(function() {
            // your plugin code goes here
            $(this)
            .hover(function() {
                $(this).css("background-color", settings.color);
            }, function() {
                $(this).css("background-color", "white");
            })
            .click(settings.onClick);
        });
    }
})(jQuery);
 
// plugin usage (somewhere outside jquery-dropdown.js)
$("p").highlight();

Breaking down the code (Optional)

It might not be perfect, but it’s a good starting point for developing a plugin. Just copy and paste to editor and start writing code. First of all if you are quite new you might be terrified by this construction.

(function($) {
    // your code
})(jQuery);

I admit it looks strange especially if you are more experienced with PHP then JavaScript or jQuery, but when we will brake it down further you will see that this is an equivalent of

function anonymousFunction(param) {
    // code
}
anonymousFunction(jQuery);

See? It turns out that this is actually a definition of anonymous function and a call to this function right after definition. Using $ as an argument to the anonymous function is a neat way of using $ shorthand in a function while avoiding conflict with other libraries.

Few important notes on jQuery Plugin development

To give plugin more flexibility, developers often use options to allow plugin behavior modification, so am i. However at the same time we want to allow users not to specify any options at all. In order to do that, to merge options given by user with default options i am using jQuery.extend() function, first param are default options, second options given by user.

Inside $.fn.highlight function, this refers to jQuery object

Look at the usage, it possible that highlight() will be applied to more then one element (obviously when there is more then one tag we want to highlight). Therefore i am doing this.each() in order to apply plugin fuctionality to each matched tag. It is so called a good practice even if you are confident that there will be only one matched element.

That’s all

Everything you need to start developing your own jQuery plugins is in the source code at the beginning of this article, i hope you will found the article useful.