Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Plugin Development

1,497 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

jQuery Plugin Development

  1. 1. Plugin Development <br />By: Nathan SegoTwitter: nathansego<br />http://typewith.me/jqueryDenver-plugins<br />
  2. 2. Little about me<br />
  3. 3. What we will go over<br />What is a plugin?<br />Write your first plugin<br />Using Plugins<br />Finding Plugins<br />The plugin Pattern<br />Plugin Options<br />Private Functions<br />Interacting wit the stack<br />
  4. 4. What exactly is a plugin?<br />A plugin is a jQuery method defined externally to jQuery Core<br />A collection of one or more methods<br />Extends the core jQuery prototype object<br />
  5. 5. Your First Plugin$(‘p’).elementCount();<br />$.fn.elementCount= function() {<br /> alert(‘Element count: ’ +<br />this.length);<br />};<br />$(‘p’).elementCount();<br />
  6. 6. Plugins and Iteration<br />$.fn.elementCount = function() {<br /> // “this” is a jQuery Object<br />this.each(function(i) {<br /> $(this).html($(this).html() +‘ ‘+ i);<br /> });<br />};<br />$(‘p’).elementCount();<br />
  7. 7. Plugins and Chaining<br />// Plugin is required to return this<br />$.fn.elementCount = function() {<br /> return this;<br />};<br />$(‘p’).elementCount().addClass(‘Foo’);<br />
  8. 8. Plugins and Chaining<br />// Plugin is required to return this<br />$.fn.stPatricks = function() {<br /> return this.css(‘color’, ‘green’);<br />};<br />$(‘p’).stPatricks().addClass(‘Foo’);<br />
  9. 9. Using Plugins<br />
  10. 10. Using Plugins<br />Include jquery.plugin.js in your project after jQuery & before use <br />Call jQuery Plugin Method<br />
  11. 11. Finding Plugins<br />http://plugin.jquery.com<br />Google Code<br />GitHub<br />Signs of a poorly written jQuery Plugin(Remy Sharp: http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ )<br />
  12. 12. The Plugin Pattern<br />
  13. 13. The plugin pattern<br />Allows safe usage of $ variable<br />Encapsulates the plugin into a closure<br />
  14. 14. The plugin pattern<br />(function($) {<br /> $.fn.elementCount = function() {<br /> return this.each(function(i) {<br /> $(this).html($(this).html() +‘ ‘+ i);<br /> });<br /> };<br />})(jQuery);<br />$(‘p’).elementCount();<br />
  15. 15. Plugin Options<br />
  16. 16. Plugin Options<br />Options can be<br />Primitives <br />Callback functions<br />Default Options<br />Storing Options with .data()<br />
  17. 17. The plugin pattern<br />(function($) {<br /> $.fn.elementCount = function(options) {<br /> return this.each(function(i) {<br />var j = i + options.start;<br /> $(this).html($(this).html() +‘ ‘+ j);<br /> });<br /> };<br />})(jQuery);<br />$(‘p’).elementCount({start: 10});<br />
  18. 18. The plugin pattern<br />// Pass a callback function into the plugin<br />(function($) {<br /> $.fn.elementCount = function(options) {<br />var j;<br />options.begin();<br /> return this.each(function(i) {<br /> j = i + options.start;<br /> $(this).html($(this).html() +‘ ‘+ j);<br /> });<br /> };<br />})(jQuery);<br />$(‘p’).elementCount({<br /> start: 10,<br />begin: function() {alert(‘BEGIN!’)}<br />});<br />
  19. 19. The plugin pattern<br />// Pass a callback function into the plugin<br />(function($) {<br /> $.fn.elementCount = function(options) {<br />var j;<br /> if( $.isFunction(options.begin) ){<br />options.begin();<br />}<br /> return this.each(function(i) {<br /> j = i + options.start;<br /> $(this).html($(this).html() +‘ ‘+ j);<br /> });<br /> };<br />})(jQuery);<br />$(‘p’).elementCount({<br /> start: 10,<br />begin: function() {alert(‘BEGIN!’)}<br />});<br />
  20. 20. The plugin pattern<br />// Set a default option<br />(function($) {<br />$.elementCount.default = { start: 0 };<br /> $.fn.elementCount = function(options) {<br />options = $.extend({},<br /> $.elementCount.default, options);<br /> return this.each(function(i) {<br />var j = i + options.start;<br /> $(this).html($(this).html() +‘ ‘+ j);<br /> });<br /> };<br />})(jQuery);<br />$(‘p’).elementCount();<br />
  21. 21. Private Functions<br />
  22. 22. Private Functions<br />(function($) {<br /> $.fn.elementCount = function(options) {<br />var j;<br /> return this.each(function(i) {<br /> j = doCount(options.start,i);<br /> $(this).html($(this).html() +‘ ‘+ j);<br /> });<br /> };<br />function doCount(start,i) {<br /> return start + i;<br /> }<br />})(jQuery);<br />doCount(10,20); // Method not found<br />
  23. 23. Interacting with the stack<br />
  24. 24. Private Functions<br />(function($) {<br />$.fn.cousins = function() {<br />varnewBucket = <br />this.parent().siblings().children();<br /> return <br />this.pushStack(newBucket,”cousins”,””);<br /> };<br />})(jQuery);<br />$(‘p’).cousins();<br />
  25. 25. What we will go over<br />What is a plugin?<br />Write your first plugin<br />Using Plugins<br />Finding Plugins<br />The plugin Pattern<br />Plugin Options<br />Private Functions<br />Interacting wit the stack<br />
  26. 26. Questions & Demo<br />http://jsbin.com/jqueryDenver-plugins/edit<br />

×