GROWING JQUERY
How to extend jQuery for your needs

jQuery!
Plugins World
Domination

Attack of the Libraries!

Mad Scientist

Separating the Process
Selection Action jQuery
Selection Action
 $(‚#id‛,‚div.class‛)  $(…).show()

Cut & Paste

Plugins!

Easy as baking cookies!
“How can I limit the user to only select up to 3 checkboxes?”
Boring Method Way Cooler Method
$(\"input:checkbox\").click(function(){ jQuery.fn.limit = function(n) {
var boxes = $(‚input:checkbox‛); var self = this;
if(boxes.filter(‚:checked‛) return this.click(function(){
.length < 3) { return self
this.checked = true; .filter(\":checked\").length<=n;
} });
}); };
$(\"input:checkbox\").limit(3);

Cute Plugins
$.fn.vals = function(){
var v=[];
this.each(function(){ v.push( $(this).val() ); });
return v;
});
$.fn.zebra = function(){
return this.filter(‚:odd‛)
.addClass(‚odd‛).end();
};

Extending jQuery
jQuery.expr[‘:’].mod = ‚i%(m[3]-0)==0‛;
jQuery.expr[‘:’].date =
‚/^\\\\s*\\\\d{2}\\\\/\\\\d{2}\\\\/\\\\d{4}\\\\s*$/
.test( jQuery(a).text() || ‚‛ )‛;

Simplicity
 $(…).idTabs(2);
 $(…).idTabs(‚default‛)
 $(…).idTabs(function(id){
alert(‚Clicked ‛+id);
});
 $(…).idTabs({
start: ‚default‛,
change: ‚false‛
});

Questions?
Sean Catchpole sean@sunsean.com