jQuery Plugin- How and when to use it

What is jQuery plugin ?

jQuery plugin is like extension to the jquery existing function. If you are c# developer plugin likes the extension function to add more functionality existing types or to dlls. Extending jQuery with plugins and methods is very powerful and can save you and your peers a lot of development time by abstracting your most clever functions into plugins.

Steps to make jquery plug

You can start writing your jQuery plugin as you can see below.

Step 1:

Always wrap your plugin in

(
     function( $ )
     { 
          // plugin goes here 
     }
) ( jQuery );

By passing jQuery to a function that defines the parameter as $, $ is guaranteed to reference jQuery within the body of the function.

Step 2:

Create function assign name to function as below

(
     function( $ )
     {
          $.fn.pluginName = function ()
          {
               // there's no need to do $(this) because
               // "this" is already a jquery object
          }; 
     }
) ( jQuery );

Use of jquery plugin

After the end of my last article related to validating fields based on datatype which is more relay on Javascript/jQuery function. I found to much lengthy and repeated code for textbox and for the textarea validation. Something as below

Example:

$("input[isRequired=true]").each(
     function(n)
     {
          $('#' +this.id).addClass('mandatory');

          if(this.value==='')
          {
               $('#' +this.id).removeClass('normal');
               $('#' +this.id).addClass('mandatory');
          }
          else
          {
               $('#' +this.id).removeClass('mandatory');
               $('#' +this.id).addClass('normal');
          }
     }
);

$("textarea[isRequired=true]").each(
     function(n)
     {
          $('#' +this.id).addClass('mandatory');
          if(this.value==='')
          {
               $('#' +this.id).removeClass('normal');
               $('#' +this.id).addClass('mandatory');
          }
          else
          {
               $('#' +this.id).removeClass('mandatory');
               $('#' +this.id).addClass('normal');
          }
}
);

But after use of the jquery this code gets reduce as shown below

$("input[isRequired=true]").ApplyCSSClass();
$("textarea[isRequired=true]").ApplyCSSClass();

(function ($) {

     $.fn.ApplyCSSClass = function () {
               this.each(
                    function () {

                         $('#' + this.id).addClass('mandatory');
                         if (this.value === '') {
                              $('#' + this.id).removeClass('normal');
                              $('#' + this.id).addClass('mandatory');
                         }
                         else {
                              $('#' + this.id).removeClass('mandatory');
                              $('#' + this.id).addClass('normal');
                         }
     });
    };
}
)(jQuery);

So as you can see in above code bunch of line code et related by jQuery plugin which can be applied to the input and textarea field and can be used for other type of fields.

Summary

jQuery plugins allows you to make the most out of the library and abstract your most clever and useful functions out into reusable code that can save you time and make your development even more efficient.