Your SlideShare is downloading. ×
Making a simple jQuery plug-in
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Making a simple jQuery plug-in

3,094
views

Published on

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

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,094
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Making a simple jQuery plug-in Dylan Fogarty-MacDonald http://dylanfm.com @dylanfm
  • 2. jQuery jquery.com A Javascript library.
  • 3. jQuery plug-ins Two types of plug-ins: Utility functions jQuery.map( array, callback ) jQuery commands $( " p " ).click( function )
  • 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. $( " p").spock(); * I was watching an episode of Star Trek at the time.
  • 5. Steps
    • Create a file for the plug-in
  • 6. 1. Create a file for the plug-in Naming convention: jquery.plug-in-name.js In Spock's case: jquery.spock.js
  • 7. Steps
    • Create a file for the plug-in
    • 8. Make a closure
  • 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. Steps
    • Create a file for the plug-in
    • 11. Make a closure
    • 12. Define the jQuery command
  • 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. Steps
    • Create a file for the plug-in
    • 15. Make a closure
    • 16. Define the jQuery command
    • 17. Return the jQuery wrapped set from function body
  • 18. 4. Return jQuery wrapped set jQuery hackers don't want their chains broken. $("#jQuery") .find("haxors") .give("wine") .and("cheese"); Return a jQuery wrapped set so your plug-in can take part in the chain: return $(this);
  • 19. Steps
    • Create a file for the plug-in
    • 20. Make a closure
    • 21. Define the jQuery command
    • 22. Return the jQuery wrapped set from function body
    • 23. Set up options hash
  • 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. $("p").spock({ spanClass: "encino-man" });
  • 25. 5. Set up options hash (function ($) { var opts; $.fn.extend({ spock: function( options ) { opts = $.extend({},$.fn.spock.defaults,options); } }); $.fn.spock.defaults = { spanClass: "keyword" }; })(jQuery);
  • 26. Steps
    • Create a file for the plug-in
    • 27. Make a closure
    • 28. Define the jQuery command
    • 29. Return the jQuery wrapped set from function body
    • 30. Set up options hash
    • 31. Private methods
  • 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. Steps
    • Create a file for the plug-in
    • 34. Make a closure
    • 35. Define the jQuery command
    • 36. Return the jQuery wrapped set from function body
    • 37. Set up options hash
    • 38. Private methods
    • 39. Events
  • 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. 7. Events $.fn.spock.defaults = { processKeyword: processKeyword }; function processElements () { // ... return opts.processKeyword(match); // ... } function processKeyword (match) { // Kiss my aura, Dora. }
  • 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