Growing jQuery
Upcoming SlideShare
Loading in...5
×
 

Growing jQuery

on

  • 4,475 views

How to create plugins and extend jQuery.

How to create plugins and extend jQuery.

Statistics

Views

Total Views
4,475
Views on SlideShare
4,469
Embed Views
6

Actions

Likes
3
Downloads
96
Comments
0

3 Embeds 6

http://www.slideshare.net 4
http://192.168.10.100 1
http://localhost 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Growing jQuery Growing jQuery Presentation Transcript

  • 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 $(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);
  • 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