The goal of this particular jQuery tutorial is to demonstrate how to create a plugin for jQuery. There are actually many ways of building jQuery plugin, but i will prefer this method where i can allow my users to specify some of the optional parameter that they may want to set. Enough of long talk of jQuery, here goes,
step 1
This is one of the default template of jQuery plugin.
(function($){
$.fn.myEffects= function() {
return this.each(function() {
});
};
})(jQuery);
I like this way of setting up my plugin so that i can use the $ sign for jQuery without conflicting with other library that also uses the same sign.
Step 2
Now, We have our jQuery plugin template what i want this plugin to have is the ability to allow other user to change the default options that i have set in the plugin so that it is flexible enough for my user to to change according to their need. We can do this by using jQuery extend method.
(function($){
$.fn.myEffects= function(options) {
var defaults = {
startOpacity: 1,
hoverOpacity: 0,
duration: 2000
};
var options = $.extend(defaults, options);
return this.each(function() {
});
};
})(jQuery);
This way we successfully added the ability for our users to change our plugin default settings.
Step 3
Once our jQuery plugin template has been created, we can add other function into this plugin. The this.each function is important because it will help to iterate all the element specific by the users. For example, if the plugin is being called $("div").myEffect(), all the element of div will be affected by the plugin myEffect. For example, my plugin is to fade all other element other than the element on hover. The plugin will look like this,
(function($){
$.fn.myEffects= function(options) {
var defaults = {
startOpacity: 1,
hoverOpacity: 0,
duration: 2000
};
var options = $.extend(defaults, options);
var selector = this;
return this.each(function() {
$(this).hover(
function(){
$(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);
$(selector).not(this).stop(true,true).animate({opacity: options.hoverOpacity}, options.duration);
}
,
function(){
$(selector).not(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);
});
});
};
})(jQuery);
In order to call this plugin, we specify the name of the plugin which is myEffects
$(function(){
$('div#menu li').myEffects()
;});
The above declaration will attach an event hover to each menu li with the default settings. Users can change the effects by giving the parameter a object.
$(function(){
$('div#menu li').myEffects({startOpacity: 0.8, hoverOpacity: 0.1})
;});
Its really simple to create a plugin for yourself! Try it! If there is anything you do not understand on this tutorial, please feel free to post these question out! Hope this help! You can download the test files from test-files-for-plug-in-tutorial!