1. #7
Day #7
Extending jQuery with custom plugins
Wildan Maulana
wildan.m@openthinklabs.com
http://workshop.openthinklabs.com

2. Overview
● Why to extend jQuery with custom code
● The rules for effectively extending jQuery
● Writing custom utility functions
● Writing custom wrapper methods

3. Why extend?

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. 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. The jQuery plugin authoring guidelines
Beware the $
(function($){
//
// Plugin definition goes here
//
})(jQuery);

7. The jQuery plugin authoring guidelines
Taming complex parameter lists
function 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. The jQuery plugin authoring guidelines
Taming complex parameter lists
function 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. 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. Q&A

11. Reference
● Jquery in Action, Bear Bibeault, Yehuda Katz,
Manning