How to create plugins and extend jQuery.

1. GROWING JQUERY
How to extend jQuery for your needs

2. jQuery!
Plugins World
Domination

3. Attack of the Libraries!

4. Mad Scientist

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

6. Cut & Paste

7. Plugins!

8. Easy as baking cookies!
“How can I limit the user to only select up to 3 checkboxes?”
Boring Method Way Cooler Method
$(quot;input:checkboxquot;).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(quot;:checkedquot;).length<=n;
} });
}); };
$(quot;input:checkboxquot;).limit(3);

9. 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();
};

10. 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() || ‚‛ )‛;

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

12. Questions?
Sean Catchpole sean@sunsean.com