Creating a SIMPLE JQUERY Plugin

A Jquery Plugin is simply a method that we can use just like any other Jquery library function. When we use these methods we extend the Jquery prototype object, thus allowing all JQuery objects to inherit them. It allows reuse of the code hence reduce redundancy.

Note: All Jquery library methods are plugins.


Jquery Plugin Declaration

A Jquery plugin can be declared using Jquery fn property as shown below:

jQuery.fn.<plugin-method-name>= function(params) { ... };

Note: 'fn' property is an alias of the 'prototype' property. Also 'jQuery.fn' is a synonym of '$.fn', using jQuery ensures that there is no conflict with other javascript libraries which uses '$' variable.


See Our JQuery Plugin in Action

We will create a simple Jquery plugin that can be used to apply different themes to a table. Let's call it 'theme plugin'.

Shown below is the usage of our theme plugin. You can try clicking on the buttons to apply different themes to the table below.

Name Designation City Date of Joining Salary
Ashutosh Meher CEO Mumbai 20th Januay 2004 $50000
Scarlett Leisure President London 25th September 2010 $35000
Marian Jenney President Bangalore 14th Januay 2014 $35000
Shekhar Mehta Vice President Chicago 29th August 2009 $30000
Kumar Gaurav Director San Francisco 18th Januay 2008 $25000
Liliana Antonelli Senior Manager Mumbai 6th Januay 2012 $20000
Heath Mejorado Manager Sydney 24th March 2011 $15000
Raisa Mcmorran Manager Berlin 8th Januay 2012 $15000
Elvira Luiz Manager New Delhi 4th February 2013 $15000
Lynda Phillip Manager Los Angles 24th Januay 2007 $15000

Coding Our JQuery Plugin

Shown below is the complete code of our jquery plugin:

(function ( $ ) {
 
    $.fn.theme = function( options ) {
		
        var settings = $.extend({
            // This is the default.
	    class : "default-theme"
        }, options );
	
        return this.removeClass().addClass(settings.class);
    };
 
}( jQuery ));

There is nothing much done to code our plugin. All we did was apply a css class to the table.

Setting Defaults

First we set the default class property as "default-theme" if a class property is not passed when then plugin is called. The below code is used to set the defaults, it sets the setting's class propery to the value passed in the options else sets it to a default value 'default-theme'. 

  var settings = $.extend({
      // This is the default.
      class : "default-theme"
  }, options );

We just need a single property for our plugin, we might however need multiple properties in most typical jquery plugins, we can set defaults for multiple property just by separating them with commas as shown below:

  var settings = $.extend({
      // This is the default.
      property-1: "prop-1-default",
      property-1: "prop-2-default",
      property-3: "prop-3-default"
  }, options );

Applying CSS class

Next we use the removeClass() and addClass() jquery library methods to set the table's class attribute to the desired class that will update the theme of the table. The removeClass() method removes the previous css class and hence the theme and the addClass() method adds the new css class.

this.removeClass().addClass(settings.class);

Apply Chaining

Finally, make sure that you do not break the chain. Chaining is a feature of jquery where every method returns the original jquery object. This is an important feature that allows us to run multiple jquery methods in the single statement. We should not break this chaining feature, all we need to do is return the current object.

return this.removeClass().addClass(settings.class);

Using Our JQuery Plugin

To use out jquery plugin we need to call the plugin just like any other jquery library method as shown below:

$("table").theme();

Since, we did not passed any class property in above example, the default theme will be applied. Shown below how we can pass a class property with the plugin:

$("table").theme({class:"dark-theme"});  //For Dark Theme
$("table").theme({class:"light-theme"});  //For Light Theme
$("table").theme({class:"aqua-theme"});  //For Aqua Theme

Our plugin only makes use of one parameter, however if we develop jquery plugins where we need multiple parameter we can pass them by using comma separator as shown below:

$("table").myplugin({param1:"value1",param2:"value2"});

CSS used for Themes

In case you are interested in the css we used for the themes in our jquery plugin we developed, they are shown below:

table#jq-plugin-demo {
    margin: 0 auto;
}
table#jq-plugin-demo th{
	padding: 10px 5px;
	text-align: center;
	border: 1px solid #999999;
}
table#jq-plugin-demo td {
    padding: 5px 15px;
	border: 1px solid #999999;
}
table#jq-plugin-demo.default-theme  th {
    background-color: #e1e1e1;
}
table#jq-plugin-demo.default-theme td {
    padding: 5px 15px;
}
table#jq-plugin-demo.dark-theme th {
    background-color: #404040;
    color: white;
}
table#jq-plugin-demo.dark-theme tr {
    background-color: #e0e0e0;
}
table#jq-plugin-demo.dark-theme tr.altr {
    background-color: #bbbbbb;
}
table#jq-plugin-demo.light-theme th {
	background-color: #e1e1e1;
}
table#jq-plugin-demo.light-theme tr {
    background-color: #f9f9f9;
}
table#jq-plugin-demo.light-theme tr.altr {
    background-color: #ffffff;
}
table#jq-plugin-demo.aqua-theme th {
    background-color: #6bcff4;
}
table#jq-plugin-demo.aqua-theme tr.altr {
    background-color: #e1f5fd;
}
table#jq-plugin-demo.aqua-theme tr {
    background-color: #f0fafe;
}
RELATED ARTICLES

Building an Image Slider with JQuery Plugin

Learn how to build a jQuery plugin for an image slider in this detailed step by step tutorial.

View Article