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