How to create a jquery plugin

Let us create a simple “jquery circle plugin”.

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

<div id="circular" class="_default_circle"> 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 structure explained!

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

Now, for the creation of function

inside the extended function write something like this

t-in structure

(function($){....... })(jQuery);Next, make sure that your plugin name is as simple as possible, because , the main advantage of using plugin is to get work done fast, so don’t let your plugin users think for hours to get the function name right.

Ok , having said that , you can create your plugin function within extended JQ function like this, well i am going to call it as circle itself!, so our first plugin function is circle , so you can call your plugin as $('#divname').circle();

That’s it!.. pretty cool ha?

Now, for the creation of function

inside the extended function write something like this

$.fn.circle = function() {        
  this.animate({width : 100, height: 100} ,1000);
  this.addClass("_custom_circle");
}

Remember, “this” is already an object, so , its not necessary for you to call $(this) within the function.

ok , here is what we are doing.. we are increasing the width and height of the circle along with different css appended to it , also, with an animation delay of 1000sec.

Alright,  here is the overall jQuery plugin code:

$(document).ready(function(){
  //initialize the Jquery plugin
  $("#circular").circle();                          
});
                          
(function($){
  $.fn.circle = function() {
    this.animate({width : 100, height: 100} ,1000);
    this.addClass("_custom_circle");
  };        
})(jQuery);

save this script as circle.jquery.js and include in your index page.

That’s it!!! comments are welcome!! 🙂