Introduction
First and far most, we should say thanks to John Resig and his team to make our life so easier then before by making jQuery, most demanding and powerful JavaScript framework and it’s expanding phenomenally that gives the proof of dominancy of jQuery framework.
Why jQuery
So why do I need to extend jQuery?
Here we go; no library is full filling all the requirements so does jQuery, so there should be some mechanism to add sets of useful methods called as plugins for your specific requirement, which we can say in the basic terminology calling your external methods into your structure but it doesn’t give you the power of leverage existing code base.
Let’s say, by creating a new jQuery commands, we automatically inherit the use of powerful selector mechanism and can use all the jQuery methods and indeed it’s a good practice to make reusable code.
There is a pretty good documentation and guidelines available on jQuery Plugins/Authoring page.
Step1
Let’s start making our first jQuery plugin; we call our plugin as “disable”, we make our plugin to disable the form elements and then we will extend our default options using $.extend utility method to enable the required once and will add a toggle method also.
We will follow the guidelines as provided on jQuery.com so we will save our plugin as jquery.disable.js
// plugin definition
$.fn.disable = function() {
// plugin implementation code goes here.
};
$.fn.disable means that we are extending the $ wrapper with a function called disable.
Step2
Let’s wrap into self executed anonymous function and will pass out jQuery alias in the parentheses, why it so, it’s because of author may have used $.noConflict() after using this technique there will not be any conflict between other library.
(function($) {
$.fn.disable = function(){
// plugin implementation code goes here.
})(jQuery)
Now we extend our default options because we will be using the same method to enable the disabled once.
Our plugin invoke code goes like this with native jquery framework and plugin call:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Extending jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.disable.js"></script>
<script type="text/javascript">
$(function(){
$("input[type=text]").disable();
});
</script>
</head>
We are using attribute filter here, which will find out all input elements with a type of text on the page and then it will disable all the input elements.
Step3
So far so good; you can further look into http://www.learningjquery.com/2007/10/a-plugin-development-pattern which gives more insight about plugin development.
(function($) {
$.fn.disable = function(options){
// plugin defaults
var defaults = {
disabled: true
};
// Extend our default options with those provided.
var opts = $.extend({}, defaults, options);
return this.each(function(){
})
})(jQuery)
$.extend() extend one object with one or more others, returning the original, modified, object. This is a great utility for simple inheritance.
Then the each() method is called to iterate over each element in the wrapped collection and return the same, inside that function, this is the collection of wrapped DOM elements that needs to be operated upon.
There is a pretty good reference on http://www.visualjquery.com/ about all the jQuery API reference in a nice format compare to http://docs.jquery.com/
Step4
Now we are pretty close to it.
(function($) {
$.fn.disable = function(options){
// plugin defaults
var defaults = {
disabled: true
};
// Extend our default options with those provided.
var opts = $.extend({}, defaults, options);
return this.each(function(){
if(typeof this.disabled != 'undefined')
this.disabled = true;
})
}
})(jQuery)
We just try to find out each and every html element disabled attribute, if it does exist then set it true.
Read more
