jQuery is the most popular and commonly used JavaScript library.It makes it relatively easy to implement common functionalities .Also unlike JavaScript we don’t need to write lot of code for the common operations.Its sometimes referred to as “Do more write less” library.
Though jQuery provides lots of commonly functionality, out of the box, which is sufficient in most scenarios,but there may be certain requirements in which there is no inbuilt functionality provided by jQuery.In such scenarios we can either use the existing plugins which provides the same functionality which we require or we can create a new plugin if no such plugin already exists.
Plugin is a function which operates on a collection of elements.Whenever we use the $ or JQuery function it returns an object.This object contains a collection of elements.For example $(“div”) will return a collection of elements which matches the “div” selector or all the divs in the page.The jQuery object returned by calling the $() function also contains methods apart from wrapping all the matched elements.
We can use the methods of the $ jQuery object for performing operations on the collection of elements.There are methods for common operations such as
- html() which sets the html of all the selected elements
- each() which is used to iterate over each of the matched elements.
- text() which gets or sets the value of an element.
- $(document).ready() which ensures that page is in a ready state so that we can perform operations on it using jQuery
We use a jQuery object to select the elements on a page as:
$(“div”).html();
The above code uses the jQuery or the $ object to select the divs on the page,html() is a method contained by the jQuery object. The methods which are accessible using the jQuery object are actually contained by the $.fn object.
While creating a new plugin we define the plugin method on this $.fn object.We can add our methods to this object as:
$.fn.MessagePlugin=function() {
return this.each(function() {
//...body of the plugin function.
});
};
In the above code we are assigning a function to the plugin named MessagePlugin .This is how we define the plugin.
One important point to consider is that the plugin function returns “this” object.This is because plugins are supposed to be used as a part of the jQuery methods chain.
In jQuery methods chain we append one method to another method.For example the below method chain selects a div named “div1”.The $(“#div1”) method returns a jQuery object using which we call the text() method.The text() method again returns the jQuery object on which we call the css method to set the color to red.
$(“#div1”).text(“jQuery”).css(“color”, “red”);
“this” represents the object which is returned by the $() function.As our plugin method is supposed to be used as a part of jQuery method chain so the returned “this” object will be available to the other methods in the chain.
Since this plugin operates on a collection of elements rather than a single element so we access individual elements using “this.each()” function.This will ensure that the functionality defined by the each() method will be applied to all the selected elements.In other words each() will loop through all the elements in the collection.
Customizing Plugins using options
An option is a javascript object which is used for passing configuration information to a method.So we can use the options object to pass customization information to the jQuery plugin.Instead of pass multiple parameters we use the options parameter which can contain multiple values.
We define an options object just like a normal javascript object as:
var options = {
name: 'jquery',
width: '325px'
};
We can use the options parameter as a parameter to the jQuery plugin method as:
$.fn.MessagePlugin=function(options) {
return this.each(function() {
$(this).append('<div>'+options.message+' '+options.name+'</div>');
});
};
Calling the Plugin method
Now we can call the above plugin and pass values for the message and name option values as:
$(document).ready( function() {
$('div').MessagePlugin({ name: 'javascript', message:Hello!});
});
Providing Default values
We can provide the default values to the options parameter that will be used when values are not passed by the caller of the plugin:
$.fn.MessagePlugin=function(options) {
var settings = $.extend({
name : 'JQuery',
message'Hello!'
}, options);
return this.each(function() {
$(this).append('<div>'+opts.message+' '+opts.name+'</div>');
});
};
In the above code the options javascript object is passed to the plugin and it contains the values provided by the consumer of the plugin. The $.extend() function takes two objects as parameters and merges the second object into the first object.Here we are passing the user supplied values and the default values to the extend() method.So if the consumer of the plugin is not passing some values then the default values will be used.
Utility functions
We can also create utility functions which are used to provide a specific functionality.It is defined directly using the $ or the jQuery object.We define it as:
$.pluginName = function() {
//.... body of the function
}
Now to use the above pluginName function we can call it using the jQuery object as:
$.pluginName()
But unlike the plugin methods we can not chain the utility functions rather they return a particular value to the calling code.
So writing a simple jQuery plugin is a rather straightforward task.If none of the existing jQuery plugins are meeting our requirement then writing a new plugin for reusable functionality can be a good option.
Leave a Reply