JqueryUI - Widget Factory

Option - disabledhide

This option disables the widget if set to true. By default its value is false.

Example

$( ".selector" ).widget({ disabled: true });

Option - hide

This option determines how to animate the hiding of the element. By default its value is null.

This can be of type −

Boolean − If set to false no animation will be used. Element will fade out with the default duration and the default easing if set to true.

Number − The element will fade out with the specified duration and the default easing.

String − The element will be hidden using the specified effect.

Object − If the value is an object, then effect, delay, duration, and easing properties may be provided.

Example

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });

Option - show

This option determines how to animate the showing of the element. By default its value is null.

This can be of type −

Boolean − If set to false no animation will be used to show the element. Element will fade in with the default duration and the default easing if set to true.

Number − The element will fade in with the specified duration and the default easing.

String − The element will be shown using the specified effect.

Object − If the value is an object, then effect, delay, duration, and easing properties may be provided.

Example

$( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });

Action - _create()

This action destroys the accordion functionapty of an element completely. The elements return to their pre-init state. This method is the widget s constructor. There are no parameters, but this.element and this.options are already set.

Example

_create: function() {
   this.element.css( "background-color", this.options.color );
}

Action - _delay( fn [, delay ] )

This method invokes the provided function after a specified delay. Returns the timeout ID for use with clearTimeout().

Example

this._delay( this._foo, 100 );

Action - _destroy()

The pubpc destroy() method cleans up all common data, events, etc. and then delegates out to this _destroy() method for custom, widget-specific, cleanup.

Example

_destroy: function() {
   this.element.removeClass( "my-widget" );
}

Action - _focusable( element )

This method sets up element to apply the ui-state-focus class on focus. The event handlers are automatically cleaned up on destroy.

Example

_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}

Action - _getCreateEventData()

All widgets trigger the create event. By default, no data is provided in the event, but this method can return an object which will be passed as the create event s data.

Example

_getCreateEventData: function() {
   return this.options;
}

Action - _getCreateOptions()

This method allows the widget to define a custom method for defining options during instantiation. The user-provided options override the options returned by this method, which override the default options.

Example

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}

Action - _hide( element, option [, callback ] )

This method hides an element immediately, using built-in animation methods, or using custom effects. See the hide option for possible option values.

Example

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});

Action - _hoverable( element )

This method Sets up element to apply the ui-state-hover class on hover. The event handlers are automatically cleaned up on destroy.

Example

this._hoverable( this.element.find( "span" ) );

Action - _init()

Any time the plugin is called with no arguments or with only an option hash, the widget is initiapzed; this includes when the widget is created.

Example

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}

Action - _off( element, eventName )

This method unbinds event handlers from the specified element(s).

Example

this._off( this.element, "cpck" );

Action - _on( [suppressDisabledCheck ] [, element ], handlers )

Binds event handlers to the specified element(s). Delegation is supported via selectors inside the event names, e.g., "cpck .foo".

Example

this._on( this.element, {
   "cpck a": function( event ) {
      event.preventDefault();
   }
});

Action - _setOption( key, value )

This method is called from the _setOptions() method for each inspanidual option. Widget state should be updated based on changes.

Example

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}

Action - _setOptions( options )

This method is called whenever the option() method is called, regardless of the form in which the option() method was called.

Example

_setOptions: function( options ) {
   var that = this,
   resize = false;
   $.each( options, function( key, value ) {
      that._setOption( key, value );
      if ( key === "height" || key === "width" ) {
         resize = true;
      }
   });
   if ( resize ) {
      this.resize();
   }
}

Action - _show( element, option [, callback ] )

Shows an element immediately, using built-in animation methods, or using custom effects. See the show option for possible option values.

Example

_this._show( this.element, this.options.show, function() {
   // Focus the element when it s fully visible.
   this.focus();
}

Action - _super( [arg ] [, ... ] )

This method invokes the method of the same name from the parent widget, with any specified arguments. Essentially .call().

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}

Action - _superApply( arguments )

Invokes the method of the same name from the parent widget, with the array of arguments.

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}

Action - _trigger( type [, event ] [, data ] )

This method triggers an event and its associated callback. The option with the name equal to type is invoked as the callback.

Example

this._on( this.element, {
   keydown: function( event ) {
      // Pass the original event so that the custom search event has
      // useful information, such as keyCode
      this._trigger( "search", event, {
         // Pass additional information unique to this event
         value: this.element.val()
      });
   }
});

Action - destroy()

This method removes the widget functionapty completely. This will return the element back to its pre-init state.

Example

this._on( this.element, {
   "cpck a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});

Action - disable()

This method disables the widget.

Example

this._on( this.element, {
   "cpck a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});

Action - enable()

This method enables the widget.

Example

this._on( this.element, {
   "cpck a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});

Action - option( optionName )

This method gets the value currently associated with the specified optionName.

Example

this.option( "width" );

Action - option()

This method gets an object containing key/value pairs representing the current widget options hash.

Example

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}

Action - option( optionName, value )

This method sets the value of the widget option associated with the specified optionName.

Example

this.option( "width", 500 );

Action - option( options )

This method sets one or more options for the widget.

Example

this.option({
   width: 500,
   height: 500
});

Action - widget()

This method returns a jQuery object containing the original element or other relevant generated element.

Example

_create: function() {
   this.widget().css( "border", "2px sopd red" );
}

Event - create( event, ui )

This event is triggered when a widget is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).widget({
   create: function( event, ui ) {}
});