Simone (Demo) Gentili
implement a jquery plugin
/* this code goes in pluginName.js */(function($){ $.fn.pluginName = function(options) { this.each(function() {/* do code here*/ } };})(jQuery);
/* this code goes in the html document */$(selector).pluginName();
The base (what is this?)
(function($){ $.fn.pluginName = function(options) { this.each(function() {/* do code here*/ } };})(jQuery);
$(selector).pluginName();
The base
Here we can assignthe name at our pluginIn the plugin file
(function($){ $.fn.pluginName = function(options) { this.each(function() {/* do code here*/ } };})(jQuery);
$(selector).pluginName();
The base
And we can call itIn the web page
(function($){ $.fn.pulseEffect = function(options) { this.each(function() {/* do code here*/ } };})(jQuery);
$(selector).pulseEffect();
A concrete example: pulse effect?
What the plugin has to do?
$(this) .animate({'opacity':'0.2'},300) .animate({'opacity':'1.0'},300) .animate({'opacity':'0.2'},300) .animate({'opacity':'1.0'},300) .animate({'opacity':'0.2'},300) .animate({'opacity':'1.0'},300);
Refactoring (1/5)
a=Array(0.2,1.0); $(this) .animate({'opacity':a[0]},300) .animate({'opacity':a[1]},300) .animate({'opacity':a[0]},300) .animate({'opacity':a[1]},300) .animate({'opacity':a[0]},300) .animate({'opacity':a[1]},300);
Refactoring (2/5)
a=Array(0.2,1.0); for(i=0;i