Skip to content

Instantly share code, notes, and snippets.

@akdetrick
Created August 6, 2012 19:04
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save akdetrick/3277588 to your computer and use it in GitHub Desktop.
Save akdetrick/3277588 to your computer and use it in GitHub Desktop.
jquery plugin template
/* ===========================================================
* 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