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 = ...
$.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...
rockycode.com/blog/tech/jquery/
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Writing Jquery Plugins
Upcoming SlideShare
Loading in …5
×

Writing Jquery Plugins

715 views
663 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
715
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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/

×