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.

Writing Jquery Plugins

831 views

Published on

Jquery has made developing javascript fun and enjoyable. It is a fantastic library that essentially allows the creation of library extensions on top of it via plugins. Jquery plugins are surprisingly easy to write and elegant to read and use. Here are a few tips on where to find good plugin candidates and some design principles for plugins. You can find the demo plugin used in conjunction with this presentation at rockycode.com.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Writing Jquery Plugins

  1. 1. writing Jake Trent
  2. 2. $(“div”).debug(); jQuery.fn.debug = function() { /* ... */ alert(„debugging‟); /* ... */ };
  3. 3. (function($) { $.fn.feed_the_pig = function() { /* ... */ }; })(jQuery);
  4. 4. limit(parameter, parameter, parameter, parameter);
  5. 5. $.fn.invest = function(settings) { /* ... */ };
  6. 6. $.fn.wield = function(settings) { var opts = { weapon: „nunchuck‟, skill_level: „deft‟ }; var opts = $.extend(opts, settings); }; $(“div”).wield({ skill_level: „weak‟ });
  7. 7. $.fn.amuse = function(settings) { /* ... */ this.each(function () { /* todo: impl something gut-wrenching here */ }); };
  8. 8. $.fn.wield = function(settings) { /* ... */ return this; };
  9. 9. $.fn.wield.defaults = { weapon: „nunchuck‟, skill_level: „deft‟ }; $.fn.wield.level_up_skill = function () { /* ... */ };
  10. 10. Power Plugin: Wall Street Bull: http://www.flickr.com/photos/randomurl/438112948/ http://www.flickr.com/photos/thenails1/3407072012/ CC Attribution - Zevotron's photostream CC Attribution - thenails' photostream Extension Cord: Batmobile: http://www.flickr.com/photos/a_mason/7251818/ http://www.flickr.com/photos/ozzywu1974/921426847/ CC Attribution - Andrew Mason's photostream CC Attribution - JOE WU's photostream Generator: Rollercoaster Loop: http://www.flickr.com/photos/kylemacdonald/60760497/ http://www.flickr.com/photos/daveynin/4488753036/ CC Attribution - kylemac's photostream CC Attribution - daveynin's photostream Nuclear Powerplant: Chain: http://www.flickr.com/photos/senoranderson/259110332/ http://www.flickr.com/photos/sudhamshu/3240899911/ CC Attribution - PhotoDu.de's photostream CC Attribution - Sudhamshu's photostream Explosion: Street Fighter: http://www.flickr.com/photos/ctbto/4926598654/ http://www.flickr.com/photos/agius/3564611725/ Public domain CC Attribution - agius' photostream Lego Millenium Falcon: Rod Johnson Bobble: http://www.flickr.com/photos/andresrueda/3671175770/ Photo by David Hale, used with permission CC Attribution - Andres Rueda's photostream Baseball: Playmobile Suits: http://www.flickr.com/photos/emples/4567228276/ http://www.flickr.com/photos/tico24/93036054/ CC Attribution - emples' photostream CC Attribution - Plinkk's photostream Capitol: Star Wars Cookie: http://www.flickr.com/photos/cloudsoup/217776387/in/photostream/ http://www.flickr.com/photos/betsyweber/4961703633/ CC Attribution - cloudsoup's photostream CC Attribution - betsyweber's photostream Village People: Piggy Bank: http://www.flickr.com/photos/dylwalters/1198643171/ http://www.flickr.com/photos/alancleaver/4279482716/ CC Attribution - The Dilly Lama's photostream CC Attribution - alancleaver_2000's photostream Rockycode background and logo: Foreclosure: By Jake Trent http://www.flickr.com/photos/respres/2539334956/ CC Attribution - respres' photostream Bebas Neue font: By Dharama Type - dharmatype.com – free for commercial, non-commercial use One Finger: http://www.flickr.com/photos/sudhamshu/3202963823/ Anonymous Pro font: CC Attribution - Sudhamshu's photostream By Mark Simonson, SIL Open Font License, Version 1.1 – free when not sold as a font Thanks to my family for their support, Dan Harmer for 10 billable hours, coworkers for their good ideas
  11. 11. rockycode.com/blog/tech/jquery/

×