About Me

My photo

one who looks outside, dreams
one who looks inside, awakens!!

Get FREE updates!! subscribe!!

Delivered by FeedBurner

Like it? Follow up!! :)

Oct 12, 2013

how to create a jquery plugin with options

Hi,

In Part 1 of my previous post, i had described on how to build jQuery plugin. In this post, i would extend on;  and teach you, on how to build the same circle plugin with customizable parameters.

create a div in you index page, this is our div element which animates later as a circle!.



<div id="circular" class="_default_circle">&nbsp;plugin</div>

The important one's,  the CSS:
._default_circle{
    width:50px;
    height:50px;
    background:#00FFFF;
    border:#0000FF solid 1px; text-align:center;
   
}

._custom_circle{
width:50px;
    height:50px;
    background:#00FFFF;
    border:#0000FF solid 5px;
    text-align:center; top:50%;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);

}

The ._default_circle is used for the div on initial load, the ._custom_circle is used when you actually access the div through your plugin.

jQuery plugin with options structure explained!

We can initiate the actual function of plugin using the jQuery built-in structure

(function($){....... })(jQuery);

We will use the jQuery "extend" function to have options for the plugin.

Ok, first we need to decide on how to give options to the plugin, because if you provide more options to the user , more likely is he going to like your plugin. Also, remember that complexity kills the performance, so have a balanced plugin. In this tut, i have three options included ; animation speed, height and width of circle.

We will initialize the extend function like this

$.fn.extend({........ });

same way as you would initialize document ready...but, with different syntax.

call the circle function within the extend function

circle: function() {... } , if you are passing default values then use circle: function(options) {... }

within circle function let us set our default functions like this
var defaults = {
                        anim_speed : 100,
                        width: 100,
                        height : 100,
                     };

set the default values if the user does not set any in his function call.

var choice = $.extend(defaults, options);

The $.extend api will merge the contents of two or more objects together into the first object , more info here

so for every option we will overwrite the default values in the plugin like this

return this.each(function() {                                 
                        var curr = $(this);
                     curr.animate({width : choice.width, height: choice.height} ,choice.anim_speed);
                    curr.addClass("_custom_circle");
                                          });  

 For every option we will animate with default values or with the values user has set. 

A user will call your plugin like this  $("#circular").circle(); 

In this case , the default variable that you had set earlier will be used in the function. 

Since you have given the options, user can call their plugin with options like this:

$("#circular").circle(
                                  {
                                        anim_speed : 1000,
                                       width : 200,
                                       height: 200
                                 }
                             );

 Wow congratulation! you did it.. 

Here is overall code : 


$(document).ready(function(){
$("#circular").circle(
{ anim_speed : 1000, width : 200, height: 200 }
);
});  
(function($){
$.fn.extend({
circle: function(options) {
var defaults = {
anim_speed : 100,
width: 100,
height : 100,
};
var choice = $.extend(defaults, options);
return this.each(function() {
var curr = $(this);
curr.animate({width : choice.width, height: choice.height} ,choice.anim_speed);
curr.addClass("_custom_circle");
});
}
});
})(jQuery);

Please subscribe for more cool codes :)
Thank you! any help for the blog is appreciated! :)