jQuery Plugin

889 views

Published on

This was my presentation at Silicon Valley Code Camp 09. The material can be downloaded from : http://my/personal/rbiggs/Blog/default.aspx

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
889
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery Plugin

  1. 1. jQuery Plugins <ul><li>Authoring Code for Reuse </li></ul>
  2. 2. Modularization <ul><li>Write once, throw it away. </li></ul><ul><li>Write once use it again. </li></ul><ul><li>Initial cost in time to implement, savings realized later. </li></ul>
  3. 3. jQuery Integration <ul><li>Attach it directly to the jQuery object. </li></ul><ul><li>$.plugIn1 = function() { </li></ul><ul><ul><li>console.log(&quot;This is plugin ONE!&quot;); </li></ul></ul><ul><ul><li>}; </li></ul></ul>
  4. 4. <ul><li>Put your code inside a jQuery closure: </li></ul><ul><li>(function($) { </li></ul><ul><li>// Define method here. </li></ul><ul><li>$.plugIn2 = function() { </li></ul><ul><li>console.log(&quot;Plugin TWO is working!&quot;); </li></ul><ul><li>}; </li></ul><ul><li>})(jQuery); </li></ul>
  5. 5. <ul><li>Use jQuery’s extend method: </li></ul><ul><li>$.fn.extend({ </li></ul><ul><li>plugIn4 : function() { </li></ul><ul><ul><li>this.plugIn4.number = 1; </li></ul></ul><ul><ul><ul><li>return this.each(function(){ </li></ul></ul></ul><ul><ul><li> console.log(&quot;This is element number: &quot; </li></ul></ul><ul><ul><li>+ $.fn.plugIn4.number ); </li></ul></ul><ul><li> $.fn.plugIn4.number += 1; </li></ul><ul><li> }); </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul>
  6. 6. <ul><li>We can enclose the extended plugin in a jQuery closure and give it options: </li></ul><ul><li>(function($) { </li></ul><ul><ul><li>$.fn.extend({ </li></ul></ul><ul><ul><li>hilite : function(options) { </li></ul></ul><ul><ul><ul><ul><li>return this.each(function() { </li></ul></ul></ul></ul><ul><ul><li> // Define what you want to do with your items. </li></ul></ul><ul><li> }); </li></ul><ul><li> } </li></ul><ul><ul><li>}); </li></ul></ul><ul><li>})(jQuery); </li></ul>
  7. 7. <ul><li>Attaching code directly to the jQuery object is the most limited type of plugin. This is a very poor choice. </li></ul><ul><li>Using a jQuery closure provides namespacing, but lacks built-in jQuery functionality. This is appropriate for many types of widgets </li></ul><ul><li>Using the jQuery extend method gives your plugin all the built-in power that native jQuery methods have. </li></ul>
  8. 8. We’re Hiring! <ul><li>Bee Tan, Hiring Manager </li></ul><ul><li>510 307-8225 </li></ul>

×