Day #7

Extending jQuery with custom plugins

Wildan Maulanawildan.m@openthinklabs.com

http://workshop.openthinklabs.com

#7

Overview

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

Why extend?

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●

The jQuery plugin authoring guidelinesNaming files and functions

● Prefix the filename with jquery.● Follow that with the name of the plugin.● Conclude with .js.

jquery.openthinklabs.utils.js

The jQuery plugin authoring guidelinesBeware the $

(function($){//// Plugin definition goes here//})(jQuery);

The jQuery plugin authoring guidelinesTaming 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});

The jQuery plugin authoring guidelinesTaming complex parameter lists

function complex(p1,p2,p3,p4,p5,p6,p7) {

complex(p1,options)function complex(p1,options) { var settings = $.extend({ option1: defaultValue1, option2: defaultValue2, option3: defaultValue3, option4: defaultValue4, option5: defaultValue5, option6: defaultValue6},options||{});// remainder of function...}

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

Q&A

Reference

● Jquery in Action, Bear Bibeault, Yehuda Katz, Manning