jQuery Plugin Boilerplate w/comments


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // jQuery Plugin Boilerplate
  2. // A boilerplate for kick-starting jQuery plugins development
  3. // version 1.2, April 29th, 2011
  4. // by Stefan Gabos
  5. // with help from Steven Black, Rob Lifford
  6.  
  7. // remember to change every instance of "pluginName" to the name of your plugin!
  8. (function($) {
  9.  
  10. // here it goes!
  11. $.fn.pluginName = function(method) {
  12.  
  13. // plugin's default options
  14. var defaults = {
  15.  
  16. foo: 'bar'
  17.  
  18. }
  19.  
  20. // this will hold the merged default and user-provided properties
  21. // you will have to access the plugin's properties through this object!
  22. // settings.propertyName
  23. var settings = {}
  24.  
  25. // public methods
  26. // to keep the $.fn namespace uncluttered, collect all of the plugin's methods in an object literal and call
  27. // them by passing the string name of the method to the plugin
  28. //
  29. // public methods can be called as
  30. // $(selector).pluginName('methodName', arg1, arg2, ... argn)
  31. // where "pluginName" is the name of your plugin and "methodName" is the name of a function available in
  32. // the "methods" object below; arg1 ... argn are arguments to be passed to the method
  33. //
  34. // or, from within the plugin itself, as
  35. // methods.methodName(arg1, arg2, ... argn)
  36. // where "methodName" is the name of a function available in the "methods" object below
  37. var methods = {
  38.  
  39. // this the constructor method that gets called when the object is created
  40. init : function(options) {
  41.  
  42. // the plugin's final properties are the merged default and user-provided properties (if any)
  43. // this has the advantage of not polluting the defaults, making the same instace re-usable with
  44. // new options; thanks to Steven Black for suggesting this
  45. settings = $.extend({}, defaults, options)
  46.  
  47. // iterate through all the DOM elements we are attaching the plugin to
  48. return this.each(function() {
  49.  
  50. var
  51. $element = $(this), // reference the jQuery version of the current DOM element
  52. element = this; // reference to the actual DOM element
  53.  
  54. // code goes here
  55.  
  56. });
  57.  
  58. },
  59.  
  60. // a public method. for demonstration purposes only - remove it!
  61. foo_public_method: function() {
  62.  
  63. // code goes here
  64.  
  65. }
  66.  
  67. }
  68.  
  69. // private methods
  70. // these methods can be called only from within the plugin
  71. //
  72. // private methods can be called as
  73. // helpers.methodName(arg1, arg2, ... argn)
  74. // where "methodName" is the name of a function available in the "helpers" object below; arg1 ... argn are
  75. // arguments to be passed to the method
  76. var helpers = {
  77.  
  78. // a private method. for demonstration purposes only - remove it!
  79. foo_private_method: function() {
  80.  
  81. // code goes here
  82.  
  83. }
  84.  
  85. }
  86.  
  87. // if a method as the given argument exists
  88. if (methods[method]) {
  89.  
  90. // call the respective method
  91. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  92.  
  93. // if an object is given as method OR nothing is given as argument
  94. } else if (typeof method === 'object' || !method) {
  95.  
  96. // call the initialization method
  97. return methods.init.apply(this, arguments);
  98.  
  99. // otherwise
  100. } else {
  101.  
  102. // trigger an error
  103. $.error( 'Method "' + method + '" does not exist in pluginName plugin!');
  104.  
  105. }
  106.  
  107. }
  108.  
  109. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.