Your SlideShare is downloading. ×
0
Making a simple jQuery plug-in Dylan Fogarty-MacDonald http://dylanfm.com @dylanfm
jQuery jquery.com A Javascript library.
jQuery plug-ins Two types of plug-ins:  Utility functions jQuery.map( array, callback ) jQuery commands $( " p "...
An example of writing a little plug-in Spock  * A jQuery command which will (hopefully) find proper nouns in the elements'...
Steps <ul><li>Create a file for the plug-in </li></ul>
1. Create a file for the plug-in Naming convention: jquery.plug-in-name.js In Spock's case:  jquery.spock.js
Steps <ul><li>Create a file for the plug-in
Make a closure </li></ul>
2. Make a closure All plug-in code should be within a closure. Pass  jQuery  to the closure and alias it to  $ . This allo...
Steps <ul><li>Create a file for the plug-in
Make a closure
Define the jQuery command </li></ul>
3. Define the jQuery command Extend the  $.fn  object. * (function ($) { $.fn.extend({ spock: function() { // Stop. Hammer...
Steps <ul><li>Create a file for the plug-in
Make a closure
Define the jQuery command
Return the jQuery wrapped set from function body </li></ul>
4. Return jQuery wrapped set jQuery hackers don't want their chains broken. $(&quot;#jQuery&quot;) .find(&quot;haxors&quot...
Steps <ul><li>Create a file for the plug-in
Make a closure
Define the jQuery command
Upcoming SlideShare
Loading in...5
×

Making a simple jQuery plug-in

3,144

Published on

A lightning demo I did at RoRO (Ruby on Rails Oceania) in June 2009.

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,144
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Making a simple jQuery plug-in"

  1. 1. Making a simple jQuery plug-in Dylan Fogarty-MacDonald http://dylanfm.com @dylanfm
  2. 2. jQuery jquery.com A Javascript library.
  3. 3. jQuery plug-ins Two types of plug-ins: Utility functions jQuery.map( array, callback ) jQuery commands $( &quot; p &quot; ).click( function )
  4. 4. An example of writing a little plug-in Spock * A jQuery command which will (hopefully) find proper nouns in the elements' text and wrap them in a span with a class of keyword. $( &quot; p&quot;).spock(); * I was watching an episode of Star Trek at the time.
  5. 5. Steps <ul><li>Create a file for the plug-in </li></ul>
  6. 6. 1. Create a file for the plug-in Naming convention: jquery.plug-in-name.js In Spock's case: jquery.spock.js
  7. 7. Steps <ul><li>Create a file for the plug-in
  8. 8. Make a closure </li></ul>
  9. 9. 2. Make a closure All plug-in code should be within a closure. Pass jQuery to the closure and alias it to $ . This allows you to safely use $ within your plug-in code (and not worry about clashing with other libraries or frameworks who use $ too). (function ($) { // 1227 plug-1n c0dez go here })(jQuery);
  10. 10. Steps <ul><li>Create a file for the plug-in
  11. 11. Make a closure
  12. 12. Define the jQuery command </li></ul>
  13. 13. 3. Define the jQuery command Extend the $.fn object. * (function ($) { $.fn.extend({ spock: function() { // Stop. Hammertime! } }); })(jQuery); * $.fn is an alias for the prototype property of the jQuery constructor function.
  14. 14. Steps <ul><li>Create a file for the plug-in
  15. 15. Make a closure
  16. 16. Define the jQuery command
  17. 17. Return the jQuery wrapped set from function body </li></ul>
  18. 18. 4. Return jQuery wrapped set jQuery hackers don't want their chains broken. $(&quot;#jQuery&quot;) .find(&quot;haxors&quot;) .give(&quot;wine&quot;) .and(&quot;cheese&quot;); Return a jQuery wrapped set so your plug-in can take part in the chain: return $(this);
  19. 19. Steps <ul><li>Create a file for the plug-in
  20. 20. Make a closure
  21. 21. Define the jQuery command
  22. 22. Return the jQuery wrapped set from function body
  23. 23. Set up options hash </li></ul>
  24. 24. 5. Set up options hash Users of the plug-in will want to configure it. Set up a hash of defaults and allow them to be overridden by options passed to the plug-in function when it's called. $(&quot;p&quot;).spock({ spanClass: &quot;encino-man&quot; });
  25. 25. 5. Set up options hash (function ($) { var opts; $.fn.extend({ spock: function( options ) { opts = $.extend({},$.fn.spock.defaults,options); } }); $.fn.spock.defaults = { spanClass: &quot;keyword&quot; }; })(jQuery);
  26. 26. Steps <ul><li>Create a file for the plug-in
  27. 27. Make a closure
  28. 28. Define the jQuery command
  29. 29. Return the jQuery wrapped set from function body
  30. 30. Set up options hash
  31. 31. Private methods </li></ul>
  32. 32. 6. Private methods $.fn.extend({ spock: function(options) { opts = $.extend({},$.fn.spock.defaults,options); return this.each(processElements); } }); function processElements () { // Frodo, don't put on the ring }
  33. 33. Steps <ul><li>Create a file for the plug-in
  34. 34. Make a closure
  35. 35. Define the jQuery command
  36. 36. Return the jQuery wrapped set from function body
  37. 37. Set up options hash
  38. 38. Private methods
  39. 39. Events </li></ul>
  40. 40. 7. Events Your users will probably want to customise functionality. Assign a private method to a default option. Call the method through its option property. This way the users can hook into events via the options hash. $(&quot;p&quot;).spock({ processKeyword: function (match) { return &quot;<strong>&quot;+match+&quot;</strong>&quot;; } });
  41. 41. 7. Events $.fn.spock.defaults = { processKeyword: processKeyword }; function processElements () { // ... return opts.processKeyword(match); // ... } function processKeyword (match) { // Kiss my aura, Dora. }
  42. 42. Thanks The Spock code is on Github: http://github.com/DylanFM/jquery-spock I'll put these slides online and tweet it through: @dylanfm
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×