GROWING JQUERY

How to extend jQuery for your needs

jQuery!

Plugins World

Domination

Attack of the Libraries!

Mad Scientist

Separating the Process

$(‚#id‛,‚div.class‛) $(…).show()

Selection Action

Selection Action jQuery

Cut & Paste

Plugins!

Easy as baking cookies!

$("input:checkbox").click(function(){

var boxes = $(‚input:checkbox‛);

if(boxes.filter(‚:checked‛)

.length < 3) {

this.checked = true;

}

});

jQuery.fn.limit = function(n) {

var self = this;

return this.click(function(){

return self

.filter(":checked").length<=n;

});

};

$("input:checkbox").limit(3);

Boring Method Way Cooler Method

“How can I limit the user to only select up to 3 checkboxes?”

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