jQuery UI Widget template

by Alexey Demin

HTML

<div id="container"></div>

JavaScript

/* WIDGET TEMPLATE

jQuery UI naming convention: jquery.ui.plugin_name.js

All of the code that makes up our plugin should be
encapsulated within a self-executing anonymous function.
The jQuery object is passed into this function and is
used inside the function via the $ alias; this is to
ensure that the plugin is compatible with jQuery’s
noConflict() method. This is a specified requirement
and should always be adhered to. */
(function($) {
  $.widget("ui.plugin_name", {
    /* We can set the default options
      for the plugin using the options property. */
    options: {
      optionOne : null,
      optionTwo : 0,
      optionXXX : ''
    },
    // Use the _setOption method to respond to changes to options
    _setOption: function( key, value ) {
      switch( key ) {
        case "clear":
          // handle changes to clear option
          break;
      }
      // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
      $.Widget.prototype._setOption.apply( this, arguments);
    },
    /* The _create method is called for each element
      that the plugin method is called on,
      which could be a single element or several. */
    _create: function() {
      var self = this,
          el = self.element,
          o = self.options;
      /*  The first is the name of the event,
        the second is for the event object
        (we don’t need to use this in our example plugin, hence the null value),
        the third is a reference to the element. */
      self._trigger("create", null, el);
    },
    /* destroy() method which is common to all jQuery UI plugins.
      We must provide an implementation of this method
      in order to clean up after our plugin.
      In jQuery UI 1.8, you must invoke the destroy method from the base widget. */
    destroy: function() {
      $.Widget.prototype.destroy.call( this );
    }
  })
})(jQuery);