Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Plugins Intro

1,756 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

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!

×