Simone (Demo) Gentili

implement a jquery plugin

sensorario@gmail.com

/* 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