5 Simple Steps to Develop a jQuery Plugin

If you are a developer, while developing an interactive web application, you may find yourself writing similar (or same) code over and over again. In these situations, the need for reusability arise. At the same time you may also face scoping and namespacing issues.

Similarly, there are many other cases where you need a portable code so that the same functionality can be implemented in some other project.

One of the solution to these types of problem is to write jQuery plugin.

In short, developing a functionality or interaction or any implementation using jquery; especially as a jquery plugin will be an advantage when it comes to avoiding scoping issues, portability, abstraction and also it saves you lot of time.

How to think while developing a jQuery plugin?: In short, while developing a jQuery plugin you are just adding a function written by you to the jQuery namespace. Also we can say you are going to add any of your method to the $.fn object or fn object from jQuery namespace as we know that $ is an alias of jQuery namespace.

Following are some of the standard steps involved in developing a jQuery plugin. Also, please make sure that you have included the jquery library in your file.

1. Create your plugin with custom name

Let say we are creating a plugin call tgs. The following is the sample script for this tgs function.

$.fn.tgs = function() {
 
  // Our plugin implementation goes here
 
};

After adding “tgsbegin” function to “$.fn” object this function is now available in jQuery namespace and now you can initialize this function as shown below:

$("#someId").tgs( ) ;

2. Target more than one dom elements

During such requirements you can use the jQuery “each” function over as shown below:

$.fn.tgs = function() {
 
  this.each(function() {
    // You will get each targeted element here
  });
};

Now, if your are using the plugin to target multiple occurrence of a dom element using a class, it can be done as follows:

$(".someClass").tgs();

3. Make the plugin chainable with other jQuery functions

During such requirement just return the results from “tgs” function over which other jQuery functions can be chained, as follows:

$.fn.tgs = function() {
  return this.each(function() {
    // You will get each targeted element here
    // and it will be returned back
  });
};

Now you can chain it with other jQuery functions as shown in the following example:

$("#someId").tgs().removeClass("someClass");

4. Make the plugin configurable by passing options

Using jQuery.extend you can merge two objects.

Here we are using this method to merge the passed options with the default options declared. Refer the example below:

$.fn.tgs = function(options) {
  var settings = $.extend({

    // Below are the default settings.
    fontStyle: "bold",
    backgroundColor: "yellow"
  }, options );
      
};

In the above script the options will be passed as shown below:

$( "#someId" ).tgs({
    fontStyle: "italic",
    backgroundColor: "white"
});

The above script will merge the options passed with the default options and the changes will be effective.

You can also pass this option like as below as well by creating a object literal and passing it as option:

var options = {
  fontStyle: "italic",
  backgroundColor: "White"
};

$("#someId").tgs(options);

You may also want to make the methods and variable inside plugin implementation private and adding the whole plugin in a scope to provide abstraction.

5. Self invoking Function or Closure

Finally, you can make your plugin to have all the above mentioned features by writing it inside a self invoking function or a Closure as follows.

Also, we discussed about javascript closure in a previous article a while back.

(function($){

  $.fn.tgs = function(options) {
    var settings = $.extend({

      // Below are the default settings.
      fontStyle: "bold",
      backgroundColor: "yellow"

    }, options );

    //Plugin implementation goes here as required

    //Return something from here as required
        
  };

}(jQuery));