(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery'], factory); } else { // Browser globals factory(root.jQuery); } }(this, function ($) { $.widget('namespace.widgetName', { options: { // Controls debug output // 0:off, 1:errors only, 2:errors and warnings, 3:everything 'debug': 0, 'logger': console, // Not necessary in all cases, but a good idea if you want to be // able to reinstantiate a widget state from options or on creation 'state': {} // built-in options disabled: false, // if and how to animate the hiding of the element // http://api.jqueryui.com/jQuery.widget/#option-hide hide: null, // likewise for show // http://api.jqueryui.com/jQuery.widget/#option-show show: null }, // I typically use this as a place to reference all of the important // DOM nodes used by the widget nodes: { }, // Called once on instantiation. _create: function() { this.nodes.originalElement = this.element; }, _init: function() { this._trigger('initialized'); }, // I find it useful to separate out my event handler logic just for // organization and readability's sake, but it's certainly not necessary _addHandlers: function() { }, _setOption: function (key, value) { // This will actually update the value in the options hash this._super(key, value); // And now we can act on that change switch (key) { // Not necessary in all cases, but likely enough to me to include it here case "state": this._init(); break; } }, _destroy: function() { // The public destroy method will do some stuff and // then invoke this method, so do any extra stuff here // (removing CSS classes, destroying detached nodes, etc) }, // These 3 methods give you an easy way to control debug messages _log: function () { (this.options.debug === 3) && this._toLoggerMethod('log', arguments); }, _warn: function () { (this.options.debug >= 2) && this._toLoggerMethod('warn', arguments); }, _error: function () { (this.options.debug >= 1) && this._toLoggerMethod('error', arguments); }, _toLoggerMethod: function(method, args) { var args = Array.prototype.slice.call(arguments, 1), logger = this.options.logger || console; logger.error.apply(logger, args); }, // Obviously only necessary if your widget has a value value: function(val) { if (val) { // set logic here } else { // get logic here } }, disable: function() { // Do any custom logic for disabling here, then this._super(); }, enable: function() { // Do any custom logic for enabling here, then this._super(); } }); });