Your SlideShare is downloading. ×
Jquery Plugin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery Plugin

536
views

Published on

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

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

Published in: Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
536
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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); } } });

×