Jquery Plugin

864 views

Published on

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

Published in: Design
  • Be the first to comment

Jquery Plugin

  1. 1. Simone (Demo) Gentili implement a jquery plugin [email_address]
  2. 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. 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. 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. 5. (function($){ $.fn. pulseEffect = function(options) { this.each(function() { /* do code here*/ } }; })(jQuery); $(selector) . pulseEffect (); A concrete example: pulse effect?
  6. 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. 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. 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. 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. 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. 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. 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. 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. 14. send parameters from html page $(selector).pulseEffect({ 'start':0.2, 'end':1.0, 'times':3, 'delay':300 });
  15. 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. 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. 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. 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. 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. 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); } } });

×