jQuery plugins

jQuery is a lightweight JavaScript library, which aims to ease programming in this language (and you bet it does!). You can find out more about jQuery on its homepage, but I would like to focus on something else - jQuery plugin development. It's the plugins that make jQuery such a powerful tool with big possibilities of adding effectiveness, interactivity and a better user experience overall to your on-line projects and webpages.

There is a plenty of jQuery plugins to choose from. With a solid chance of success, you could find a plugin for every need and every situation you would come upon while developing your on-line prodigy. But despite that, sooner or later you will come to point, where you just need to develop your own plugin, because:

• the plugin that solves your problem does not (yet) exist
• maybe the plugin does exist, but you have no luck finding it (or you don't know how to phrase it specificaly for the search engine)
• the plugin does not meet the requirements
• the plugin solves another 518 problems, has 500KB in size and is slooow

So, instead of a long searching, customizing to your own needs and/or reading the documentation, it could be better to just write your own plugin (this is valid for smaller and/or simpler plugins mainly, there is no need to reinvent the wheel, of course).

Structure of a simple jQuery plugin

When it comes to jQuery plugin development, I consider myself still a slightly advanced rookie. Therefore, the following code is just my personal view of a plugin structure (you are more than welcome to criticize me in comments ).

function TestPlugin(el)
{
    // We are working with element "el" here - for example, add a red border to it..
    $(el).css('border', '1px solid red');
}
 
(function($) {
    $.fn.testPlugin= function(settings) {
        var config = {};
        if (settings) $.extend(config, settings);
        this.each(function() {
            var plug = new TestPlugin($(this));
        });
        return this;
    };
})(jQuery);

This is just a basic useless example - all it does is that it adds a red border to selected elements. And how do we select them?

$(document).ready(function(){
 $("p").testPlugin();
});

First, we wait until the document is fully loaded (with help of .ready method applied to the document), and then we apply our plugin to all "p" elements (ie. paragraphs). The result is, that every paragraph on page will have a red border. Of course, we can just select anything instead of P tags:

 $(".redBorder").testPlugin();     // adds red border to all elements with "redBorder" class
 $("li:even").testPlugin();       // adds red border to all even list elements
 $("img").testPlugin();           // adds red border to all images on page

The goal of these examples is of course not to add red border to elements, but rather show a simple structure of plugin, which can operate with more elements individually (which is important when you need to work with events independently etc.)

jQuery is fun!