jQuery Plugin Tutorial Part V - The Implementation

Now we will look into implementing the plugin. After we finish the plugin we should be able to call the voter in the following manner.

$("#element-id").voter();

In order to achieve this we will make the changes to the matched elements in our plugin as follows.

return this.each(function(){
    $(this).addClass("voter-wrapper");
    
    var inner=$('<div>'+settings.start+'</div>');
    var up = $('<div>+</div>').addClass('voter-action');     
    up.click(function(){
        if(parseInt(inner.html())<settings.max){
            inner.html(parseInt(inner.html())+1);
        }
    });
    $(this).append(up);

    $(this).append(inner);
    
    var down = $('<div>-</div>').addClass('voter-action');
    down.click(function(){
        if(parseInt(inner.html())>settings.min){
            inner.html(parseInt(inner.html())-1);
        }
    });
    $(this).append(down);
});

Let us take a look at the code line by line.

$(this).addClass("voter-wrapper");

This line will add the class "voter-wrapper" to the matched element. That css class will define the styles related to the whole element.

var inner=$('<div>'+settings.start+'</div>');

This line will create a new html div element and assign the value to the variable 'inner'.

var up = $('<div>+</div>').addClass('voter-action');     
up.click(function(){
   if(parseInt(inner.html())<settings.max){
       inner.html(parseInt(inner.html())+1);
   }
});
$(this).append(up);

This above code will create a new html element containing the "+" mark that will be used to vote up. Then we assign it an onclick handler and append it to our element.

$(this).append(inner);

The above line will append the 'inner' element that we created above. It element will show the vote count.
The code

var down = $('<div>-</div>').addClass('voter-action');
down.click(function(){
    if(parseInt(inner.html())>settings.min){
        inner.html(parseInt(inner.html())-1);
    }
});
$(this).append(down);

will create and append the element that will be used to vote down.
The full code of our plugin is given below.

(function($){
    $.fn.voter = function(options){
        var settings = {
            start:0,
            max:10,
            min:0
        };
        if(options){            
            $.extend( settings, options );                
        }
        return this.each(function(){
            $(this).addClass("voter-wrapper");            
            
            var inner=$('<div>'+settings.start+'</div>');
            var up = $('<div>+</div>').addClass('voter-action');     
            up.click(function(){
                if(parseInt(inner.html())<settings.max){
                    inner.html(parseInt(inner.html())+1);
                }
            });
            $(this).append(up);
            $(this).append(inner);
            
            var down = $('<div>-</div>').addClass('voter-action');
            down.click(function(){
                if(parseInt(inner.html())>settings.min){
                    inner.html(parseInt(inner.html())-1);
                }
            });
            $(this).append(down);
        });
    };
 }
)(jQuery);

Now we can call the plugin as follows.

$("#voter").voter();

A demo and code is available at this jsFiddle.