Upload
gueste8d8bc
View
2.613
Download
0
Tags:
Embed Size (px)
DESCRIPTION
How to create plugins and extend jQuery.
Citation preview
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‛
});