jQuery Plugin

1,370 views
1,282 views

Published on

How to Create Your Own jQuery Plugin

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

No Downloads
Views
Total views
1,370
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Show Some Demos of Plugins
  • Show jquery.devlink.js
  • jQuery Plugin

    1. 1. How to Create <br />Your Own <br />jQuery Plugin <br />by Elijah Manor<br />
    2. 2. Who Am I?<br />Sommet Group, offering expertise in payroll, human resources, technology, risk management and insurance to help simplify your business.  <br />Elijah Manor<br /><ul><li>elijah.manor@gmail.com
    3. 3. @elijahmanor
    4. 4. http://elijahmanor.com</li></li></ul><li>Why Create a jQuery Plugin?<br /><ul><li>Reuse, Reuse, & Reuse</li></ul> <br /><ul><li>Encapsulation</li></ul> <br /><ul><li>Prevent Collisions using Namespaces
    5. 5. They are easy to create
    6. 6. Because they are soooo cool </li></ul> <br /> <br /> <br />@elijahmanor<br />
    7. 7. How Does a jQuery Plugin Work?<br />Plugins are passed the this object which references the jQuery object<br /> <br />Plugin manipulates the DOM<br /> <br />When finished, the Plugin should return this to facilitate chaining<br /> <br />@elijahmanor<br />
    8. 8. Plugin Declaration<br /><ul><li>jQuery.prototype.tooltip= function(options) { </li></ul> <br /><ul><li>$.fn.tooltip = function(options) {  </li></ul> <br /><ul><li>Self Invoking Anonymous Function</li></ul> <br />  (function($){<br />    $.fn.tooltip = <br />      function(options) { ... } <br />  })(jQuery); <br />@elijahmanor<br />
    9. 9. Plugin Parameters: Part 1<br /><ul><li>You could pass individual parameters to your jQueryPlugin</li></ul>$.fn.tooltip = <br /> function(text, color) {};<br /> <br />  $(&apos;#helloWorld&apos;)<br />   .tooltip(&apos;Hello World!&apos;, <br /> &apos;#cccccc&apos;);<br /> <br /><ul><li>However, I am more a proponent of passing a JSON object...</li></ul> <br />@elijahmanor<br />
    10. 10. Plugin Parameters: Part 2<br /><ul><li>Provide a set of Public Accessible Default Plugin Settings for User to Manipulate
    11. 11. Accept Custom Settings from the User
    12. 12. Merge the Default Settings and Custom Settings and use the Union within the Plugin</li></ul> <br />  $.fn.tooltip = function(options){};<br /> <br />  $(&apos;#helloWorld&apos;).tooltip({<br />    text: &apos;Hello World!&apos;,<br />    color: &apos;#cccccc&apos;<br />  });  <br /> <br /> <br />@elijahmanor<br />
    13. 13. For Each<br /><ul><li>Note: The Plugin may have been passed one or more elements</li></ul> <br /><ul><li>A common technique is to use jQuery'seachmethod to enumerate through the elements</li></ul> <br />  this.each(function() {      var $this = $(this);      //etc...<br />  }  <br />@elijahmanor<br />
    14. 14. Public Functions<br /> $.fn.tooltip = function(options) {  return this.each(function() {    var$this = $(this);    varmessage = <br />      $.fn.tooltip.public();  });};$.fn.tooltip.public = function(){ <br />  return &apos;Hello World!&apos;;};<br />@elijahmanor<br />
    15. 15. Private Functions<br /> (function($) {  $.fn.tooltip = function(options) { <br />    varmessage = private();  };    function private() {<br />    return &apos;Hello World!&apos;;  };})(jQuery);<br />@elijahmanor<br />
    16. 16. Support the Metadata Plugin: Part 1<br /><ul><li>Provide Additional Information to a particular element… </li></ul> &lt;li<br /> class=&quot;someclass{some: &apos;data&apos;}&quot;&gt; <br /> &lt;/li&gt; &lt;lidata=&quot;{some:&apos;random&apos;, <br />json: &apos;data&apos;}&quot;&gt;&lt;/li&gt;Etc…<br />@elijahmanor<br />
    17. 17. Support the Metadata Plugin: Part 2<br />  $.fn.tooltip = function(options) {     var opts = $.extend({},   <br />      $.fn.tooltip.defaults, options);    return this.each(function() {      var $this = $(this);      //Element Specific Options      var o= $.meta ? $.extend({}, <br /> opts, $this.data()):opts;<br /> //Plugin Logic Here…<br />    } <br />  }<br />@elijahmanor<br />
    18. 18. Allow for Chaining!<br /><ul><li>As with most jQuery functions and Plugins, it is desirable to return the jQuery object to facilitate chaining</li></ul>  $(‘a’).css(‘color’, ‘red’).fadeIn();<br />  (function($){<br />    $.fn.tooltip = function(options){       return this; //chainability      }    })(jQuery); <br />@elijahmanor<br />
    19. 19. More jQueryPlugins<br /><ul><li>jToolTipjQueryPlugin
    20. 20. jGalleryjQueryPlugin
    21. 21. SommetGroupjQueryPlugin</li></ul> <br />@elijahmanor<br />
    22. 22. Questions?<br />Elijah Manor<br /><ul><li>http://speakerrate.com/elijahmanor
    23. 23. elijah.manor@gmail.com
    24. 24. @elijahmanor
    25. 25. http://elijahmanor.com</li></ul>Individuals with a Relevant <br />Question will Receive a <br />Sommet Group<br />Concept, Code, Conquer <br />jQueryPlugin T-Shirt <br />

    ×