Tag: Jquery UI Cheat Sheet

Options

Basic syntax

$(selector, context).accordion (options);

Option	Description
active	Which panel is currently open. Multiple types supported: Boolean and Integer
animate	If and how to animate changing panels. Multiple types supported: Boolean, Number, String and Object
collapsible	Whether all the sections can be closed at once. Allows collapsing the active section.
disabled	Disables the accordion if set to true
event	The event that accordion headers will react to in order to activate the associated panel. Multiple events can be specified, separated by a space.
header	Selector for the header element, applied via .find() on the main accordion element. Content panels must be the sibling immediately after their associated headers.
heightStyle	Controls the height of the accordion and each panel. Possible values: “auto”, “fill” and “content”
icons	Icons to use for headers, matching an icon provided by the jQuery UI CSS Framework. Set to false to have no icons displayed.

Methods

Basic syntax

$(selector, context).accordion ("action", params);

Method	Description
destroy()	Removes the accordion functionality completely. This will return the element back to its pre-init state.
disable()	Disables the accordion.
enable()	Enables the accordion.
instance()	Retrieves the accordion’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )	Gets the value currently associated with the specified optionName.
option()	Gets an object containing key/value pairs representing the current accordion options hash.
option( optionName, value )	Sets the value of the accordion option associated with the specified optionName.
option( options )	Sets one or more options for the accordion.
refresh()	Process any headers and panels that were added or removed directly in the DOM and recompute the height of the accordion panels. Results depend on the content and the heightStyle option
widget()	Returns a jQuery object containing the accordion.

Events

Event Method	Description
activate( event, ui )	Triggered after a panel has been activated (after the animation completes).
beforeActivate( event, ui )	Triggered directly before a panel is activated. Can be canceled to prevent the panel from activating.
create( event, ui )	Triggered when the autocomplete is created.

Options

Basic syntax

$(selector, context).autocomplete (options);

Option	Description
appendTo	Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front.
autoFocus	If set to true the first item will automatically be focused when the menu is shown.
delay	The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.
disabled	Disables the autocomplete if set to true.
minLength	The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.
position	Identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.

Methods

Basic syntax

$(selector, context).autocomplete ("action", params);

Method	Description
close()	Closes the Autocomplete menu. Useful in combination with the search method, to close the open menu.
destroy()	Removes the autocomplete functionality completely. This will return the element back to its pre-init state.
disable()	Disables the autocomplete.
enable()	Enables the autocomplete.
instance()	Retrieves the autocomplete’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )	Gets the value currently associated with the specified optionName.
option()	Gets an object containing key/value pairs representing the current autocomplete options hash.
option( optionName, value )	Sets the value of the autocomplete option associated with the specified optionName.
option( options )	Sets one or more options for the autocomplete.
search( [value ] )	Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked.
widget()	Returns a jQuery object containing the autocomplete.

Events

Event Method	Description
change( event, ui )	Triggered when the field is blurred, if the value has changed.
close( event, ui )	Triggered when the menu is hidden. Not every close event will be accompanied by a change event.
create( event, ui )	Triggered when the autocomplete is created.
focus( event, ui )	Triggered when the focus is moved to an item (not selecting). The default action is to replace the text field’s value with the value of the focused item, though only if the event was triggered by a keyboard interaction.
open( event, ui )	Triggered when the suggestion menu is opened or updated.
response( event, ui )	Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required.
search( event, ui )	Triggered before a search is performed, after minLength and delay are met. If canceled, then no request will be started and no items suggested.
select( event, ui )	Triggered when an item is selected from the menu. The default action is to replace the text field’s value with the value of the selected item.

Extension Points

Extension Point	Description
_renderItem( ul, item )	Method that controls the creation of each option in the widget’s menu. The method must create a new <li> element, append it to the menu, and return it.
_renderMenu( ul, items )	The method that controls building the widget’s menu. The method is passed an empty <ul> and an array of items that match the user typed term. Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.
_resizeMenu()	Method responsible for sizing the menu before it is displayed. The menu element is available at this.menu.element.

Options

Basic syntax

$(selector, context).button (options);

Option	Description
disabled	Disables the button if set to true.
icon	Icon to display, with or without text (see showLabel option). By default, the icon is displayed on the left of the label text. The positioning can be controlled using the iconPosition option.
iconPosition	Where to display the icon: Valid values are “beginning”, “end”, “top” and “bottom”. In a left-to-right (LTR) display, “beginning” refers to the left, in a right-to-left (RTL, e.g. in Hebrew or Arabic), it refers to the right.
label	HTML to show in the button. When not specified (null), the element’s HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.
showLabel	Whether to show the label. When set to false no text will be displayed, but the icon option must be used, otherwise the showLabel option will be ignored.

Methods

Basic syntax

$(selector, context).button ("action", params);

Method	Description
destroy()	Removes the buttonset functionality completely. This will return the element back to its pre-init state.
disable()	Disables the button.
enable()	Enables the button.
instance()	Retrieves the button’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )	Gets the value currently associated with the specified optionName.
option()	Gets an object containing key/value pairs representing the current button options hash.
option( optionName, value )	Sets the value of the button option associated with the specified optionName.
option( options )	Sets one or more options for the button.
refresh()	Process any widgets that were added or removed directly in the DOM. Results depend on the items option.
widget()	Returns a jQuery object containing the button.

Event

Event Method	Description
create( event, ui )	Triggered when the button is created.

Options

Basic syntax

$(selector, context).buttonset (options);

Option	Description
disabled	Disables the buttonset if set to true.
items	Which descendant elements to convert manage as buttons.

Methods

Basic syntax

$(selector, context).buttonset ("action", params);

Method	Description
destroy()	Removes the buttonset functionality completely. This will return the element back to its pre-init state.
disable()	Disables the buttonset.
enable()	Enables the buttonset.
instance()	Retrieves the buttonset’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )	Gets the value currently associated with the specified optionName.
option()	Gets an object containing key/value pairs representing the current buttonset options hash.
option( optionName, value )	Sets the value of the buttonset option associated with the specified optionName.
option( options )	Sets one or more options for the buttonset.
refresh()	Process any widgets that were added or removed directly in the DOM. Results depend on the items option.
widget()	Returns a jQuery object containing the buttonset.

Event

Event Method	Description
create( event, ui )	Triggered when the buttonset is created.

Options

Basic syntax

$(selector, context).checkboxradio (options);

Option	Description
disabled	Disables the checkboxradio if set to true.
icon	Whether to show the checkbox or radio icon, depending on the input’s type.
label	HTML to show in the button. When not specified (null), the HTML content of the associated <label> element is used.

Methods

Basic syntax

$(selector, context).checkboxradio ("action", params);

Method	Description
destroy()	Removes the checkboxradio functionality completely. This will return the element back to its pre-init state.
disable()	Disables the checkboxradio.
enable()	Enables the checkboxradio.
instance()	Retrieves the checkboxradio’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )	Gets the value currently associated with the specified optionName.
option()	Gets an object containing key/value pairs representing the current checkboxradio options hash.
option( optionName, value )	Sets the value of the checkboxradio option associated with the specified optionName.
option( options )	Sets one or more options for the checkboxradio.
refresh()	Process any widgets that were added or removed directly in the DOM. Results depend on the items option.
widget()	Returns a jQuery object containing the checkboxradio.

Event

Event Method	Description
create( event, ui )	Triggered when the checkboxradio is created.

Options

Basic syntax

$(selector, context).controlgroup (options);

Option	Description
direction	By default, the control-group displays its controls in a horizontal layout. Use this option to use a vertical layout instead.
disabled	Disables the controlgroup if set to true.
items	Which descendant elements to initialize as their respective widgets. Two elements have special behavior: controlgroupLabel spinner
onlyVisible	Sets whether to exclude invisible children in the assignment of rounded corners.

Methods

Basic syntax

$(selector, context).button ("action", params);

Method	Description
destroy()	Removes the controlgroup functionality completely. This will return the element back to its pre-init state.
disable()	Disables the controlgroup.
enable()	Enables the controlgroup.
instance()	Retrieves the controlgroup’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )	Gets the value currently associated with the specified optionName.
option()	Gets an object containing key/value pairs representing the current controlgroup options hash.
option( optionName, value )	Sets the value of the controlgroup option associated with the specified optionName.
option( options )	Sets one or more options for the controlgroup.
refresh()	Process any widgets that were added or removed directly in the DOM. Results depend on the items option.
widget()	Returns a jQuery object containing the controlgroup.

Event

Event Method	Description
create( event, ui )	Triggered when the controlgroup is created.

Options

Basic syntax:

$(selector, context).datepicker(options);

The following table lists the different options that can be used with this method:

Option	& Description
altField	This option specifies a jQuery selector for a field that is also updated with any date selections.
altFormat	This option is used when an altField option is specified.
appendText	This option is a String value to be placed after the <input> element, intended to show instructions to the user.
autoSize	This option when set to true resizes the <input> element to accommodate the datepicker’s date format asset with the dateFormat option.
beforeShow	This option is a callback function that’s invoked just before a datepicker is displayed, with the <input> element and datepicker instance passed as parameters.
beforeShowDay	This option is a callback function that takes a date as a parameter, that’s invoked for each day in the datepicker just before it’s displayed, with the date passed as the only parameter.
buttonImage	A URL of an image to use to display the datepicker when the showOn option is set to "button" or "both". If set, the buttonText option becomes the alt value and is not directly displayed.
buttonImageOnly	Whether the button image should be rendered by itself instead of inside a button element. This option is only relevant if the buttonImage option has also been set.
buttonText	The text to display on the trigger button. Use in conjunction with the showOn option set to "button" or "both".
calculateWeek	A function to calculate the week of the year for a given date.
changeMonth	Whether the month should be rendered as a dropdown instead of text.
changeYear	Whether the year should be rendered as a dropdown instead of text. Use the yearRange option to control which years are made available for selection.
closeText	The text to display for the close link. Use the showButtonPanel option to display this button.
constrainInput	When true, an entry in the input field is constrained to those characters allowed by the current dateFormat option.
currentText	The text to display for the current day link. Use the showButtonPanel option to display this button.
dateFormat	The format for parsed and displayed dates. For a full list of the possible formats see the formatDate function.
dayNames	The list of long day names, starting from Sunday, for use as requested via the dateFormat option.
dayNamesMin	The list of minimized day names, starting from Sunday, for use as column headers within the datepicker.
dayNamesShort	The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat option.
defaultDate	Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘+1m +7d’), or null for today.
duration	Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds (“slow”, “normal”, “fast”).
firstDay	Set the first day of the week: Sunday is 0, Monday is 1, etc.
gotoCurrent	When true, the current day link moves to the currently selected date instead of today.
hideIfNoPrevNext	Normally the previous and next links are disabled when not applicable (see the minDate and maxDate options). You can hide them altogether by setting this attribute to true.
isRTL	Whether the current language is drawn from right to left.
maxDate	The maximum selectable date. When set to null, there is no maximum. Multiple types supported: Date, Number and String
minDate	The minimum selectable date. When set to null, there is no minimum. Multiple types supported: Date, Number and String
monthNames	The list of full month names, for use as requested via the dateFormat option.
monthNamesShort	The list of abbreviated month names, as used in the month header on each datepicker and as requested via the dateFormat option.
navigationAsDateFormat	Whether the currentText, prevText and nextText options should be parsed as dates by the formatDate function, allowing them to display the target month names for example.
nextText	The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.
numberOfMonths	The number of months to show at once. Multiple types supported: Number and Array
onChangeMonthYear	Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.
onClose	Called when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ("" if none) and the datepicker instance as parameters. this refers to the associated input field.
onSelect	Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
prevText	The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon.
selectOtherMonths	Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
shortYearCutoff	The cutoff year for determining the century for a date (used in conjunction with dateFormat ‘y’). Multiple types supported: Number and String
showAnim	The name of the animation used to show and hide the datepicker. Use "show" (the default), "slideDown", "fadeIn", any of the jQuery UI effects. Set to an empty string to disable animation.
showButtonPanel	Whether to display a button pane underneath the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons’ text can be customized using the currentText and closeText options respectively.
showCurrentAtPos	When displaying multiple months via the numberOfMonths option, the showCurrentAtPos option defines which position to display the current month in.
showMonthAfterYear	Whether to show the month after the year in the header.
showOn	When the datepicker should appear. The datepicker can appear when the field receives focus ("focus"), when a button is clicked ("button"), or when either event occurs ("both").
showOptions	If using one of the jQuery UI effects for the showAnim option, you can provide additional properties for that animation using this option.
showOtherMonths	Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
showWeek	When true, a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.
stepMonths	Set how many months to move when clicking the previous/next links.
weekHeader	The text to display for the week of the year column heading. Use the showWeek option to display this column.
yearRange	Specifies limits on which years are displayed in the dropdown in the form from:to when changeYear is true. The values can be absolute or relative (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be used to make relative values offset from the selected year rather than the current year (example: c-2:c+3).
yearSuffix	Additional text to display after the year in the month headers.

Methods

Basic syntax:

$(selector, context).datepicker ("action", [params]);

The following table lists:

Method	Description	Examples
destroy()	Removes the datepicker functionality completely. This will return the element back to its pre-init state.	$( ".selector" ).datepicker( "destroy" );
dialog( date [, onSelect ] [, options ] [, pos ] )	Displays datepicker in a jQuery UI dialog box.	$( ".selector" ).datepicker( "dialog", "25/07/2020" );
getDate()	Returns the current date for the datepicker or null if no date has been selected.	var currentDate = $( ".selector" ).datepicker( "getDate" );
hide()	Close a previously opened date picker.	$( ".selector" ).datepicker( "hide" );
isDisabled()	Determine whether a date picker has been disabled.	var isDisabled = $( ".selector" ).datepicker( "isDisabled" );
option( optionName )	Gets the value currently associated with the specified optionName.	var isDisabled = $( ".selector" ).datepicker( "option", "disabled" );
option()	Gets an object containing key/value pairs representing the current datepicker options hash.	var options = $( ".selector" ).datepicker( "option" );
option( optionName, value )	Sets the value of the datepicker option associated with the specified optionName.	$( ".selector" ).datepicker( "option", "disabled", true );
option( options )	Sets one or more options for the datepicker.	$( ".selector" ).datepicker( "option", { disabled: true } );
refresh()	Redraw the date picker, after having made some external modifications.	$( ".selector" ).datepicker( "refresh" );
setDate( date )	Sets the specified date as the current date of the datepicker.	$( ".selector" ).datepicker( "setDate", "10/12/2012" );
show()	Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.	$( ".selector" ).datepicker( "show" );
widget()	Returns a jQuery object containing the datepicker.	var widget = $( ".selector" ).datepicker( "widget" );

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) {}
);

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:las

isFirstItem()

$(".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 ) {}
});

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 ) {}
});

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 ) {}
});

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 )

Options

active

This option specifies the current active tab/panel. By default its value is 0.

Multiple types supported:

• Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
• 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 ) {}
});

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) {}
);

Syntax

$.widget.bridge(name, constructor)

Parameter	Type	Description
name	String	The name of the plugin to create.
constructor	Function()	The object to instantiate when the plugin is invoked.

Syntax

jQuery.widget( name [, base ], prototype )

Parameter	Type	Description
name	String	The name of the widget to create, including the namespace.
base	Function()	The base widget to inherit from. This must be a constructor that can be instantiated with the `new` keyword. Defaults to jQuery.Widget.
prototype	PlainObject	The object to use as a prototype for the widget.

Syntax

.position( options )

Option	Type	Description
my	String	This option specifies the location of the wrapped elements (the ones being re-positioned) to align with the target element or location. By default its value is center.
at	String	Specifies the location of the target element against which to align the re-positioned elements. Takes the same values as my option. By default its value is center.
of	Selector  or Element  or jQuery  or Event	It identifies the target element against which the wrapped elements are to be re-positioned, or an Event instance containing mouse coordinates to use as the target location. By default its value is null.
collision	String	Specifies the rules to be applied when the positioned element extends beyond the window in any direction. By default its value is flip.
using	Function()	Called for each wrapped element with a single argument that consists of an object hash with the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.
within	Selector or Element or jQuery	Allows you to specify which element to use as the bounding box for collision detection. This can come in handy if you need to contain the positioned element within a specific section of your page. By default its value is window.

Syntax

.addClass( className [, duration ] [, easing ] [, complete ] )

Parameter	Type	Description
className	String	Represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
duration	Number or String	Optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
easing	String	A string indicating which easing function to use for the transition. Its default value is swing.
complete	Fuction()	This is a callback method called for each element when the effect is complete for this element.

OR

.addClass( className [, options ] )

Parameter	Type	Description
className	String	Represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
options	Number or String	All animation settings. All properties are optional. Possible values are: duration − A string or number determining how long the animation will run.. Its default value is 400. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

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:

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• columnRuleColor
• outlineColor
• textDecorationColor
• textEmphasisColor

Syntax

$( "#example" ).animate(
   { 
      color: "white"
      backgroundColor: "black",
   }
);

Syntax

.cssClip( [dimensions ] )

Parameter	Type	Description
dimensions	Object	When setting the CSS clip the property, specify the top, right, bottom and left, properties to use the rect() style.

Syntax

.effect( effect [, options ] [, duration ] [, complete ] )

Parameter	Type	Description
effect	String	A string indicating which effect to use for the transition.
options	Object	Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.
duration	Number or String	This is of type Number or String and determines how long the animation will run. Its default value is 400.
complete	Fuction()	A function to call once the animation is complete called once per matched element.

OR

.effect( options )

Parameter	Type	Description
options	Object	All animation settings. The only required property is effect. Possible values are: effect − A string indicating which effect to use for the transition. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. duration − A string or number determining how long the animation will run. Its default value is 400. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Syntax

.hide( effect [, options ] [, duration ] [, complete ] )

Parameter	Type	Description
effect	String	A string indicating which effect to use for the transition.
options	Object	Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.
duration	Number or String	Optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
complete	Fuction()	This is a callback method called for each element when the effect is complete for this element.

OR

.hide( options )

Parameter	Type	Description
options	Object	All animation settings. The only required property is effect. Possible values are: effect − A string indicating which effect to use for the transition. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. duration − A string or number determining how long the animation will run. Its default value is 400. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Syntax

.removeClass( className [, duration ] [, easing ] [, complete ] )

Parameter	Type	Description
className	String	One or more class names (space separated) to be removed from the class attribute of each matched element.
duration	Number or String	Optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
easing	String	A string indicating which easing function to use for the transition. Its default value is swing.
complete	Fuction()	This is a callback method called for each element when the effect is complete for this element.

OR

.removeClass( className [, options ] )

Parameter	Type	Description
className	String	One or more class names (space separated) to be removed from the class attribute of each matched element.
options	Number or String	All animation settings. All properties are optional. Possible values are: duration − A string or number determining how long the animation will run.. Its default value is 400. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Syntax

.show( effect [, options ] [, duration ] [, complete ] )

Parameter	Type	Description
effect	String	A string indicating which effect to use for the transition.
options	Object	Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.
duration	Number or String	This is of type Number or String and determines how long the animation will run. Its default value is 400.
complete	Fuction()	A function to call once the animation is complete called once per matched element.

OR

.show( options )

Parameter	Type	Description
options	Object	All animation settings. The only required property is effect. Possible values are: effect − A string indicating which effect to use for the transition. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. duration − A string or number determining how long the animation will run. Its default value is 400. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Syntax:

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

Parameter	Type	Description
removeClassName	String	One or more class names (space separated) to be removed from the class attribute of each matched element.
addClassName	String	One or more class names (space separated) to be added to the class attribute of each matched element.
duration	Number or String	Optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
easing	String	A string indicating which easing function to use for the transition. Its default value is swing.
complete	Fuction()	This is a callback method called for each element when the effect is complete for this element.

OR

.switchClass( removeClassName, addClassName [, options ] )

Parameter	Type	Description
removeClassName	String	One or more class names (space separated) to be removed from the class attribute of each matched element.
addClassName	String	One or more class names (space separated) to be added to the class attribute of each matched element.
options	Number or String	All animation settings. All properties are optional. Possible values are: duration − A string or number determining how long the animation will run.. Its default value is 400. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Syntax

.toggle( effect [, options ] [, duration ] [, complete ] )

Parameter	Type	Description
effect	String	A string indicating which effect to use for the transition.
options	Object	Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.
duration	Number or String	This is of type Number or String and determines how long the animation will run. Its default value is 400.
complete	Fuction()	A function to call once the animation is complete called once per matched element.

OR

.toggle( options )

Parameter	Type	Description
options	Object	All animation settings. The only required property is effect. Possible values are: effect − A string indicating which effect to use for the transition. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. duration − A string or number determining how long the animation will run. Its default value is 400. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Syntax:

.transfer( options [, complete ] )

Parameter	Type	Description
options	Object	Possible values are: to: The target of the transfer effect. className: A class to add to the transfer element, in addition to ui-effects-transfer. duration: A string or number determining how long the animation will run. The strings "fast" and "slow" can be supplied to indicate durations of 200 and 600 milliseconds, respectively. The number type indicates the duration in milliseconds. easing: A string indicating which easing function to use for the transition.
complete	Function()	A function to call once the animation is complete called once per matched element.

Syntax

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

Parameter	Type	Description
className	String	Represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
switch	Boolean	Forces the toggleClass() method to add the class if true, or to remove the class if false.
duration	Number or String	Optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
easing	String	A string indicating which easing function to use for the transition.
complete	Fuction()	This is a callback method called for each element when the effect is complete for this element.

OR

.toggleClass( className [, switch ] [, options ] )

Parameter	Type	Description
className	String	Represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
switch	Boolean	Forces the toggleClass() method to add the class if true, or to remove the class if false.
options	Number or String	All animation settings. All properties are optional. Possible values are: duration − A string or number determining how long the animation will run.. Its default value is 400. easing − A string indicating which easing function to use for the transition. Its default value is swing. complete − This is a callback method called for each element when the effect is complete for this element. children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.