jQuery Plugins Intro

1,608 views
1,540 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,608
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery Plugins Intro

  1. 1. Writing jQuery Plugins Casey West casey@geeknest.com http://caseywest.com
  2. 2. Get Setup (function($) { // Put your plugin here. })(jQuery);
  3. 3. Extend jQuery $.extend({ doImportantWork: function(){ console.log( “I’m working hard!”); } });
  4. 4. Use It $.doImportantWork();
  5. 5. Extend jQuery Selector $.fn.extend({ rise: function(options) { }, fall: function(options) { } });
  6. 6. Use It $(‘#quote’).rise(); $(‘#quote’).fall(); $(‘.callouts’).rise(); $(‘.callouts’).fall();
  7. 7. Get Ready for Selectors (function($) { $(document).ready(function(){ // We’re ready to spice it up! }); })(jQuery);
  8. 8. Click It $(document).ready(function() { var $rise = $(‘.callout a.rise’); $rise.click(function(e) { e.preventDefault(); $(this).parents(‘.callout’) .rise(); }); });
  9. 9. Get Options $(‘.callout’).rise({ elevation: 10 });
  10. 10. Handling Options $.fn.extend({ rise: function(options) { var defaults = { elevation: 10, speed: 0.4, onComplete: null }; var o = $.extend(defaults, options); } });
  11. 11. Plugging It In return $(this).each(function(){ var $elem = $(this); $elem.css({ backgroundColor: ‘#ffc’ }); });
  12. 12. Plugging It In return $(this).each(function(){ var $elem = $(this), scale = 1 + (o.elevation/100), blur = o.elevation * 4, alpha = (blur * 2) / 100; $elem.css({ '-webkit-transform': 'scale(' + scale + ')', '-webkit-transition': 'all ' + o.speed + 's', '-webkit-box-shadow': '0px 0px ' + blur +'px rgba(0,0,0,' + alpha + ')' }); if (o.onComplete) o.onComplete($elem); });
  13. 13. Turn It On (HTML) <h1>I Like Hovercrafts</h1> <div class="callout" id="important"> <p>You need to know about this!</p> </div> <p> Listen, you should definitely <a href="#important" class="rise"> lift it up!</a> </p>
  14. 14. Turn It On (JavaScript) $('a.rise').click(function(e) { e.preventDefault(); e.stopImmediatePropagation(); var callout = $(this).attr('href'); $(callout).rise(); });
  15. 15. Customize It $(callout).rise({ elevation: 10, speed: 1 });
  16. 16. It’s On. Do Stuff onComplete: function ($elem) { $elem.prepend( $('<a></a>').hide().fadeIn().addClass('fall') .click(function(){ $elem.fall({ onComplete: function($elem) { $elem.find('.fall').fadeOut().remove(); } }); // END $elem.fall() }) // END $(‘a.fall’).click() ); // END $elem.prepend() }
  17. 17. Action Packed See supporting source code...
  18. 18. Questions?
  19. 19. Thanks!

×