Step by step: what we have to do for create jquery plugins.

1. Simone (Demo) Gentili implement a jquery plugin [email_address]

2. /* 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?)

3. (function($){ $.fn. pluginName = function(options) { this.each(function() { /* do code here*/ } }; })(jQuery); $(selector) . pluginName(); The base Here we can assign the name at our plugin In the plugin file

4. (function($){ $.fn. pluginName = function(options) { this.each(function() { /* do code here*/ } }; })(jQuery); $(selector) . pluginName(); The base And we can call it In the web page

5. (function($){ $.fn. pulseEffect = function(options) { this.each(function() { /* do code here*/ } }; })(jQuery); $(selector) . pulseEffect (); A concrete example: pulse effect?

6. 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);

7. 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);

8. Refactoring (2/5) a=Array(0.2,1.0); for(i=0;i<3;i++) $(this) .animate({'opacity':a[0]},300) .animate({'opacity':a[1]},300);

9. Refactoring (3/5) a=Array(0.2,1.0); for(i=0;i<3;i++) for(j=0;j<2;j++) $(this).animate({'opacity': a[j] },300);

10. Refactoring (4/5) a=Array(0.2,1.0); d=300; for(i=0;i<3;i++) for(j=0;j<2;j++) $(this).animate({'opacity':a[j]}, d );

11. Refactoring (5/5) a=Array(0.2,1.0); d=300; t=3; for(i=0;i<t;i++) for(j=0;j<2;j++) $(this).animate({'opacity':a[j]}, d );

12. Pameterize variables a=Array(0.2,1.0); d=300; t =3; for(i=0;i<t;i++) for(j=0;j<2;j++) $(this).animate({'opacity':a[j]},d);

13. With literal ... d = { 'start':0.2, 'end':1.0, 'times':3, 'delay':300 }; for(i=0,a=Array( d.start , d.end );i< d.times ;i++) for(j=0;j<2;j++) $(this).animate({'opacity':a[j]}, d.delay );

14. send parameters from html page $(selector).pulseEffect({ 'start':0.2, 'end':1.0, 'times':3, 'delay':300 });

15. Our plugin (function($){ $.fn.mioPulse = function( options ) { this.each(function() { d = options; for(i=0,a=Array( d.start , d.end );i< d.times ;i++) for(j=0;j<2;j++) $(this).animate({'opacity':a[j]}, d.delay ); }); }; })(jQuery); $(selector).pulseEffect({ 'start':0.2, 'end':1.0, 'times':3, 'delay':300 });

16. $(selector).pulseEffect(); We can use pulseEffect () with no parameters. But we have to tell our plugin to set all parameters as a default values.

17. $(selector).pulseEffect(); /* d stands for default (value) */ d = { 'times':2, 'startOp':0.3, 'endOp':1.0, 'delay':300 }; /* o stands for options */ o = (options==undefined)?d:options;

18. $(selector).mioPulse({'times':4}); We can use pulseEffect () with one parameters. But we have to tell our plugin to set some parameters as a default values.

19. $(selector).mioPulse({'times':4}); /* code for get default values */ if(o.times==undefined)o.times=d.times; if(o.startOp==undefined)o.startOp=d.startOp; if(o.endOp==undefined)o.endOp=d.endOp; if(o.delay==undefined)o.endOp=d.endOp; /* plugin ... */

20. Resuming ... d = { 'times':2, 'startOp':0.3, 'endOp':1.0, 'delay':300 }; o = (options==undefined)?d:options; if(o.times==undefined)o.times=d.times; if(o.startOp==undefined)o.startOp=d.startOp; if(o.endOp==undefined)o.endOp=d.endOp; if(o.delay==undefined)o.endOp=d.endOp; this.each(function() { for(i=0,a=Array(o.startOp,o.endOp);i<o.times;i++) { for(j=0;j<2;j++) { $(this).animate({ 'opacity':a[j] },o.delay); } } });