Created
August 6, 2012 19:04
-
-
Save akdetrick/3277588 to your computer and use it in GitHub Desktop.
jquery plugin template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* =========================================================== | |
* jQuery plugin template (inspired by bootstrap tooltip and popover) | |
* | |
* easy inheritance, mutability, and method access via the | |
* magic of Objects | |
* | |
* plugin methods are all in one object, so | |
* you can extend plugins by $extend()'ing prototypes. | |
* | |
* stores plugin and its methods in a data attribute: | |
* $('#element').data('myPlugin').anyPluginMethod(); | |
* | |
* you can access the prototype at any time to add methods | |
* programmatically: | |
* $.fn.myPlugin.Constructor.newMethod = function() { ... } // before invocation | |
* $('#element').data('myPlugin').newMethod = function() { ... } // after invocation | |
* | |
* for more info, see the bootstrap JS readme: | |
* https://github.com/twitter/bootstrap/blob/master/js/README.md | |
* =========================================================== */ | |
!function ($) { | |
PLUGIN_NAME = 'pluginName'; | |
/** | |
* PUBLIC CLASS DEFINITION | |
*/ | |
var MyPlugin = function ( element, options ) { | |
this._init(element, options) | |
} | |
/** | |
* PLUGIN METHODS | |
*/ | |
// you can also extend from another similarly written plugin like so: | |
// MyPlugin.prototype = $.extend({}, $.fn.otherPlugin.Constructor.prototype, { | |
MyPlugin.prototype = { | |
constructor: MyPlugin, | |
myMethod: function () { | |
}, | |
/** | |
* @function getOptions | |
* looks for 'defaults' property in $.fn.plugin as default options | |
* extends with options passed in at plugin invokation | |
* | |
* @reutnrs {object} plugin options | |
*/ | |
getOptions: function (options) { | |
return $.extend({}, $.fn[PLUGIN_NAME].defaults, options); | |
}, | |
/** | |
* @function _init | |
* initializes plugin | |
* use the plugin interface; don't call this directly. | |
* | |
* @param {jquery dom} element | |
* @param {object} options | |
*/ | |
_init: function(element, options) { | |
var self = this; | |
// set some public plugin properties | |
this.options = this.getOptions(options); // plugin options | |
this.$element = $(element); // element plugin was applied to | |
// DOM manipulation... | |
// event bindings... | |
// etc. | |
} | |
}; | |
/** | |
* PLUGIN DEFINITION | |
*/ | |
// if extending from another plugin, merge in new options like so: | |
// $.fn.[PLUGIN_NAME].defaults = $.extend({} , $.fn.otherPlugin.defaults, { | |
$.fn[PLUGIN_NAME] = function (options) { | |
return this.each(function () { | |
var $this = $(this), | |
data = $this.data(PLUGIN_NAME); | |
if (!data) $this.data(PLUGIN_NAME, (data = new MyPlugin(this, options))) | |
}) | |
} | |
$.fn[PLUGIN_NAME].Constructor = MyPlugin; | |
$.fn[PLUGIN_NAME].defaults = { | |
option: 'foo', | |
isBoolean: true | |
}; | |
}(window.jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment