Jquery: Widget – Accordion
Options
Basic syntax
$(selector, context).accordion (options);
Methods
Basic syntax
$(selector, context).accordion ("action", params);
Events
Jquery: Widget – Autocomplete
Options
Basic syntax
$(selector, context).autocomplete (options);
Methods
Basic syntax
$(selector, context).autocomplete ("action", params);
Events
Extension Points
Jquery: Widget – Button
Options
Basic syntax
$(selector, context).button (options);
Methods
Basic syntax
$(selector, context).button ("action", params);
Event
Jquery: Widget – Buttonset
Options
Basic syntax
$(selector, context).buttonset (options);
Methods
Basic syntax
$(selector, context).buttonset ("action", params);
Event
Jquery: Widget – Checkboxradio
Options
Basic syntax
$(selector, context).checkboxradio (options);
Methods
Basic syntax
$(selector, context).checkboxradio ("action", params);
Event
Jquery: Widget – Controlgroup
Options
Basic syntax
$(selector, context).controlgroup (options);
Methods
Basic syntax
$(selector, context).button ("action", params);
Event
Options
Basic syntax:
$(selector, context).datepicker(options);
The following table lists the different options that can be used with this method:
Methods
Basic syntax:
$(selector, context).datepicker ("action", [params]);
The following table lists:
Jquery: Widget – Dialog
Options
appendTo
$(".selector").dialog(
{ appendTo: "#identifier" }
);autoOpen
$(".selector").dialog(
{ autoOpen: false }
);buttons
$(".selector").dialog(
{ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);closeOnEscape
$(".selector").dialog(
{ closeOnEscape: false }
);closeText
$(".selector").dialog(
{ closeText: "hide" }
);dialogClass
$(".selector").dialog(
{ dialogClass: "alert" }
);draggable
$(".selector").dialog(
{ draggable: false }
);height
$(".selector").dialog(
{ height: 400 }
);hide
$(".selector").dialog(
{ hide: { effect: "explode", duration: 1000 } }
);maxHeight
$(".selector").dialog(
{ maxHeight: 600 }
);maxWidth
$(".selector").dialog(
{ maxWidth: 600 }
);minHeight
$(".selector").dialog(
{ minHeight: 200 }
);minWidth
$(".selector").dialog(
{ minWidth: 200 }
);modal
$(".selector").dialog(
{ modal: true }
);position
$(".selector").dialog(
{ position: { my: "left top", at: "left bottom", of: button } }
);resizable
$(".selector").dialog(
{ resizable: false }
);show
$(".selector").dialog(
{ show: { effect: "blind", duration: 800 } }
);title
$(".selector").dialog(
{ title: "Dialog Title" }
);width
$(".selector").dialog(
{ width: 500 }
);Methods
close()
$(".selector").dialog("close");destroy()
$(".selector").dialog("destroy");isOpen()
$(".selector").dialog("isOpen");moveToTop()
$(".selector").dialog("moveToTop");open()
$(".selector").dialog("open");option( optionName )
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
option()
var options = $( ".selector" ).dialog( "option" );
option( optionName, value )
$(".selector").dialog( "option", "disabled", true );
option( options )
$(".selector").dialog( "option", { disabled: true });widget()
$(".selector").dialog("widget");Extension Points
_allowInteraction( event )
_allowInteraction: function( event ) {return !!$( event.target ).is( ".select2-input" ) || this._super( event );}
Events
beforeClose(event, ui)
$(".selector").dialog (
beforeClose: function(event, ui) {}
);close(event, ui)
$(".selector").dialog (
close: function(event, ui) {}
);create(event, ui)
$(".selector").dialog (
create: function(event, ui) {}
);drag(event, ui)
$(".selector").dialog (
drag: function(event, ui) {}
);dragStart(event, ui)
$(".selector").dialog (
dragStart: function(event, ui) {}
);dragStop(event, ui)
$(".selector").dialog (
dragStop: function(event, ui) {}
);focus(event, ui)
$(".selector").dialog (
focus: function(event, ui) {}
);open(event, ui)
$(".selector").dialog (
open: function(event, ui) {}
);resize(event, ui)
$(".selector").dialog (
resize: function(event, ui) {}
);resizeStart(event, ui)
$(".selector").dialog (
resizeStart: function(event, ui) {}
);resizeStop(event, ui)
$(".selector").dialog (
resizeStop: function(event, ui) {}
);JqueryUI: Widget – Menu
Options
disabled
$( ".selector" ).menu (
{ disabled: true }
);icons
$( ".selector" ).menu (
{ icons: { submenu: "ui-icon-circle-triangle-e" } }
);items
(version added: 1.11.0)
$( ".selector" ).menu({
items: ".custom-item"
});menus
$( ".selector" ).menu (
{ menus: "div" }
);position
$( ".selector" ).menu (
{ position: { my: "left top", at: "right-5 top+5" } }
);role
$( ".selector" ).menu (
{ role: null }
);Methods
blur( [event ] )
$(".selector").menu( "blur" );collapse( [event ] )
$(".selector").menu( "collapse" );collapseAll( [event ] [, all ] )
$(".selector").menu( "collapseAll", null, true );destroy()
$(".selector").menu( "destroy" );disable()
$(".selector").menu( "disable" );enable()
$(".selector").menu( "enable" );expand( [event ] )
$(".selector").menu( "expand" );focus( [event ], item )
$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:lasisFirstItem()
$(".selector").menu( "isFirstItem" );isLastItem()
$(".selector").menu( "isLastItem" );next( [event ] )
$(".selector").menu( "next" );nextPage( [event ] )
$(".selector").menu( "nextPage" );option( optionName )
var isDisabled = $( ".selector" ).menu( "option", "disabled" );
option()
var options = $( ".selector" ).menu( "option" );
option( optionName, value )
$(".selector").menu( "option", "disabled", true );option( options )
$(".selector").menu( "option", { disabled: true } );previous( [event ] )
$(".selector").menu( "previous" );previousPage( [event ] )
$(".selector").menu( "previousPage" );refresh()
$(".selector").menu( "refresh" );select( [event ] )
$(".selector").menu( "select" );widget()
$(".selector").menu( "widget" );Extension Points
_closeOnDocumentClick( event )
_closeOnDocumentClick: function( event ) {return false;}
_isDivider( item )
_isDivider: function( item ) {return false;}
Events
blur(event, ui)
$( ".selector" ).menu({
blur: function( event, ui ) {}
});create(event, ui)
$( ".selector" ).menu({
create: function( event, ui ) {}
});focus(event, ui)
$( ".selector" ).menu({
focus: function( event, ui ) {}
});select(event, ui)
$( ".selector" ).menu({
select: function( event, ui ) {}
});JqueryUI: Widget – Progressbar
Options
disabled
This option when setting to true disables the progress bars. By default its value is false.
$( ".selector" ).progressbar({ disabled: true });max
This option sets the maximum value for a progress bar. By default its value is 100.
$( ".selector" ).progressbar({ max: 500});value
This option specifies the initial value of the progress bar. By default its value is 0.
$( ".selector" ).progressbar({ value: 20 });Methods
destroy
This action removes the progress bar functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
$( ".selector" ).progressbar("destroy");disable
This action disables the progress bar functionality of an element. This method does not accept any arguments.
$( ".selector" ).progressbar("disable");enable
This action enables the progress bar functionality. This method does not accept any arguments.
$( ".selector" ).progressbar("enable");instance()
This action retrieves the progressbar’s instance object. If the element does not have an associated instance, undefined is returned.
$( ".selector" ).progressbar( "instance" );
option( optionName )
This action retrieves the value currently associated with specified optionName. Where optionName is a String
var isDisabled = $( ".selector" ).progressbar( "option", "disabled
option
This action gets an object containing key/value pairs representing the current progress bar options hash. This method does not accept any arguments.
var options = $( ".selector" ).progressbar( "option" );
option( optionName, value )
This action sets the value of the progressbar option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
$( ".selector" ).progressbar( "option", "disabled", true );
option( options )
This action sets one or more options for the progress bars. The argument options is a map of option-value pairs to be set.
( ".selector" ).progressbar( "option", { disabled: true } );value
This action retrieves the current value of options.value, that is, the percentage of fill in the progress bar.
$( ".selector" ).progressbar("value");value( value )
This action specifies a new value to the percentage filled in the progress bar. The argument value can be a Number or Boolean.
$( ".selector" ).progressbar( "value", 50 );
widget
This action returns a jQuery object containing the progress bar. This method does not accept any arguments.
$( ".selector" ).progressbar("widget");Events
change(event, ui)
This event is triggered whenever the value of progress bar changes. Where event is of type Event, and ui is of type Object.
$( ".selector" ).progressbar({
change: function( event, ui ) {}
});complete(event, ui)
>This event is triggered when the progress bar reaches the maximum value. Where event is of type Event, and ui is of type Object.
$( ".selector" ).progressbar({
complete: function( event, ui ) {}
});create(event, ui)
This event is triggered whenever progressbar is created. Where event is of type Event, and ui is of type Object.
$( ".selector" ).progressbar({
create: function( event, ui ) {}
});JqueryUI: Widget – Slider
Options
animate
This option when set to true, creates an animated effect when users click directly on the axis. By default its value is false.
This can be of type:
- Boolean − When set to true, the handle will animate with the default duration.
- String −The name of speed such as slow, normal, or fast
- Number −The duration of the animation, in milliseconds.
$( ".selector" ).slider(
{ animate: "fast" }
);disabled
This option when set to true, disables the slider. By default its value is false
$( ".selector" ).slider(
{ disabled: true }
);max
This option specifies the upper value of the range that the slider can attain—the value represented when the handle is moved to the far right (for horizontal sliders) or top (for vertical sliders). By default its value is 100.
$( ".selector" ).slider(
{ max: 50 }
);min
This option specifies the lower value of the range that the slider can attain—the value represented when the handle is moved to the far left (for horizontal sliders) or bottom (for vertical sliders). By default its value is 0.
$( ".selector" ).slider(
{ min: 10 }
);orientation
This option indicates the horizontal or vertical orientation of the slider. By default its value is horizontal.
$( ".selector" ).slider(
{ "option", "orientation" }
);range
This option specifies whether the slider represents a range. By default its value is false.
This can be of type
- Boolean − If specified as true, and the slider has exactly two handles, an element that can be styled is created between the handles.
- String −Can be min or max. If specified creates a range element from the handle to the beginning or end of the slider respectively.
$( ".selector" ).slider(
{ range: true }
);step
This option specifies discrete intervals between the minimum and maximum values that the slider is allowed to represent. By default its value is 1.
$( ".selector" ).slider(
{ step: 2 }
);values
This option is of type Array and causes multiple handles to be created and specifies the initial values for those handles. This option should be an array of possible values, one for each handle. By default its value is null.
$( ".selector" ).slider(
{ values: [ 20, 25 ] }
);Methods
destroy
This action destroys the slider functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
$( ".selector" ).slider("destroy");disable
This action disables the slider functionality. This method does not accept any arguments.
$( ".selector" ).slider("disable");enable
This action enables the slider functionality. This method does not accept any arguments.
$( ".selector" ).slider("enable");option( optionName )
This action retrieves the value of the specified param option. This option corresponds to one of those used with slider (options). Where optionName is the name of the option to get.
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
option()
This action gets an object containing key/value pairs representing the current slider options hash.
var options = $( ".selector" ).slider( "option" );
option( optionName, value )
This action sets the value of the slider option associated with the specified optionName. The argument optionName is the name of the option to be set and value is the value to be set for the option.
$( ".selector" ).slider( "option", "disabled", true );
option( options )
This action sets one or more options for the slider. The argument options is a map of option-value pairs to be set.
$( ".selector" ).slider( "option", { disabled: true } );value
This action retrieves the current value of options.value (the indicator). Use only if the indicator is unique (if not, use slider (“values”)). This signature does not accept any arguments.
$( ".selector" ).slider("value");value( value )
This action sets the value of the slider.
$( ".selector" ).slider( "value", 55 );
values
This action retrieves the current value of options.values (the value of the sliders in an array). This signature does not accept any arguments.\
var values = $( ".selector" ).slider( "values" );
values( index )
This action gets the value for the specified handle. Where index is of type Integer and is a zero-based index of the handle.
var value = $( ".selector" ).slider( "values", 0 );
values( index, value )
This action sets the value for the specified handle. Where index is the zero-based index of the handle and value is the value to set.
$( ".selector" ).slider( "values", 0, 20 );
values( values )
This action set the value for all handles.
$( ".selector" ).slider( "values", [ 55, 105 ] );
widget
This action returns a jQuery object containing the slider. This method does not accept any arguments.
var widget = $( ".selector" ).slider( "widget" );
Events
change(event, ui)
This event is triggered handle’s value changes, either through user action or programmatically. Where event is of type Event, and ui is of type Object. Possible values of ui are:
- handle − A jQuery object representing the handle that was changed.
- value − The current value of the slider
$( ".selector" ).slider({
change: function( event, ui ) {}
});create(event, ui)
This event is triggered when the slider is created. Where event is of type Event, and ui is of type Object.
$( ".selector" ).slider({
create: function( event, ui ) {}
});slide(event, ui)
This event is triggered for mouse move events whenever the handle is being dragged through the slider. Returning false cancels the slide. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- handle − A jQuery object representing the handle being moved.
- value − The value that the handle will move to if the event is not canceled.
- values − An array of the current values of a multi-handled slider.
$( ".selector" ).slider({
slide: function( event, ui ) {}
});start(event, ui)
This event is triggered when the user starts sliding. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- handle − A jQuery object representing the handle being moved.
- value − The current value of the slider.
$( ".selector" ).slider({
start: function( event, ui ) {}
});stop(event, ui)
This event is triggered when a slide stops. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- handle − A jQuery object representing the handle that was moved.
- value − The current value of the slider.
$( ".selector" ).slider({
stop: function( event, ui ) {}
});JqueryUI: Widget – Spinner
Options
culture
Sets the culture to use for parsing and formatting the value. If null, the currently set culture in Globalize is used, see Globalize docs for available cultures. Only relevant if the numberFormat option is set. Requires Globalize to be included.
$( ".selector" ).spinner(
{ culture: "fr" }
);disabled
This option if set to true disables spinner. By default its value is false.
$( ".selector" ).spinner(
{ disabled: true }
);icons
This option sets icons to use for buttons, matching an icon provided by the jQuery UI CSS Framework. By default its value is { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }.
$( ".selector" ).spinner(
{ icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);incremental
This option controls the number of steps taken when holding down a spin button. By default its value is true.
This can be of type:
- Boolean − If set to false all steps are equal. If set to true, the stepping delta will increase when spun incessantly.
- Function − This must return the number of steps that should occur for the current spin.
$( ".selector" ).spinner(
{ incremental: false }
);max
This option indicates the maximum allowed value. By default its value is null which means there is no maximum enforced.
This can be of type
- Number − The maximum value.
- String − If Globalize is included, the max option can be passed as a string which will be parsed based on the numberFormat and culture options
$( ".selector" ).spinner(
{ max: 50 }
);min
This option indicates the minimum allowed value. By default its value is null which means there is no minimum enforced.
This can be of type
- Number − The minimum value.
- String − If Globalize is included, the min option can be passed as a string which will be parsed based on the numberFormat and culture options.
$( ".selector" ).spinner(
{ min: 0 }
);numberFormat
This option indicates format of numbers passed to Globalize, if available. Most common are “n” for a decimal number and “C” for a currency value. By default its value is null.
$( ".selector" ).spinner(
{ numberFormat: "n" }
);page
This option indicates the number of steps to take when paging via the pageUp/pageDown methods. By default its value is 10.
$( ".selector" ).spinner(
{ page: 2 }
);step
This option indicates size of the step to take when spinning via buttons or via the stepUp()/stepDown() methods. The element’s step attribute is used if it exists and the option is not explicitly set.
This can be of type
- Number − The size of step.
- String − If Globalize is included, the step option can be passed as a string which will be parsed based on the numberFormat and culture options, otherwise it will fall back to the native parseFloat.
$( ".selector" ).spinner(
{ step: 2 }
);Methods
destroy
Removes the spinner functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
$( ".selector" ).spinner("destroy");disable
This action disables spinner. This method does not accept any arguments.
$( ".selector" ).spinner("disable");enable
This action activates the spinner. This signature does not accept any arguments.
$( ".selector" ).spinner("enable");instance()
Retrieves the spinner’s instance object. If the element does not have an associated instance, undefined is returned. Unlike other widget methods, instance() is safe to call on any element after the spinner plugin has loaded.
$( ".selector" ).spinner("instance");isValid()
Returns whether the Spinner’s value is valid given its min, max, and step. This method does not accept any arguments.
var isValid = $( ".selector" ).spinner( "isValid" );
option( optionName )
This action gets the value currently associated with the specified optionName.
var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
option
This action gets an object containing key/value pairs representing the current spinner options hash. This method does not accept any arguments.
$( ".selector" ).spinner("option");option( optionName, value )
This action sets the value of the spinner option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
$( ".selector" ).spinner( "option", "disabled", true );
option( options )
This action sets one or more options to the spinner.
$( ".selector" ).spinner( "option", { disabled: true } );pageDown( [pages ] )
This action decrements the value by the specified number of pages, as defined by the page option. Invoking pageDown() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("pageDown");pageUp( [pages ] )
This action increments the value by the specified number of pages, as defined by the page option. Invoking pageUp() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("pageUp");stepDown( [steps ] )
This action decrements the value by the specified number of steps. Invoking stepDown() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("stepDown");stepUp( [steps ] )
This action increments the value by the specified number of steps. Invoking stepUp() will cause start, spin, and stop events to be triggered.
$(".selector").spinner("stepUp");value
This action gets the current value as a number. The value is parsed based on the numberFormat and culture options. This method does not accept any arguments.
var value = $( ".selector" ).spinner( "value" );
value( value )
This action sets the value. if value is passed value is parsed based on the numberFormat and culture options.
$( ".selector" ).spinner( "value", 50 );
widget()
Returns a jQuery object containing the generated wrapper.
$( ".selector" ).spinner( "widget");
Events
change(event, ui)
This event is triggered when the value of the spinner has changed and the input is no longer focused. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
change: function( event, ui ) {}
});create(event, ui)
This event is triggered when the spinner is created. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
create: function( event, ui ) {}
});spin(event, ui)
This event is triggered during increment/decrement. Where event is of type Event, and ui is of type Object.and represents the new value to be set, unless the event is cancelled.
$( ".selector" ).spinner({
spin: function( event, ui ) {}
});start(event, ui)
This event is triggered before a spin. Can be canceled, preventing the spin from occurring. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
start: function( event, ui ) {}
});stop(event, ui)
This event is triggered after a spin. Where event is of type Event, and ui is of type Object.
$( ".selector" ).spinner({
stop: function( event, ui )JqueryUI: Widgets – Tabs
Options
active
This option specifies the current active tab/panel. By default its value is 0.
Multiple types supported:
- Boolean: Setting
activetofalsewill collapse all panels. This requires thecollapsibleoption to betrue. - Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
$( ".selector" ).tabs (
{ active: 1 }
);classes
By default its value is Object
$( ".selector" ).tabs({classes: {"ui-tabs": "highlight"}});
collapsible
When set to true, the active panel can be closed. By default its value is false.
$( ".selector" ).tabs (
{ collapsible: true }
);disabled
By default its value is false.
Multiple types supported:
- Boolean − Enable or disable all tabs.
- Array − An array containing the zero-based indexes of the tabs that should be disabled, e.g., [ 0, 2 ] would disable the first and third tab
$( ".selector" ).tabs (
{ disabled: [ 0, 2 ] }
);event
The type of event that the tabs should react to in order to activate the tab. To activate on hover, use "mouseover". By default its value is “click”.
$( ".selector" ).tabs (
{ event: "mouseover" }
);heightStyle
By default its value is “content”.
Controls the height of the tabs widget and each panel. Possible values:
- auto − All panels will be set to the height of the tallest panel.
- fill − Expand to the available height based on the tabs’ parent height.
- content − Each panel will be only as tall as its content.
$( ".selector" ).tabs (
{ heightStyle: "fill" }
);hide
By default its value is null.
If and how to animate the hiding of the panel. Multiple types supported:
- Boolean − When set to false, no animation will be used and the panel will be hidden immediately.
- Number − The panel will fade out with the specified duration and the default easing.
- String − The panel will be hidden using the specified effect. Value can be slideUp or fold
- Object − For this type, properties effect, delay, duration and easing may be provided.
$( ".selector" ).tabs (
{ { hide: { effect: "explode", duration: 1000 } } }
);show
By default its value is null.
If and how to animate the showing of the panel. Multiple types supported:
- Boolean − When set to false, no animation will be used and the panel will be shown immediately.
- Number − The panel will fade out with the specified duration and the default easing.
- String − The panel will be shown using the specified effect. Value can be slideUp or fold.
- Object − For this type, properties effect, delay, duration and easing may be provided.
$( ".selector" ).tabs (
{ show: { effect: "blind", duration: 800 } }
);Methods
destroy
Removes the tabs functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
$( ".selector" ).tabs("destroy");disable
This action disables all tabs. This method does not accept any arguments.
$( ".selector" ).tabs("disable");disable( index )
This action disables the specified tab. Where index is the tab to be disabled. To disable more than one tab at once, set the disabled option: $( “#tabs” ).tabs( “option”, “disabled”, [ 1, 2, 3 ] ).
$( ".selector" ).tabs( "disable", 1 );
enable
This action activates all the tabs. This signature does not accept any arguments.
$( ".selector" ).tabs("enable");enable( index )
This action activates a specified tab. Where index is the tab to be enabled. To enable more than one tab at once reset the disabled property like: $( “#example” ).tabs( “option”, “disabled”, [] );.
$( ".selector" ).tabs( "enable", 1 );
load( index )
This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load.
$( ".selector" ).tabs("load", 1);option( optionName )
This action gets the value currently associated with the specified optionName.
var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
option
This action gets an object containing key/value pairs representing the current tabs options hash. This method does not accept any arguments.
$( ".selector" ).tabs("option");option( optionName, value )
This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
$( ".selector" ).tabs( "option", "disabled", true );
option( options )
This action sets one or more options to the tabs.
$( ".selector" ).tabs( "option", { disabled: true } );refresh
This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option.
$( ".selector" ).tabs( "refresh" );
widget
This action returns the element serving as the tabs widget, annotated with the ui-tabs class name.
var widget = $( ".selector" ).tabs( "widget" );
Extension Points
_getList()
Determine which list should be converted to tabs. By default the first descendant list is used. This method does not accept any arguments.
_getList: function() {
var list = this.element.find( ".my-tabs" );
return list.length ? list.eq( 0 ) : this._super();
}Events
activate(event, ui)
This event is triggered after the tab has been activated (after the completion of animation). Where event is of type Event, and ui is of type Object. Possible values of ui are −
- newTab − The tab that was just activated.
- oldTab − The tab that was just deactivated.
- newPanel − The panel that was just activated.
- oldPanel − The panel that was just deactivated.
$( ".selector" ).slider({
activate: function( event, ui ) {}
});beforeActivate(event, ui)
This event is triggered before a the tab has been activated. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- newTab − The tab that is about to be activated.
- oldTab − The tab that is about to be deactivated.
- newPanel − The panel is about to be activated.
- oldPanel − The panel is about to be deactivated.
$( ".selector" ).slider({
beforeActivate: function( event, ui ) {}
});beforeLoad(event, ui)
This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- tab − The tab that is being loaded.
- panel − The panel which will be populated by the Ajax response.
- jqXHR − The jqXHR object that is requesting the content.
- ajaxSettings − The settings that will be used by jQuery.ajax to request the content.
$( ".selector" ).slider({
beforeLoad: function( event, ui ) {}
});create(event, ui)
This event is triggered when tabs are created. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- tab − The active tab.
- panel − The active panel.
$( ".selector" ).slider({
create: function( event, ui ) {}
});load(event, ui)
This event is triggered after a remote tab has been loaded. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- tab − The tab that was just loaded.
- panel − The panel which was just populated by the Ajax response.
$( ".selector" ).slider({
load: function( event, ui ) {}
});JqueryUI: Widget – Tooltip
Options
classes
$( ".selector" ).tooltip({classes: {"ui-tooltip": "highlight"}});
content
Multiple types supported:
Function: A callback which can either return the content directly or call the first argument, passing in the content, e.g., for Ajax content.String: A string of HTML to use for the tooltip content.Element: A DOM element to use for the tooltip content.jQuery: A jQuery object to use for the tooltip content.
$(".selector").tooltip(
{ content: "Example content!" }
);disabled
This option when setting to true disables the tooltip. Its default value is false.
$(".selector").tooltip(
{ disabled: true }
);hide
If and how to animate the hiding of the tooltip. Multiple types supported:
Boolean: This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.Number: The tooltip will fade out with the specified duration and the default easing.String: The tooltip will be hidden using the specified effect such as “slideUp”, “fold”.Object: Possible values are effect, delay, duration, and easing.
$(".selector").tooltip(
{ hide: { effect: "explode", duration: 1000 } }
);items
This option indicates which items can show tooltips. By default its value is [title].
$(".selector").tooltip(
{ items: "img[alt]" }
);position
This option decides the position of the tooltip w.r.t the associated target element. By default its value is { my: "left top+15", at: "left bottom", collision: "flipfit" }.
$(".selector").tooltip(
{ { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);show
This option represents how to animate the showing of the tooltip. By default its value is true. Multiple types supported:
- Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.
- Number − The tooltip will fade out with the specified duration and the default easing.
- String − The tooltip will be hidden using the specified effect such as “slideUp”, “fold”.
- Object − Possible values are effect, delay, duration, and easing.
$(".selector").tooltip(
{ show: { effect: "blind", duration: 800 } }
);tooltipClass
A class to add to the widget, can be used to display various tooltip types, like warnings or errors. By default its value is null.
$(".selector").tooltip(
{ tooltipClass: "custom-tooltip-styling" } }
);track
Whether the tooltip should track (follow) the mouse. By default its value is false.
$(".selector").tooltip(
{ track: true }
);Methods
close()
This action closes the tooltip. This method does not accept any arguments.
$(".selector").tooltip("close");destroy()
Removes the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
$(".selector").tooltip("destroy");
disable()
This action deactivates the tooltip. This method does not accept any arguments.
$(".selector").tooltip("disable");enable()
This action activates the tooltip. This method does not accept any arguments.
$(".selector").tooltip("enable");instance()
Retrieves the tooltip’s instance object. If the element does not have an associated instance, undefined is returned. This method does not accept any arguments.
$( ".selector" ).tooltip( "instance" );
open()
This action programmatically opens the tooltip. This method does not accept any arguments.
$(".selector").tooltip("open");option( optionName )
This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.
var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
option()
This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.
$(".selector").tooltip("option");option( optionName, value )
This action sets the value of the tooltip option associated with the specified optionName.
$( ".selector" ).tooltip( "option", "disabled", true );
option( options )
This action sets one or more options for tooltip.
$( ".selector" ).tooltip( "option", { disabled: true } );widget()
This action returns a jQuery object containing the original element. This method does not accept any arguments.
$(".selector").tooltip("widget");Events
close(event, ui)
Triggered when a tooltip is closed, triggered on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Possible values of ui are: tooltip is of type JQuery
$(".selector").tooltip(
close: function(event, ui) {}
);create(event, ui)
Triggered when the tooltip is created. Where event is of type Event, and ui is of type Object.
$(".selector").tooltip(
create: function(event, ui) {}
);open(event, ui)
Triggered when the tooltip is displayed or shown. Usually triggered on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Possible values of ui are: tooltip is of type JQuery
$(".selector").tooltip(
open: function(event, ui) {}
);JqueryUI: Utilities – Widget Plugin Bridge
Syntax
$.widget.bridge(name, constructor)
Syntax
jQuery.widget( name [, base ], prototype )
Syntax
.position( options )
JqueryUI: Effects – Add Class
Syntax
.addClass( className [, duration ] [, easing ] [, complete ] )
OR
.addClass( className [, options ] )
JqueryUI: Effects – Color Animation
jQuery UI effects core adds the ability to animate color properties using rgb(), rgba(), hex values, or even color names such as "aqua". Simply include the jQuery UI effects core file and .animate() will gain support for colors.
The following properties are supported:
backgroundColorborderBottomColorborderLeftColorborderRightColorborderTopColorcolorcolumnRuleColoroutlineColortextDecorationColortextEmphasisColor
Syntax
$( "#example" ).animate(
{
color: "white"
backgroundColor: "black",
}
);JqueryUI: Effects – CSS Clip
Syntax
.cssClip( [dimensions ] )
JqueryUI: Effects – Effect
Syntax
.effect( effect [, options ] [, duration ] [, complete ] )
OR
.effect( options )
JqueryUI: Effects – Hide
Syntax
.hide( effect [, options ] [, duration ] [, complete ] )
OR
.hide( options )
JqueryUI: Effects – Remove Class
Syntax
.removeClass( className [, duration ] [, easing ] [, complete ] )
OR
.removeClass( className [, options ] )
JqueryUI: Effects – Show
Syntax
.show( effect [, options ] [, duration ] [, complete ] )
OR
.show( options )
JqueryUI: Effects – Switch Class
Syntax:
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
OR
.switchClass( removeClassName, addClassName [, options ] )
JqueryUI: Effects – Toggle
Syntax
.toggle( effect [, options ] [, duration ] [, complete ] )
OR
.toggle( options )
JqueryUI: Effects – Transfer
Syntax:
.transfer( options [, complete ] )
JqueryUI: Effects – Toggle Class
Syntax
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
OR
.toggleClass( className [, switch ] [, options ] )