Extending jQuery – jQuery plugin development

Some introductory words.

jQuery is a very popular JavaScript library and why wouldn’t it be popular, it has made the life of us developers so so easy. Its not just that our lives have become easy, but so has our code-base become more cleaner.

Anyways we are not going to discuss the merits of jQuery, I will have a separate post to discuss that. Right now what I would be discussing is how to write plugins for jQuery.

Two ways of extending jQuery:

There are two kinds of ways that you can extend jQuery. As you probably know that methods are different from functions. Methods can be thought of as instance based, while functions can be thought of as static. Let me clear your minds by using an example:

Example of a method:

$('#myform').hide();

Here hide is an instance method that is attached to the jQuery.fn object.

Example of a function:

$.get('someurl.php');

Here get is a static function that is attached to the jQuery object itself.

Well now that the difference between method and function is out of the way, let’s discuss how to extend jQuery by writing plugins.

Implementing a plugin:

Well I will only be showing the implementation of extending jQuery by adding a new method.

$.fn.resize = function( options )
{
  // setup default options
  var config = { width: 640, height: 480 };
  
  if(options)
  {
    $.extend( config, options );
  }
  
  this.each( function( index, element )
  {
    // resize the element proportionally

    var $element = $( element );
    var ratio = Math.min( config.width / $element.width(), config.height / $element.height() );
    
    $element.css( { 
      width  : ( $element.width() * ratio ) + 'px',
      height : ( $element.height() * ratio ) + 'px'
    } );
  });
  
  return this;
}

The resize method can be used in following ways:

$('.large_image').resize();
$('.large_image').resize( { width: 400, height: 300 } );

There is not much that the our method is doing, its just resizing dom objects proportionally.

There are two important things to note here:

  • We are using this.each, so that we can apply our resize method to many objects. For example, lets suppose there are four images with the class ‘.large_image’, then with $(‘.large_image’).resize(); our resize method will resize all four images.
  • We are returning this from our resize method. This is so that method chaining can be achieved. For example, we might do $(‘.large_image’).resize().show();

Do you see how easy it is to extend jQuery. So when will you be writing your own jQuery plugin?

Ovais is a storage architect with keen focus on reliability, efficiency and performance of OLTP databases, more specifically MySQL. He currently works at Uber on ensuring storage reliability and scalability. Previously, he helped different web properties scale their MySQL infrastructure. He also worked at Percona as a Senior MySQL consultant and at a few other startups in various capacities.

  • SbIVHC clriurvhpwwj, [url=http://szqucdtipgfi.com/]szqucdtipgfi[/url], [link=http://uwkwrijgndfy.com/]uwkwrijgndfy[/link], http://ltmttkkiptwm.com/

  • SbIVHC clriurvhpwwj, [url=http://szqucdtipgfi.com/]szqucdtipgfi[/url], [link=http://uwkwrijgndfy.com/]uwkwrijgndfy[/link], http://ltmttkkiptwm.com/

  • Majid Khan

    the article title seems wrong.. you skipped the actual plugin creation code.. you should update the title ..

  • Majid Khan

    the article title seems wrong.. you skipped the actual plugin creation code.. you should update the title ..

  • I haven’t skipped the actual plugin creation code,. if you have a look at code in the section “Implementing a Plugin” you will see that the code is actually a plugin code. But having said that thanks for your comment I will try to improve the post further.,

  • I haven’t skipped the actual plugin creation code,. if you have a look at code in the section “Implementing a Plugin” you will see that the code is actually a plugin code. But having said that thanks for your comment I will try to improve the post further.,

  • nice post. thanks.

  • nice post. thanks.

  • Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  • Can you tell us how to extend the second way (e.g. $.get(…))?

  • Extending the second way is pretty much same.,

    Instead of adding a function to $.fn.,
    $.fn.resize = function( options )

    You would add it to the $ object directly, in the following way,.
    $.resize = function()
    {
    // do something
    }