Writing Jquery Plugins
Upcoming SlideShare
Loading in...5

Writing Jquery Plugins



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 ...

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.



Total Views
Views on SlideShare
Embed Views



3 Embeds 97

http://rockycode.com 93
http://www.rockycode.com 3
http://localhost 1



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.

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

Writing Jquery Plugins Writing Jquery Plugins Presentation Transcript

  • writing Jake Trent
  • $(“div”).debug(); jQuery.fn.debug = function() { /* ... */ alert(„debugging‟); /* ... */ };
  • (function($) { $.fn.feed_the_pig = function() { /* ... */ }; })(jQuery);
  • limit(parameter, parameter, parameter, parameter);
  • $.fn.invest = function(settings) { /* ... */ };
  • $.fn.wield = function(settings) { var opts = { weapon: „nunchuck‟, skill_level: „deft‟ }; var opts = $.extend(opts, settings); }; $(“div”).wield({ skill_level: „weak‟ });
  • $.fn.amuse = function(settings) { /* ... */ this.each(function () { /* todo: impl something gut-wrenching here */ }); };
  • $.fn.wield = function(settings) { /* ... */ return this; };
  • $.fn.wield.defaults = { weapon: „nunchuck‟, skill_level: „deft‟ }; $.fn.wield.level_up_skill = function () { /* ... */ };
  • 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
  • rockycode.com/blog/tech/jquery/