jQuery BootCamp : Extending jQuery with Custom Plugins

1,459 views
1,367 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,459
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery BootCamp : Extending jQuery with Custom Plugins

  1. 1. #7 Day #7 Extending jQuery with custom plugins Wildan Maulana wildan.m@openthinklabs.com http://workshop.openthinklabs.com
  2. 2. Overview● Why to extend jQuery with custom code● The rules for effectively extending jQuery● Writing custom utility functions● Writing custom wrapper methods
  3. 3. Why extend?
  4. 4. The jQuery plugin authoring guidelines● Extending jQuery takes one of two forms: ● Utility functions defined directly on $ (an alias for jQuery) ● Methods to operate on a jQuery wrapped set (so- called jQuery commands)● Naming files and functions● Beware the $● Taming complex parameter lists●
  5. 5. The jQuery plugin authoring guidelines Naming files and functions● Prefix the filename with jquery.● Follow that with the name of the plugin.● Conclude with .js. jquery.openthinklabs.utils.js
  6. 6. The jQuery plugin authoring guidelines Beware the $ (function($){ // // Plugin definition goes here // })(jQuery);
  7. 7. The jQuery plugin authoring guidelines Taming complex parameter listsfunction complex(p1,p2,p3,p4,p5,p6,p7) { complex(valueA,null,null,null,null,null,valueB); complex(valueA,null,valueC,valueD,null,null,valueB); complex(valueA, {p7: valueB}); complex(valueA, { p3: valueC, p4: valueD, p7: valueB });
  8. 8. The jQuery plugin authoring guidelines Taming complex parameter listsfunction complex(p1,p2,p3,p4,p5,p6,p7) { function complex(p1,options) { complex(p1,options) var settings = $.extend({ option1: defaultValue1, option2: defaultValue2, option3: defaultValue3, option4: defaultValue4, option5: defaultValue5, option6: defaultValue6 },options||{}); // remainder of function... }
  9. 9. Writing custom utility functions$.say = function(what) { alert(I say +what); } jQuery.say = function(what) { alert(I say +what); } (function($){ $.say = function(what) { alert(I say +what); } })(jQuery);
  10. 10. Q&A
  11. 11. Reference● Jquery in Action, Bear Bibeault, Yehuda Katz, Manning

×