jQuery UI

API Reference

For jQuery UI Version 1.5.2

Table of Contents
UI/Draggables...............................................................................................................................1 UI/Droppables.............................................................................................................................. 5 UI/Sortables................................................................................................................................. 8 UI/Selectables............................................................................................................................. 13 UI/Resizables.............................................................................................................................. 16 UI/Accordion............................................................................................................................... 19 UI/Autocomplete......................................................................................................................... 25 UI/Colorpicker............................................................................................................................. 29 UI/Datepicker.............................................................................................................................. 31 UI/Dialog.................................................................................................................................... 43 UI/Magnifier................................................................................................................................ 47 UI/Progressbar............................................................................................................................ 50 UI/Slider..................................................................................................................................... 54 UI/Spinner.................................................................................................................................. 58 UI/Tabs...................................................................................................................................... 61

jQuery UI Documentation

UI/Draggables
Plugin methods
draggable(options) [Function]
Creates new draggables on the nodeset supplied by the query.
Signature

draggable(options) » jQuery
Description

This jQuery plugin makes DOM nodes draggable by mouse. You can additionally supply a great range of options to make them fit your needs. All callbacks (start,stop,drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * '''ui.options''' - options used to initialize the draggable * '''ui.helper''' - the JQuery object representing the helper that's being dragged * '''ui.position''' - current position of the helper as { top, left } object, relative to the offset element * '''ui.absolutePosition''' - current absolute position of the helper as { top, left } object, relative to page
Parameters

options (Options) A set of key/value pairs that configure the draggable. All options are optional.
Options

appendTo (Element, Selector) For a draggable with a ''helper'' specified, the matched element passed to ''appendTo'' will be used as the helper's container. If not specified, the helper is appended to the same container as the draggable. axis (String) Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'. cancel (Selector) Prevents dragging if you start on elements matching the selector. containment (Element, Selector) Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document' or a jQuery selector. cursor (String) The css cursor for the helper during the drag operation. cursorAt (Object, Array) Moves the dragging element/helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of the keys ''top'', ''left'', ''right'', ''bottom''. 1

jQuery UI Documentation

delay (Integer) Time in milliseconds to define when the dragging should start. It helps preventing unwanted drags when clicking on an element. distance (Integer) Tolerance, in pixels, for when dragging should start. If specified, dragging will not start until after mouse is dragged beyond distance. grid ([Integer x, Integer y]) Snaps the dragging element/helper to a grid, every x and y pixels. handle (Element, Selector) Restricts drag start click to the specified element. Default value: draggable element. helper (String, Function) Allows for a helper element to be used for dragging display. The 'clone' option will produce the 'ghosting' effect. Possible values: 'original', 'clone', Function. If you supply a function, it must return a valid DOM node. opacity (Float) Opacity for the helper while being dragged. revert (Boolean) If set to true, the element will return to its start position when dragging stops. Also accepts the strings "valid" and "invalid": If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around. revertDuration (Integer) The duration of the revert animation. Since version 1.6 stable. scroll (Boolean) If true, container auto-scrolls while dragging. scrollSensitivity (Integer) Distance in pixels from the edge of the view port after which the view port should scroll. Distance is relative to pointer, not the draggable. scrollSpeed (Integer) The speed at which the window should scroll once the mouse pointer gets within the ''scrollSensitivity'' distance. snap (Boolean,Selector) If set to a selector or to true (same as selector ".ui-draggable"), the new draggable will snap to the edges of the selected elements when coming to an edge of the element. snapMode ("inner","outer","both") If set, the dragged element will only snap to the outer edges or to the inner edges of the element. snapTolerance (Integer) The distance in pixels from the snapping elements before the snapping should occur. refreshPositions (Boolean) If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance. zIndex (Integer) z-index for the helper while being dragged. start (function(e, ui)) Function that gets called when dragging starts. drag (function(e, ui)) Function that gets called when the mouse is moved during the dragging. stop (function(e, ui)) Function that gets called when dragging stops.
Examples

Example 1 Makes the div draggable. Code $(".block").draggable(); Html <div class="block"></div> 2

jQuery UI Documentation

Example 2 Makes the div draggable. Code $(".block").draggable(); Html <div class="block"></div>

draggable("disable") [Function]
Temporarily disable the draggable functionality.
Signature

draggable("disable") » jQuery
Description

This method temporarily disables draggable functionality. It can later be reenabled by calling $(..).draggable("enable").
Parameters

"disable" (String)
Examples

Example Makes the div draggable. Code $(".block").draggable(); Html <div class="block"></div>

draggable("enable") [Function]
Enable the draggable functionality.
Signature

3

jQuery UI Documentation

draggable("enable") » jQuery
Description

This method re-enables a previously disabled draggable.
Parameters

"enable" (String)

draggable("destroy") [Function]
Completely remove the draggable functionality.
Signature

draggable("destroy") » jQuery
Description

This method removes the draggable functionality completely.
Parameters

"destroy" (String)

4

jQuery UI Documentation

UI/Droppables
Plugin methods
droppable(options) [Function]
Creates new droppables on the nodeset supplied by the query.
Signature

droppable(options) » Dropset
Description

This jQuery plugin makes DOM nodes droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * * * * * '''ui.options''' - options used to initialize the droppable '''ui.position''' - current position of the draggable helper '''ui.absolutePosition''' - current absolute position of the draggable helper '''ui.draggable''' - current draggable element '''ui.helper''' - current draggable helper

Parameters

options (Options) A set of key/value pairs that configure the droppable. All options are optional.
Options

accept (Boolean function(draggable)) This function is called for each draggable on the page, to provide a custom filter. Return true if draggable should be accepted. accept (String) The string should be a jQuery selector. All draggables that match the selector will be accepted. activeClass (String) The class that should be added to the droppable while an acceptable draggable is being dragged. greedy (Boolean) If true, will prevent event propagation on nested droppables. Default value: false. hoverClass (String) The class that should be added to the droppable while being hovered by an acceptable draggable. tolerance (String) Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. Default value: 'intersect'. activate (function(e, ui)) This function is called any time an accepted draggable starts dragging. 5

jQuery UI Documentation

deactivate (function(e, ui)) This function is called any time an accepted draggable stops dragging. over (function(e, ui)) This function is called as an accepted draggable is dragged 'over' (within the tolerance of) this droppable. out (function(e, ui)) This function is called when an accepted draggable is dragged out (within the tolerance of) this droppable. drop (function(e, ui)) This function is called when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. $(ui.draggable) represents the draggable.

droppable("disable") [Function]
Temporarily disable the droppable functionality.
Signature

droppable("disable") » jQuery
Description

This method temporarily disables droppable functionality. It can later be reenabled by calling $(..).droppable("enable").
Parameters

"disable" (String)

droppable("enable") [Function]
Enable the droppable functionality.
Signature

droppable("enable") » jQuery
Description

This method re-enables a previously disabled droppable.
Parameters

"enable" (String)

droppable("destroy") [Function]

6

jQuery UI Documentation

Completely remove the droppable functionality.
Signature

droppable("destroy") » jQuery
Description

This method removes the droppable functionality completely.
Parameters

"destroy" (String)

7

jQuery UI Documentation

UI/Sortables
Plugin methods
sortable(options) [Function]
Creates new sortable on the nodeset supplied by the query.
Signature

sortable(options) »
Description

This jQuery plugin makes DOM nodes sortable by mouse. You can additionally supply a great range of options to make them fit your needs. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * '''ui.options''' - options used to initialize the sortable * '''ui.position''' - current position of the helper * '''ui.absolutePosition''' - current absolute position of the helper * '''ui.helper''' - the current helper element (most often a clone of the item) * '''ui.placeholder''' - the placeholder (if you defined one) * '''ui.item''' - the current dragged element * '''ui.sender''' - the sortable where the item comes from (only exists if you move from one connected list to another)
Parameters

options (Options) A set of key/value pairs that configure the sortable. All options are optional.
Options

axis (String) If defined, the items can be dragged only horizontally or vertically. Options:"x"/"y" cancel (Selector) Prevents sorting if you start on elements matching the selector. connectWith (Array) Takes an array of jQuery selectors that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other. containment (String) Constrains dragging to within the bounds of the specified element. Possible values: 'parent', 'document', jQuery String. cursor (String) Defines the cursor that is being shown while sorting. delay (Integer) Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element. 8

jQuery UI Documentation

distance (Integer) Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle. dropOnEmpty (Boolean) If empty allows for an item to be dropped from a linked selectable. handle (Selector, Element) See draggable options for an explanation. forcePlaceholderSize (Boolean) It forces the placeholder to have a size. helper (Element function(e, el)) Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a valid DOM node to be used as a custom proxy helper. tolerance (String) This is the way the reordering behaves during drag. Default is "guess", which guesses what mode to use ("intersect" or "tolerance"), in some setups, "pointer" is more natural. items (Selector) Items to apply sorting to. opacity (Float) Defines the opacity of the helper while sorting. From 0.01 to 1 placeholder (String) Class that gets applied to the otherwise white space. revert (Boolean) If set to true, the item will be reverted to its new DOM position with a smooth animation. Default: true. scroll (Boolean) If set to true, the page scrolls when coming to an edge. scrollSensitivity (Integer) Defines how near the mouse must be to an edge to start scrolling. scrollSpeed (Integer) Defines how many pixels the page will scroll when coming to an edge. zIndex (Integer) z-index for element/helper while being sorted. start (function(e, ui)) Function that gets called when sorting starts. sort (function(e, ui)) Function that gets called during sorting. change (function(e, ui)) Function that gets called during sorting, but only when the DOM position has changed. stop (function(e, ui)) Function that gets called when sorting has stopped. beforeStop (function(e, ui)) Function that gets called when sorting stops, but when the placeholder/helper is still available. update (function(e, ui)) Function that gets called when the user stopped sorting and the DOM position has changed. receive (function(e, ui)) Function that gets called when a connected sortable list has received an item from another list. remove (function(e, ui)) Function that gets called when a sortable item has been dragged out from the list and into another. over (function(e, ui)) Function that gets called when a sortable item is moved into a connected list. out (function(e, ui)) Function that gets called when a sortable item is moved away from a connected list. activate (function(e, ui)) Function that gets called when using connected lists, every connected list on drag start receives it. deactivate (function(e, ui)) Function that gets called when sorting was stopped, is propagated to all possible connected lists.

sortable("disable") [Function]

9

jQuery UI Documentation

Temporarily disable the sortable functionality.
Signature

sortable("disable") » jQuery
Description

This method temporarily disables sortable functionality. It can later be reenabled by calling $(..).sortable("enable").
Parameters

"disable" (String)

sortable("enable") [Function]
Enable the sortable functionality.
Signature

sortable("enable") » jQuery
Description

This method re-enables a previously disabled sortable.
Parameters

"enable" (String)

sortable("destroy") [Function]
Completely remove the sortable functionality.
Signature

sortable("destroy") » jQuery
Description

This method removes the sortable functionality completely.
Parameters

10

jQuery UI Documentation

"destroy" (String)

sortable("serialize", options) [Function]
Serializes the sortable's item id's into a form/ajax submittable string.
Signature

sortable("serialize", options) » String
Description

Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server. It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number". You can also give in a second argument to custom define how the function works. If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.
Parameters

"serialize" (String) options (Hash) a key/value hash defining how serialize works.
Options

attribute (String) the attribute that is parsed. Default: 'id'. expression (Regexp) the expression used to parse the attribute. The default expression used is "(.+)[-=_](.+)". key (String) The key in the url hash. If not specified, it will take the first result of the expression.

sortable("refresh") [Function]
Refresh the sortable items.
Signature

sortable("refresh") » jQuery
Description

11

jQuery UI Documentation

Custom trigger the reloading of all sortable items, causing new items to be recognized.
Parameters

"refresh" (String)

sortable("refreshPositions") [Function]
Refresh the cached positions of the sortables' items.
Signature

sortable("refreshPositions") » jQuery
Description

Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.
Parameters

"refreshPositions" (String)

12

jQuery UI Documentation

UI/Selectables
Plugin methods
selectable(options) [Function]
Creates new selectable on the nodeset supplied by the query.
Signature

selectable(options) »
Parameters

options (Options) A set of key/value pairs that configure the selectable. All options are optional.
Options

autoRefresh (Boolean) This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually. Default value: true filter (Selector) The matching child elements will be made selectees (able to be selected). Default value: '*' selected (Function) This callback is fired at the end of the select operation, on each element added to the selection. selecting (Function) This callback is fired during the select operation, on each element added to the selection. start (Function) This callback is fired at the beginning of the select operation. stop (Function) This callback is fired at the end of the select operation. unselected (Function) This callback is fired at the end of the select operation, on each element removed from the selection. unselecting (Function) This callback is fired during the select operation, on each element removed from the selection.

selectable("disable") [Function]
Temporarily disable the selectable functionality.
Signature

selectable("disable") » jQuery

13

jQuery UI Documentation

Description

This method temporarily disables selectable functionality. It can later be reenabled by calling $(..).selectable("enable").
Parameters

"disable" (String)

selectable("enable") [Function]
Enable the selectable functionality.
Signature

selectable("enable") » jQuery
Description

This method re-enables a previously disabled selectable.
Parameters

"enable" (String)

selectable("refresh") [Function]
Refresh the position and size of each selectee element
Signature

selectable("refresh") » jQuery
Description

This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.
Parameters

"refresh" (String)

selectable("toggle") [Function]

14

jQuery UI Documentation

Toggles the state of selectable functionality.
Signature

selectable("toggle") » jQuery
Description

This method either enables or disables selecting based on the current state.
Parameters

"toggle" (String)

selectable("destroy") [Function]
Completely remove the selectable functionality.
Signature

selectable("destroy") » jQuery
Description

This method removes the selectable functionality completely.
Parameters

"destroy" (String)

15

jQuery UI Documentation

UI/Resizables
Plugin methods
resizable(options) [Function]
Creates new resizables on the nodeset supplied by the query.
Signature

resizable(options) »
Description

This jQuery plugin makes DOM nodes resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height. All callbacks (start,stop,drag) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields: * * * * * * * '''ui.element''' - a jQuery object containing the resizable element '''ui.helper''' - a jQuery object containing the helper element '''ui.options''' - options used to initialize the resizable '''ui.originalPosition''' - {top, left} before resizing started '''ui.originalSize''' - {width, height} before resizing started '''ui.position''' - {top, left} current position '''ui.size''' - {width, height} current size

Parameters

options (Options) A set of key/value pairs that configure the resizable. All options are optional, but a resizable will not be useful without at least one handle.
Options

animate (Boolean) Animates to the final size after resizing. animateDuration (Integer) Duration time for animating. Time in milliseconds or "slow"/"normal"/"fast". animateEasing (String) Easing effect for animating. alsoResize (Selector) Resize these elements synchronous when resizing. aspectRatio (Boolean, Number) When set to true, resizing is constrained by the original aspect ratio. If an alternate ratio is desired, you can submit a number and then the aspect ratio will be constrained by height \ width. autoHide (Boolean) When set to true, automatically hides the handles except when the mouse hovers over the element. 16

jQuery UI Documentation

cancel (Selector) Prevents resizing if you start on elements matching the selector. containment (Element, Selector) Constrains resizing to within the bounds of the specified element - can be a DOM element, 'parent', 'document' or a jQuery selector. delay (Integer) Time in milliseconds to define when the dragging should start. It helps preventing unwanted drags when clicking on an element. disableSelection (Boolean) When set to true, stops users from selecting handles and helpers. distance (Integer) Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. ghost (Boolean) When set to true, shows a substitute element when resizing. grid ([Integer x, Integer y]) Snaps the resizing element to a grid size, every x and y pixels. handles ({n, e, s, w, ne, se, sw, nw, all}) Each handle string (if specified) should be a jquery selector matching the child element of the resizable to use as the handle. If the handle is not a child of the resizable, you can pass in the DOM node or a valid jQuery object directly. helper (String) This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized. knobHandles (Boolean) Use square handlebars as resize handles, rather than the default border. maxHeight (Int) This is the maximum height the resizable should be allowed to resize to. maxWidth (Int) This is the maximum width the resizable should be allowed to resize to. minHeight (Int) This is the minimum height the resizable should be allowed to resize to. minWidth (Int) This is the minimum width the resizable should be allowed to resize to. preserveCursor (Boolean) Whether shows direction cursors when resizing. preventDefault (Boolean) Whether prevent Safari's default resizing function on textareas. proportionallyResize (Array) Advanced option that allows other elements to get proportionally resized together with the original one. Just specify jquery string in this array or directly insert DOM nodes. transparent (Boolean) Whether the element is transparent when resizing. start (function(e, ui)) This function is called at the start of a resize operation. resize (function(e, ui)) This function is called during the resize, on the drag of the resize handler. stop (function(e, ui)) This function is called at the end of a resize operation.

resizable("disable") [Function]
Temporarily disable the resizable functionality.
Signature

resizable("disable") » jQuery
Description

This method temporarily disables resizable functionality. It can later be reenabled by calling $(..).resizable("enable").

17

jQuery UI Documentation

Parameters

"disable" (String)

resizable("enable") [Function]
Enable the resizable functionality.
Signature

resizable("enable") » jQuery
Description

This method re-enables a previously disabled resizable.
Parameters

"enable" (String)

resizable("destroy") [Function]
Completely remove the resizable functionality.
Signature

resizable("destroy") » jQuery
Description

This method removes the resizable functionality completely.
Parameters

"destroy" (String)

18

jQuery UI Documentation

UI/Accordion
Plugin methods
accordion(options) [Function]
Make the selected elements Accordion widgets.
Signature

accordion(options) » jQuery
Description

Semantic requirements: If the structure of your container is flat with unique tags for header and content elements, eg. a definition list (dl > dt + dd), you don't have to specify any options at all. If your structure uses the same elements for header and content or uses some kind of nested structure, you have to specify the header elements, eg. via class, see the second example. Use activate(Number) to change the active content programmatically. A "accordionchange" event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately. <pre>$(".ui-accordion").bind("accordionchange", function(event, ui) { ui.options // options used to intialize this widget ui.newHeader // jQuery, activated header ui.oldHeader // jQuery, previous header ui.newContent // jQuery, activated content ui.oldContent // jQuery, previous content });</pre> Accordions being created on a jQuery object. To avoid visual surprises, each element to be made an accordion should have a set of children elements, which will become the accordion's items. E.g.:<pre> <div id="my_accordion"> <div>...</div> <div>...</div> ... <div>...</div> </div> <script type="text/javascript" charset="utf-8"> $('#my_accordion').accordion(...) </script></pre> 19

jQuery UI Documentation

Each item must have exactly two elements - the first one for the header, and the second one for the content. The first element needs to be queryable. The second element does not have to be marked in any special way:<pre> <div class="accordion_item"> <h3>....</h3> <div>...</div> </div></pre> With that infrastructure in place it is a simple call to create an accordion (add other options to taste):<pre> $("div#my_accordion").accordion({ header: "h3" });</pre>
Parameters

options (Options) A set of key/value pairs that configure the accordion. All options are optional.
Options

active (String, Element, jQuery, Boolean, Number) Selector for the active element. Set to false to display none at start. Needs &laquo;alwaysOpen: false&raquo;. alwaysOpen (Boolean) Whether there must be one content element open. Allows collapsing the active section by the triggering event (click is the default). animated (Boolean, String) Choose your favorite animation, or disable them (set to false). In addition to the default, "bounceslide" and "easeslide" are supported (both require the easing plugin). autoHeight (Boolean) If set, the highest content part is used as height reference for all other parts. Provides more consistent animations. clearStyle (Boolean) If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoheight. event (String) The event on which to trigger the accordion. fillSpace (Boolean) If set, the accordion completely fills the height of the parent element. Overrides autoheight. header (String, Element, jQuery) Selector for the header element. navigation (Boolean) If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher. navigationFilter (Function) Overwrite the default location.href-matching with your own matcher. selectedClass (String) Class for active header elements.
Examples

Example A simple jQuery UI Accordion. Code $("#example").accordion();

20

jQuery UI Documentation

Html <link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"> <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.accordion.js"></script> <ul id="example" class="ui-accordion-container" style="width: 200px;"> <li> <a href='#' class="ui-accordion-link"> Test 1 </a> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#"> hello </a> </div> </li> <li> <div class="ui-accordion-left"></div> <a href='#' class="ui-accordion-link">Test 2<div class="ui-accordionright"></div></a> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </li> <li> <div class="ui-accordion-left"></div> <a href='#' class="ui-accordion-link">Test 3<div class="ui-accordionright"></div></a> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </li> </ul>

accordion("activate", index) [Function]
Activate a content part of the Accordion programmatically.
Signature

accordion("activate", index) » jQuery 21

jQuery UI Documentation

Description

The index can be a zero-indexed number to match the position of the header to close or a string expression matching an element. Pass -1 to close all (only possible with alwaysOpen:false).
Parameters

"activate" (String) index (String, Element, jQuery, Boolean, Number) An Integer specifying the zero-based index of the content to be activated or an expression specifying the element, or an element/jQuery object, or a boolean false to close all.
Examples

Example 1 Activate the second content of the Accordion contained in <div id="accordion">. Code $(".selector").accordion("activate", 1) Example 2 Close all content parts of the accordion. Code $(".selector").accordion("activate", false) Example 3 Activate the first element matching the given expression. Code $(".selector").accordion("activate", "a:first")

accordion("enable") [Function]
Enable the selected accordion.
Signature

accordion("enable") » jQuery
Description

Enabling an accordion reverts the change made by accordion("disable"), turning the behaviour back to the usual state. 22

jQuery UI Documentation

Parameters

"enable" (String)
Examples

Example Activate the second content of the Accordion contained in <div id="accordion">. Code $(".selector").accordion("enable")

accordion("disable") [Function]
Disables the selected accordion.
Signature

accordion("disable") » jQuery
Description

Disabling an accordion turns of the ability to close or open anything in the accordion, it disables all interactions. To completely remove the accordion behaviour, including visual changes, use [[UI/Accordion/accordion#.22destroy.22|accordion("destroy")]].
Parameters

"disable" (String)
Examples

Example Activate the second content of the Accordion contained in <div id="accordion">. Code $(".selector").accordion("disable")

accordion("destroy") [Function]
Destroy the selected accordion.

23

jQuery UI Documentation

Signature

accordion("destroy") » jQuery
Description

Destroying the accordion completely reverts changes made by accordion), including events and styles. To just temporily disable the behaviour of an accordion, use [[UI/Accordion/accordion#.22disable.22|accordion("disable")]].
Parameters

"destroy" (String)
Examples

Example Activate the second content of the Accordion contained in <div id="accordion">. Code $(".selector").accordion("disable")

24

jQuery UI Documentation

UI/Autocomplete
Plugin methods
autocomplete(options) [Function]
Make the selected elements Autocomplete.
Signature

autocomplete(options) » jQuery
Parameters

options (Options) A set of key/value pairs that configure the autocomplete. All options are optional.
Options

url (String) A URL pointing at a remote resource. data (Array) Local data as an array. minChars (Number) The minimum number of characters a user has to type before the autocompleter activates. delay (Number) The delay in milliseconds the autocompleter waits after a keystroke to activate itself. cacheLength (Number) The number of backend query results to store in cache. If set to 1 (the current result), no caching will happen. Must be >= 1. matchSubset (Boolean) Whether or not the autocompleter can use a cache for more specific queries. This means that all matches of "foot" are a subset of all matches for "foo". Usually this is true, and using this options decreases server load and increases performance. Only useful with cacheLength settings bigger than one, like 10. matchCase (Boolean) Whether or not the comparison is case sensitive. Important only if you use caching. matchContains (Boolean) Whether or not the comparison looks inside (i.e. does "ba" match "foo bar") the search results. Important only if you use caching. Don't mix with autofill. mustMatch (Boolean) If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box. selectFirst (Boolean) If this is set to true, the first autocomplete value will be automatically selected on tab/return, even if it has not been handpicked by keyboard or mouse action. If there is a handpicked (highlighted) result, that result will take precedence. extraParams (Object) Extra parameters for the backend. If you were to specify { bar:4 }, the autocompleter would call my_autocomplete_backend.php?q=foo&bar=4 (assuming the input box contains "foo"). The param can be a function that is called to calculate the param before each request. 25

jQuery UI Documentation

formatItem (Function) Provides advanced markup for an item. For each row of results, this function will be called. The returned value will be displayed inside an LI element in the results list. Autocompleter will provide 4 parameters: the results row, the position of the row in the list of results (starting at 1), the number of items in the list of results and the search term. formatMatch (Function) Use this option if you want to limit the data that autocomplete searches for matches. For example, there may be items you want displayed to the user, but don't want included in the data that's searched. Gets called with the same arguments as formatItem. formatResult (Function) Similar to formatItem, but provides the formatting for the value to be put into the input field. Again three arguments: Data, position (starting with one) and total number of data. multiple (Boolean) Whether to allow more than one autocompleted-value to enter. multipleSeparator (String) Seperator to put between values when using multiple option. width (Number) Specify a custom width for the select box. autoFill (Boolean) Fill the textinput while still selecting a value, replacing the value if more is typed or something else is selected. max (Number) Limit the number of items in the select box. Is also sent as a "limit" parameter with a remote request. highlight (Boolean, Function) Whether and how to highlight matches in the select box. Set to false to disable. Set to a function to customize. The function gets the value as the first argument and the search term as the second and must return the formatted value. scroll (Boolean) Whether to scroll when more results than configured via scrollHeight are available. scrollHeight (Number) height of scrolled autocomplete control in pixels

autocomplete("result", handler) [Function]
Handle the result of a search event.
Signature

autocomplete("result", handler) » jQuery
Description

Is executed when the user selects a value or a programmatic search event is triggered (see 'search'). You can add and remove (using unbind("result")) this event at any time.
Parameters

"result" (String) handler (Function) The event handler, gets a default event object as first and the selected list item as second argument.
Examples

26

jQuery UI Documentation

Example Bind a handler to the result event to display the selected value in a #result element. The first argument is a generic event object, in this case with type "result". The second argument refers to the selected data, which can be a plain string value or an array or object. The third argument is the formatted value that is inserted into the input field. Code $('input#suggest').autocomplete("result",function(event, data, formatted) { $("#result").html( !data ? "No match!" : "Selected: " + formatted); });

autocomplete("search") [Function]
Trigger a search event.
Signature

autocomplete("search") » jQuery
Description

See 'result' for binding to that event. A search event mimics the same behaviour as when the user selects a value from the list of autocomplete items. You can use it to execute anything that does something with the selected value, beyond simply putting the value into the input and submitting it.
Parameters

"search" (String)

autocomplete("flushCache") [Function]
Flush (empty) the cache of matched input's autocompleters.
Signature

autocomplete("flushCache") » jQuery
Parameters

"flushCache" (String)

autocomplete("setData", options) [Function]

27

jQuery UI Documentation

Updates the options for the current autocomplete field.
Signature

autocomplete("setData", options) » jQuery
Description

This allows you to change things like the URL, max items to display, etc. If you're changing the URL, be sure to call the 'flushCache' method.
Parameters

"setData" (String) options (Options) The options to set.

autocomplete("destroy") [Function]
Completely remove the autocomplete.
Signature

autocomplete("destroy") » jQuery
Description

This method removes the autocomplete completely.
Parameters

"destroy" (String)

28

jQuery UI Documentation

UI/Colorpicker
Plugin methods
colorpicker(options) [Function]
Make the selected elements colorpicker.
Signature

colorpicker(options) » jQuery
Parameters

options (Options) A set of key/value pairs that configure the colorpicker. All options are optional.
Options

eventName (String) The desired event to trigger the colorpicker. color (String or Object) The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) flat (Boolean) Whatever if the color picker is appended to the element or triggered by an event. show (Function) Callback function triggered when the color picker is shown. beforeShow (Function) Callback function triggered before the color picker is shown. change (Function) Callback function triggered when the color is changed. submit (Function) Callback function triggered when the color it is chosen. hide (Function) Callback function triggered when the color picker is hidden.

colorpicker("setColor", color) [Function]
Set a new color.
Signature

colorpicker("setColor", color) » jQuery
Description

This method set a new color.
Parameters

29

jQuery UI Documentation

"setColor" (String) color (String or Object) The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).

colorpicker("destroy") [Function]
Completely remove the colorpicker.
Signature

colorpicker("destroy") » jQuery
Description

This method removes the colorpicker completely.
Parameters

"destroy" (String)

30

jQuery UI Documentation

UI/Datepicker
Plugin methods
datepicker(options) [Function]
The method that you use to create a new date picker. Customize with plenty of options.
Signature

datepicker(options) » jQuery
Description

Attach the date picker to an input or for an inline view attach the date picker to a div or span.
Parameters

options (Options) A set of key/value pairs that configure the date picker. All options are optional.
Options

clearText (String) The text to display for the clear link. This attribute is one of the regionalisation attributes. clearStatus (String) The text to display in the status bar for the clear link. This attribute is one of the regionalisation attributes. mandatory (Boolean) True if a date must be selected, causing the Clear link to be removed. False if the date is not required. closeText (String) The text to display for the close link. This attribute is one of the regionalisation attributes. closeStatus (String) The text to display in the status bar for the close link. This attribute is one of the regionalisation attributes. closeAtTop (Boolean) Position the Clear/Close links at the top (true) or bottom (false). prevText (String) The text to display for the previous month link. This attribute is one of the regionalisation attributes. prevStatus (String) The text to display in the status bar for the previous month link. This attribute is one of the regionalisation attributes. nextText (String) The text to display for the next month link. This attribute is one of the regionalisation attributes. nextStatus (String) The text to display in the status bar for the next month link. This attribute is one of the regionalisation attributes. hideIfNoPrevNext (Boolean) Normally the previous and next links are disabled when not 31

jQuery UI Documentation applicable (see ''minDate''/''maxDate''). You can hide them altogether by setting this attribute to true. currentText (String) The text to display for the current day link. This attribute is one of the regionalisation attributes. currentStatus (String) The text to display in the status bar for the current day link. This attribute is one of the regionalisation attributes. gotoCurrent (Boolean) If true, the current day link moves to the currently selected date instead of today. navigationAsDateFormat (Boolean) When true the ''formatDate'' function is applied to the ''prevText'', ''nextText'', and ''currentText'' values before display, allowing them to display the target month names for example. monthNames (String[]) The list of full month names, as used in the month header on each datepicker and as requested via the ''dateFormat'' setting. This attribute is one of the regionalisation attributes. monthNamesShort (String[]) The list of abbreviated month names, for use as requested via the ''dateFormat'' setting. This attribute is one of the regionalisation attributes. changeMonth (Boolean) Allows you to change the month by selecting from a drop-down list. You can disable this feature by setting the attribute to false. monthStatus (String) The text to display in the status bar for the month drop-down list. This attribute is one of the regionalisation attributes. yearRange (String) Control the range of years displayed in the year drop-down: either relative to current year (-nn:+nn) or absolute (nnnn:nnnn). changeYear (Boolean) Allows you to change the year by selecting from a drop-down list. You can disable this feature by setting the attribute to false. yearStatus (String) The text to display in the status bar for the year drop-down list. This attribute is one of the regionalisation attributes. weekHeader (String) The column header for the week of the year (see ''showWeeks''). This attribute is one of the regionalisation attributes. weekStatus (String) The text to display in the status bar for the week of the year. This attribute is one of the regionalisation attributes. dayNames (String[]) The list of long day names, starting from Sunday, for use as requested via the ''dateFormat'' setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes. dayNamesShort (String[]) The list of abbreviated day names, starting from Sunday, for use as requested via the ''dateFormat'' setting. This attribute is one of the regionalisation attributes. dayNamesMin (String[]) The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes. firstDay (Number) Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes. changeFirstDay (Boolean) Allows you to click on the day names to have the week start on that day. You can disable this feature by setting the attribute to false. dayStatus (String) The text to display in the status bar for the day of the week links. Use 'DD' for the full name of the day, or 'D' for its short name. This attribute is one of the regionalisation attributes. highlightWeek (Boolean) If true, the entire week row is highlighted when the mouse hovers over a day. showOtherMonths (Boolean) Display dates in other months (non-selectable) at the start or end of the current month. 32

jQuery UI Documentation

dateStatus (String) The text to display in the status bar for the date links. Use any of the date formatting characters (see ''dateFormat''). This attribute is one of the regionalisation attributes. showWeeks (Boolean) Display the week of the year alongside each month. The column header is specified by the ''weekHeader'' setting. The week number is calculated based on the first date shown in each row in the datepicker, and so may not apply to all days in that row. The ''calculateWeek'' setting allows you to change the week of the year calculation from the default ISO 8601 implementation. calculateWeek (Function) Perform the week of the year calculation. This function accepts a Date as a parameter and returns the number of the corresponding week of the year. The default implementation uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the first week of the current year, and that up to three days from the current year may be included in the last week of the previous year. numberOfMonths (Number, Number[2]) Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display. stepMonths (Number) Set how many months to move when clicking the Previous/Next links. rangeSelect (Boolean) Set to true to allow the selection of a date range on the one date picker, or false to just select a single date. For a date range, the first click sets the start date and a second click sets the end date. rangeSeparator (String) Set the text to use to separate the two dates in a date range via the ''onSelect'' function. defaultDate (Date(yyyy, mm - 1, dd), Number, String) Set the date to display on first opening if the field is blank. Specify either an actual date via a Date object, or relative to today with a number (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. minDate (Date(yyyy, mm - 1, dd), Number, String) Set a minimum selectable date via a Date object, or relative to today with a number (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit. maxDate (Date(yyyy, mm - 1, dd), Number, String) Set a maximum selectable date via a Date object, or relative to today with a number (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 +1w'), or null for no limit. dateFormat (String) The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the [[UI/Datepicker/%24.datepicker.formatDate|formatDate]] function. shortYearCutoff (String, Number) Set the cutoff year for determining the century for a date (used in conjunction with ''dateFormat'' 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century. initStatus (String) The text to display in the status bar when the datepicker is first opened. This attribute is one of the regionalisation attributes. showStatus (Boolean) True if a status bar should be shown within the datepicker indicating what each control does. False if no status bar is required. statusForDate (Function) The function to call to determine the status text for a date within the datepicker. The default function uses the ''dateStatus'' value and substitutes in information from the current date. appendText (String) The text to display after each date field, e.g. to show the required format.

33

jQuery UI Documentation

duration (String, Number) Control the speed at which the datepicker appears, it may be a time in milliseconds, a string representing one of the three predefined speeds ("slow", "normal", "fast"), or '' for immediately. showOn (String) Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both'). showAnim (String) Set the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', or any of the show/hide [http://docs.jquery.com/UI/Effects jQuery UI effects]. showOptions (Options) If using one of the jQuery UI effects for ''showAnim'', you can provide additional settings for that animation via this option. buttonText (String) The text to display on the trigger button. Use in conjunction with ''showOn'' equal to 'button' or 'both'. buttonImage (String) The URL for the popup button image. If set, button text becomes the ''alt'' value and is not directly displayed. buttonImageOnly (Boolean) Set to true to place an image after the field to use as the trigger without it appearing on a button. beforeShow (Function) Can be a function that takes an input field and current datepicker instance and returns a settings (anonymous) object to update the date picker with. It is called just before the datepicker is displayed. beforeShowDay (Function) The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and [1] equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed. altField (String) The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the ''altFormat'' setting below to change the format of the date within this field. Leave as blank for no alternate field. altFormat (String) The ''dateFormat'' to be used for the ''altField'' above. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. onSelect (Function) Allows you to define your own event when the datepicker is selected. The function receives the selected date(s) as text and the datepicker instance as parameters. ''this'' refers to the associated input field. onChangeMonthYear (Function) Allows you to define your own event when the datepicker moves to a new month and/or year. The function receives the date of the first day of the first displayed month and the datepicker instance as parameters. ''this'' refers to the associated input field. onClose (Function) Allows you to define your own event when the datepicker is closed, whether or not a date is selected. The function receives the selected date(s) as a date or array of dates and the datepicker instance as parameters. ''this'' refers to the associated input field. isRTL (Boolean) True if the current language is drawn from right to left. This attribute is one of the regionalisation attributes. constrainInput (Boolean) True if the input field is constrained to the current date format.

datepicker("option", settings) [Function]
Change the settings for a previously attached datepicker.<br>Since 1.6, "change" has been deprecated and in it's place is this method.

34

jQuery UI Documentation

Signature

datepicker("option", settings) » jQuery
Parameters

"option" (String) settings (Options) The new settings for these date pickers. These are the same as when [[UI/Datepicker/datepicker|attaching a datepicker]].

datepicker("dialog", dateText, onSelect, settings, pos) [Function]
Open a datepicker in a "dialog" box.
Signature

datepicker("dialog", dateText, onSelect, settings, pos) » jQuery
Parameters

"dialog" (String) dateText (String) The initial date for the date picker. onSelect (Function) A callback function when a date is selected. The function receives the date text and date picker instance as parameters. settings (Options) The new settings for the date picker. pos (Number[2] or MouseEvent) The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.

datepicker("disable") [Function]
Disable an input field and its attached date picker.
Signature

datepicker("disable") » jQuery
Parameters

"disable" (String)

datepicker("enable") [Function]
Enable an input field and its attached date picker.

35

jQuery UI Documentation

Signature

datepicker("enable") » jQuery
Parameters

"enable" (String)

datepicker("isDisabled") [Function]
Determine whether a date picker has been disabled.
Signature

datepicker("isDisabled") » boolean
Description

Only the first control is processed.
Parameters

"isDisabled" (String)

datepicker("hide", speed) [Function]
Close a previously opened date picker.
Signature

datepicker("hide", speed) » jQuery
Parameters

"hide" (String) speed (String) The speed at which to close the date picker (optional).

datepicker("show") [Function]
Call up a previously attached date picker.
Signature

datepicker("show") » jQuery 36

jQuery UI Documentation

Description

Only the first entry in the jQuery collection is processed.
Parameters

"show" (String)

datepicker("destroy") [Function]
Disconnect the datepicker functionality from its associated control.
Signature

datepicker("destroy") » jQuery
Parameters

"destroy" (String)

datepicker("getDate") [Function]
Retrieve the current date(s) for a datepicker.
Signature

datepicker("getDate") » Date or Date[2]
Description

Returns the current date for the datepicker attached to the first control, or an array of two dates for a range.
Parameters

"getDate" (String)

datepicker("setDate", date, endDate) [Function]
Set the current date(s) for a datepicker.
Signature

datepicker("setDate", date, endDate) » jQuery 37

jQuery UI Documentation

Description

Returns the current date for the datepicker attached to the first control, or an array of two dates for a range.
Parameters

"setDate" (String) date (Date) The new current date. endDate (Date) The new end date for a date range (optional).

Utilities
$.datepicker.setDefaults(settings) [Function]
Change the default settings for all date pickers
Signature

$.datepicker.setDefaults(settings) » Datepicker
Parameters

settings (Options) The new settings for all date pickers. See the [[UI/Datepicker/datepicker|datepicker options]].
Examples

Example 1 Set all date pickers to open on focus or a click on an icon. Code $.datepicker.setDefaults({ showOn: 'both', buttonImageOnly: true, buttonImage: 'calendar.gif', buttonText: 'Calendar' }); Example 2 Set all date pickers to have French text. Code $.datepicker.setDefaults($.datepicker.regional['fr']);

38

jQuery UI Documentation

$.datepicker.formatDate(format, date, settings) [Function]
Format a date into a string value with a specified format.
Signature

$.datepicker.formatDate(format, date, settings) » String
Description

The format can be combinations of the following: * d - day of month (no leading zero) * dd - day of month (two digit) * D - day name short * DD - day name long * m - month of year (no leading zero) * mm - month of year (two digit) * M - month name short * MM - month name long * y - year (two digit) * yy - year (four digit) * @ - Unix timestamp (ms since 01/01/1970) * '...' - literal text * '' - single quote * anything else - literal text There are also a number of predefined standard date formats available from $.datepicker: * ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601) * COOKIE - 'D, dd M yy' * ISO_8601 - 'yy-mm-dd' * RFC_822 - 'D, d M y' (See RFC 822) * RFC_850 - 'DD, dd-M-y' (See RFC 850) * RFC_1036 - 'D, d M y' (See RFC 1036) * RFC_1123 - 'D, d M yy' (See RFC 1123) * RFC_2822 - 'D, d M yy' (See RFC 2822) * RSS - 'D, d M y' (Same as RFC 822) * TIMESTAMP - '@' * W3C - 'yy-mm-dd' (Same as ISO 8601)
Parameters

format (String) The format to use in presenting the date. date (Date) The date value to be displayed. settings (Object) Additional parameters for formatting the date. All are optional and default to the datapicker defaults, which are usually standard English.<br/> Attributes include:<br/> <i>dayNamesShort</i> (String[7]) - the short names for the days of the week, starting at Sunday.<br/> <i>dayNames</i> (String[7]) - the long names for the days of the week, starting at Sunday.<br/> <i>monthNamesShort</i> (String[12]) - the short names for the months of the year.<br/> <i>monthNames</i> (String[12]) - the long names for the months of the year.<br/><br/>

39

jQuery UI Documentation

Examples

Example 1 Display the date in ISO format. Produces '2007-01-26'. Code $.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26)); Example 2 Display the date in RSS format. Code $.datepicker.formatDate($.datepicker.RSS, new Date(2007, 1 - 1, 26)); Example 3 Display the date in expanded French format. Produces 'Samedi, Juillet 14, 2007'. Code $.datepicker.formatDate('DD, MM d, yy', new Date(2007, 7 - 1, 14), {dayNamesShort: $.datepicker.regional['fr'].dayNamesShort, dayNames: $.datepicker.regional['fr'].dayNames, monthNamesShort: $.datepicker.regional['fr'].monthNamesShort, monthNames: $.datepicker.regional['fr'].monthNames});

$.datepicker.iso8601Week(date) [Function]
Determine the week of the year for a given date: 1 to 53.
Signature

$.datepicker.iso8601Week(date) » Number
Description

This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the first week of the current year, and that up to three days from the current year may be included in the last week of the previous year.<br/>'''Since v3.1.'''
Parameters

date (Date) The date to find the week for.
Examples

40

jQuery UI Documentation

Example Find the week of the year for a date. Code $.datepicker.iso8601Week(new Date(2007, 1 - 1, 26));

$.datepicker.parseDate(format, value, settings) [Function]
Extract a date from a string value with a specified format.
Signature

$.datepicker.parseDate(format, value, settings) » Date
Description

For a full list of the possible formats see the [[UI/Datepicker/%24.datepicker.formatDate|formatDate]] function. A number of exceptions may be thrown: * 'Invalid arguments' if either ''format'' or ''value'' is null * 'Missing number at position nn' if ''format'' indicated a numeric value that is not then found * 'Unknown name at position nn' if ''format'' indicated day or month name that is not then found * 'Unexpected literal at position nn' if ''format'' indicated a literal value that is not then found * 'Invalid date' if the date is invalid, such as '31/02/2007'
Parameters

format (String) The format to use in extracting the date. value (String) The date value to be examined. settings (Object) Additional parameters for parsing the date. All are optional and default to the datepicker default, which is usually standard English.<br/> Attributes include:<br/> ''shortYearCutoff'' (Number) - the value (0-99) beyond which years are considered to be in the previous century. Used in conjunction with the 'y' format option. Defaults to the datepicker default, which is usually 10 years in the future.<br/> <i>dayNamesShort</i> (String[7]) - the short names for the days of the week, starting at Sunday.<br/> <i>dayNames</i> (String[7]) - the long names for the days of the week, starting at Sunday<br/> <i>monthNamesShort</i> (String[12]) - the short names for the months of the year.<br/> <i>monthNames</i> (String[12]) - the long names for the months of the year.<br/><br/>
Examples

Example 1 Extract a date in ISO format. Code 41

jQuery UI Documentation

$.datepicker.parseDate('yy-mm-dd', '2007-01-26'); Example 2 Extract a date in RSS format. Code $.datepicker.parseDate($.datepicker.RSS, 'Fri, 26 Jan 07'); Example 3 Extract a date in expanded French format. Code $.datepicker.parseDate('DD, MM d, yy', 'Samedi, Juillet 14, 2007', {shortYearCutoff: 20, dayNamesShort: $.datepicker.regional['fr'].dayNamesShort, dayNames: $.datepicker.regional['fr'].dayNames, monthNamesShort: $.datepicker.regional['fr'].monthNamesShort, monthNames: $.datepicker.regional['fr'].monthNames});

42

jQuery UI Documentation

UI/Dialog
Plugin methods
dialog(options) [Function]
Make the selected elements Dialog boxes.
Signature

dialog(options) » jQuery
Parameters

options (Options) A set of key/value pairs that configure the dialog. All options are optional.
Options

autoOpen (Boolean) When ''autoOpen'' is ''true'' the dialog will open automatically when ''dialog'' is called. If ''false'' it will stay hidden until ''.dialog("open")'' is called on it. buttons (Object) Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object. dialogClass (String) The specified class name(s) will be added to the dialog, for additional theming. draggable (Boolean) When ''draggable'' is ''true'' the resulting dialog will be draggable. If ''false'' the dialog will not be draggable. height (Number) The height of the dialog, in pixels. hide (String) The effect to be used when the dialog is closed. maxHeight (Number) The maximum height to which the dialog can be resized, in pixels. maxWidth (Number) The maximum width to which the dialog can be resized, in pixels. minHeight (Number) The minimum height to which the dialog can be resized, in pixels. minWidth (Number) The minimum width to which the dialog can be resized, in pixels. modal (Boolean) When ''modal'' is set to ''true'' the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements. Custom style values for the overlay (e.g. changing its color or opacity) can be provided with the ''overlay'' option. overlay (Options) Key/value object of style properties for the overlay to display behind the dialog (but above other page elements). See [[CSS|CSS]] for details. position (String, Array) Specifies where the dialog should be displayed. Possible values: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport) or the possible string values (e.g. ['right','top'] for top right corner). 43

jQuery UI Documentation

resizable (Boolean) Specifies whether the dialog will be resizeable. Possible values: ''true'', ''false''. show (String) The effect to be used when the dialog is opened. stack (Boolean) Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus. title (String) Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element. width (Number) The width of the dialog, in pixels. open (Function) Callback for the dialogopen event. The function gets passed two arguments in accordance with the [[Events/triggerHandler|triggerHandler]] interface. The data passed is the opened dialog options object. focus (Function) Callback for the dialogfocus event. The function gets passed two arguments in accordance with the [[Events/triggerHandler|triggerHandler]] interface. The data passed is the focused dialog options object. dragStart (Function) Callback for the beginning of the dialog being dragged. drag (Function) Callback for during the dialog being dragged. dragStop (Function) Callback for after the dialog has been dragged. resizeStart (Function) Callback for the beginning of the dialog being resized. resize (Function) Callback for during the dialog being resized. resizeStop (Function) Callback for after the dialog has been resize. close (Function) Callback for the close.dialog event. The function gets passed two arguments in accordance with the [[Events/triggerHandler|triggerHandler]] interface. The data passed is the closed dialog options object.

dialog("open") [Function]
Opens the specified dialog boxes.
Signature

dialog("open") » jQuery
Parameters

"open" (String)

dialog("isOpen") [Function]
Return if the dialog is currently open.
Signature

dialog("isOpen") » Boolean
Description

44

jQuery UI Documentation

Since version 1.6 stable.
Parameters

"isOpen" (String)

dialog("moveToTop") [Function]
Moves the specified dialog on top of the dialogs stack.
Signature

dialog("moveToTop") » jQuery
Parameters

"moveToTop" (String)

dialog("close") [Function]
Closes the specified dialog boxes.
Signature

dialog("close") » jQuery
Parameters

"close" (String)

dialog("destroy") [Function]
Completely remove the dialog.
Signature

dialog("destroy") » jQuery
Description

This method removes the dialog completely. Note however that it does ''not'' remove the contents of the dialog. To do that, use X.dialog('destroy').remove().
Parameters

45

jQuery UI Documentation

"destroy" (String)

46

jQuery UI Documentation

UI/Magnifier
Plugin methods
magnifier(options) [Function]
Make the contents of the selected elements magnify upon mouse proximity.
Signature

magnifier(options) » jQuery
Parameters

options (Options) A set of key/value pairs that configure the magnifier. All options are optional.
Options

axis (String) Possible values: 'x', 'y'. baseline (Number) The direction in which the element will rise. Set to -1 to make the element rise up. distance (Number) How far away the mouse needs to be, in pixels, before it begins having an effect on the element. magnification (Number) The factor by which the element will be magnified when the mouse is completely over it. verticalLine (Number) .......... items (Selector) Which children elements to magnify opacity (Object {min:Number, max:Number}) The minimum and maximum opacity that an element transitions inbetween (the maximum opacity will be set when the mouse is completely over the element). overlap (Boolean) Allow the magnified elements to overlap each other, as opposed to pushing each other out of the way. zIndex (Number) The index that the active element takes. click (function(e, ui)) This function is called when the user clicks on one of the magnified items.<br /> The argument <b>e</b> is the (click) event.<br /> The argument <b>ui</b> is an object with three properties:<br /> <ul> <li><b>options</b> (ui.options)<br /> A copy of the options set for this magnifier</li> <li><b>current</b> (ui.current)<br /> The DOM element clicked<br /> <li><b>currentOffset</b> (ui.currentOffset)</li> The offset object of the clicked DOM element. (This saves the overhead of reprocessing the 47

jQuery UI Documentation element's .offset() .) Offset object has two properties, top and left, which give the offset relative to the body.</li> </ul>

magnifier("reset") [Function]
Reset the magnifier.
Signature

magnifier("reset") » jQuery
Description

This method reset the magnifier.
Parameters

"reset" (String)

magnifier("disable") [Function]
Disable the magnifier.
Signature

magnifier("disable") » jQuery
Description

This method disable the magnifier.
Parameters

"disable" (String)

magnifier("destroy") [Function]
Completely remove the magnifier.
Signature

magnifier("destroy") » jQuery
Description

48

jQuery UI Documentation

This method removes the magnifier completely.
Parameters

"destroy" (String)

49

jQuery UI Documentation

UI/Progressbar
Plugin methods
progressbar(options) [Function]
Make the selected elements progressbar.
Signature

progressbar(options) » jQuery
Parameters

options (Options) A set of key/value pairs that configure the progressbar. All options are optional.
Options

duration (Number) Time for progressing. increment (Number) Min stepping of the progressbar. interval (Number) ...... range (Boolean) Whether show range number as text on the bar. text (String) Text to show on the bar. textClass (String) Text CSS class. width (Number) Width of the progressbar start (Function) Callback function triggered when the progressbar is started. pause (Function) Callback function triggered when the progressbar is paused. progress (Function) Callback function triggered when the progressbar is progressing. stop (Function) Callback function triggered when the progressbar is stopped.

progressbar("start") [Function]
Start the progressbar.
Signature

progressbar("start") » jQuery
Description

50

jQuery UI Documentation

This method start the progressbar.
Parameters

"start" (String)

progressbar("stop") [Function]
Stop the progressbar.
Signature

progressbar("stop") » jQuery
Description

This method stop the progressbar.
Parameters

"stop" (String)

progressbar("pause") [Function]
Pause the progressbar.
Signature

progressbar("pause") » jQuery
Description

This method pause the progressbar.
Parameters

"pause" (String)

progressbar("progress", value) [Function]
Set range of the progressbar.
Signature

progressbar("progress", value) » jQuery 51

jQuery UI Documentation

Description

This method set range of the progressbar.
Parameters

"progress" (String) value (Number)

progressbar("enable") [Function]
Enable the progressbar.
Signature

progressbar("enable") » jQuery
Description

This method enable the progressbar.
Parameters

"enable" (String)

progressbar("disable") [Function]
Disable the progressbar.
Signature

progressbar("disable") » jQuery
Description

This method disable the progressbar.
Parameters

"disable" (String)

progressbar("destroy") [Function]
Completely remove the progressbar. 52

jQuery UI Documentation

Signature

progressbar("destroy") » jQuery
Description

This method removes the progressbar completely.
Parameters

"destroy" (String)

53

jQuery UI Documentation

UI/Slider
Plugin methods
slider(options) [Function]
Makes a slider from the nodeset supplied by the query.
Signature

slider(options) »
Description

With this plugin, you can generate sliders with a wide range of options, including multiple handles, callbacks and more. Some options will not work correctly unless your external and internal stylesheets come '''before''' the script tags. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): * * * * '''ui.options''': Options - options used to initialize the slider '''ui.handle''': jQuery - the current focused handle '''ui.value''': Integer - the current handle's value '''ui.range''': Integer - the current range value (only with two handles and range: true)

Parameters

options (Options) A set of key/value pairs that configure the slider. All options are optional, but a slider will not be useful without at least one callback.
Options

animate (Boolean) Whether slide handle smoothly when user click outside handle on the bar. handle (String) The jquery selector to use for the handle(s) of the slider handles (Object) Specify boundaries for one or more handles. Format: [{start:Integer, min:Integer, max:Integer, id:String} [, ..]]. Only start is required. If the slider doesn't have handles already, they are automatically created. range (Boolean) If set to true, the slider will detect if you have two handles and create a stylable range element between these two. You now also have access to ui.range in your callbacks to get the amount of the range. min (Integer) The minimum value of the slider. Useful for tracking values via callback, and to set steps. max (Integer) The maximum value of the slider. Useful for tracking values via callback, and to set steps. 54

jQuery UI Documentation

startValue (Integer) The value the handle will have first. stepping (Integer) If defined, the new value has to be dividable through this number, so the slider jumps from step to step. steps (Integer) Alternative to stepping, this defines how many steps a slider will have, instead of how many values to jump, as in stepping. axis (String) Normally you don't need to set this option because the plugin detects the slider orientation automatically. If the orientation is not correctly detected you can set this option to 'horizontal' or 'vertical'. stop (Function) Function that gets called when the user stops sliding. start (Function) Function that gets called when the user starts sliding. slide (Function) Function that gets called on every mouse move during slide. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value. change (Function) Function that gets called on slide stop, but only if the slider position has changed. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.

slider("moveTo", value, index) [Function]
Moves a slider's handle to the given position.
Signature

slider("moveTo", value, index) » jQuery
Description

Calling this method moves the specified handle to the given value. If no handle or handle's index/number is specified as second argument, it moves the focused handle. If you want to increase/decrease the handles' value, you can also input a relative string format, using "+=" or "-=". Example: $(..).slider("moveTo", "-=10") (Decrements the current handles' value by 10). Note also that when using a slider with range: true set in the options, move the second slider handle first as if the first handle is forced to overtake the second, you'll get strange results with minus numbers.
Parameters

"moveTo" (String) value (Integer/String) The value to move the handle to. index (Integer/Element) The index/number of the handle, zero-based (or alternatively the handle element itself).

slider("value", index) [Function]

55

jQuery UI Documentation

Retrieves a handle's value.
Signature

slider("value", index) » jQuery
Description

This method returns a handle's value. If no handle is specified in the second argument by its index, it returns the value of the currently focused handle.
Parameters

"value" (String) index (Integer) The index/number of the handle, zero-based.

slider("disable") [Function]
Temporarily disables the slider.
Signature

slider("disable") » jQuery
Description

This method temporarily disables the slider. It can later be reenabled by calling $(..).slider("enable").
Parameters

"disable" (String)

slider("enable") [Function]
Enables the slider.
Signature

slider("enable") » jQuery
Description

This method re-enables a previously disabled slider.

56

jQuery UI Documentation

Parameters

"enable" (String)

slider("destroy") [Function]
Completely removes the sliding functionality.
Signature

slider("destroy") » jQuery
Description

This method removes the sliding functionality completely.
Parameters

"destroy" (String)

57

jQuery UI Documentation

UI/Spinner
Plugin methods
spinner(options) [Function]
Creates a Spinner widget.
Signature

spinner(options) » jQuery
Description

This jQuery widget turns input fields or DOM nodes into a spin button. Handles such as min, max and currency provided. Callbacks (init, up, down, spin, change) accept two arguments: The original browser event and a prepared ui object. The ui object have these fields: * * * * '''ui.element''' - a jQuery object containing the spinner element. '''ui.options''' - options used to initialize the spinner. '''ui.value''' - current value of the spinner. '''ui.add''' - add a new item to the spinner (DOM nodes only).

Parameters

options (Options) A set of key/value pairs that configure the spinner. All options are optional.
Options

currency (Boolean, String) Accepts a currency symbol, e.g. &pound;. Will also automatically format into a currency value. incremental (Boolean) If ''incremental'' is set to ''true'' stepping delta will increase when spun incessantly. i.e. spinning jumps up a notch at set increments. max (Number) The upper limit. min (Number) The lower limit. start (Number) The default/start position. stepping (Number) The unit step size. decimals (Number) The number of decimal places displayed. format (String) ''printf'' style formatting with named arguments, e.g. ''%(name)'', for customising the display value. Used for DOM lists only. See ''items''. items (Array) An Array of objects which automatically convert into DOM lists to form spinner items. Used in combination with ''format''. 58

jQuery UI Documentation

group (String) The symbol to use as a thousand separator / digital group separator. point (String) The symbol to use as a decimal point. init (Function) Callback triggered when the spinner initializes. change (Function) Callback function triggered when the value is changed. up (Function) Callback function triggered when the spinner increments. down (Function) Callback function triggered when the spinner decrements. spin (Function) Callback function triggered when the spinner spins.

spinner("disable") [Function]
Temporarily disables the spinner.
Signature

spinner("disable") » jQuery
Description

This method temporarily disables the spinner. It can later be reenabled by calling $(..).spinner("enable").
Parameters

"disable" (String)

spinner("enable") [Function]
Enables the spinner.
Signature

spinner("enable") » jQuery
Description

This method re-enables a previously disabled spinner.
Parameters

"enable" (String)

spinner("destroy") [Function]
Completely remove the spinner. 59

jQuery UI Documentation

Signature

spinner("destroy") » jQuery
Description

This method removes the spinner completely.
Parameters

"destroy" (String)

60

jQuery UI Documentation

UI/Tabs
Plugin methods
tabs(options) [Function]
The method that you use to create a new tabs interface.
Signature

tabs(options) » jQuery
Parameters

options (Options) A set of key/value pairs that configures the tabs interface. All options are optional.
Options

selected (Number) Zero-based index of the tab to be selected on initialization. To set all tabs to unselected set this option to null. unselect (Boolean) Allows a currently selected tab to become unselected upon clicking. event (String) The type of event to be used for selecting a tab. disabled (Array<Number>) An array containing the position of the tabs (zero-based index) that should be disabled on initialization. cookie (Object) Store the latest active (clicked) tab in a cookie. The cookie is used to determine the active tab on the next page load. Requires cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options: &#123; expires: 7, path: '/', domain: 'jquery.com', secure: true &#125; spinner (String) The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. cache (Boolean) Wether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions. ajaxOptions (Options) Additional Ajax options to consider when loading tab content (see $.ajax). idPrefix (String) If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54". fx (Options, Array<Options>) Enable animations for hiding and showing tab panels. The duration option can be a string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run an animation (default is "normal").

61

jQuery UI Documentation

tabTemplate (String) HTML template from which a new tab is created and added. The placeholders #&#123;href&#125; and #&#123;label&#125; are replaced with the url and tab label that are passed as arguments to the add method. panelTemplate (String) HTML template from which a new tab panel is created in case of adding a tab with the add method or when creating a panel for a remote tab on the fly. select (function(event,ui)) Function that gets called when clicking a tab. load (function(event,ui)) Function that gets called after the content of a remote tab has been loaded. show (function(event,ui)) Function that gets called when a tab is shown. add (function(event,ui)) Function that gets called when a tab was added. remove (function(event,ui)) Function that gets called when a tab was removed. enable (function(event,ui)) Function that gets called when a tab was enabled. disable (function(event,ui)) Function that gets called when a tab was disabled.
Examples

Example A simple jQuery UI Tabs interface. Code $("#example > ul").tabs(); Html

<div id="example" class="flora"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is selected by default.</p> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div>

nonummy nibh euismod nonummy nibh euismod

nonummy nibh euismod nonummy nibh euismod nonummy nibh euismod

62

jQuery UI Documentation

tabs("add", url, label, index) [Function]
Add a new tab.
Signature

tabs("add", url, label, index) » jQuery
Parameters

"add" (String) url (String) Either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. label (String) The label of the tab to be added. index (Number) Zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.
Examples

Example 1 Append a new in-page tab. Code $(".selector").tabs("add", '#fragment-identifier', 'New Tab'); Example 2 Insert a new in-page tab at the second position. Code $(".selector").tabs("add", '#fragment-identifier', 'New Tab', 1); Example 3 Append a new remote tab. Code $(".selector").tabs("add", '/load/content/url', 'New Tab');

tabs("remove", index) [Function]
Remove a tab.
Signature

63

jQuery UI Documentation

tabs("remove", index) » jQuery
Parameters

"remove" (String) index (Number) Zero-based index of the tab to be removed.
Examples

Example Remove second tab. Code $(".selector").tabs("remove", 1);

tabs("enable", index) [Function]
Enable a disabled tab.
Signature

tabs("enable", index) » jQuery
Description

To enable more than one tab at once reset the disabled property like: <code>$('#example').data('disabled.tabs', []);</code>
Parameters

"enable" (String) index (Number) Zero-based index of the tab to be enabled.
Examples

Example Enable second tab. Code $(".selector").tabs("enable", 1);

tabs("disable", index) [Function]

64

jQuery UI Documentation

Disable a tab.
Signature

tabs("disable", index) » jQuery
Description

The selected tab cannot be disabled. To disable more than one tab at once use: <code>$('#example').data('disabled.tabs', [1, 2, 3]);</code>
Parameters

"disable" (String) index (Number) Zero-based index of the tab to be disabled.
Examples

Example Disable second tab. Code $(".selector").tabs("disable", 1);

tabs("select", index) [Function]
Select a tab, i.e., simulate a click programmatically.
Signature

tabs("select", index) » jQuery
Parameters

"select" (String) index (Number, String) Zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).
Examples

Example 1 Select second tab. Code

65

jQuery UI Documentation

$(".selector").tabs("select", 1); Example 2 Select tab that is associated with a panel that has the id "foo". Code $(".selector").tabs("select", '#foo');

tabs("load", index) [Function]
Reload the content of an Ajax tab programmatically.
Signature

tabs("load", index) » jQuery
Description

This method always loads the tab content from the remote location, even is cache is set to true.
Parameters

"load" (String) index (Number) Zero-based index of the tab to be reloaded.
Examples

Example Reload second tab. Code $(".selector").tabs("load", 1);

tabs("url", index, url) [Function]
Change the url from which an Ajax (remote) tab will be loaded.
Signature

tabs("url", index, url) » jQuery
Description

66

jQuery UI Documentation

The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab.
Parameters

"url" (String) index (Number) Zero-based index of the tab of which its URL is to be updated. url (String) A URL the content of the tab is loaded from.
Examples

Example Set the URL of an Ajax tab to load content from. Code $(".selector").tabs("url", '/changed/url');

tabs("destroy") [Function]
Destroy tabs interface and revert HTML to the state before creating tabs.
Signature

tabs("destroy") » jQuery
Parameters

"destroy" (String)

tabs("length") [Function]
Retrieve the number of tabs of the first matched tab pane.
Signature

tabs("length") » Number
Parameters

"length" (String)

tabs("rotate", ms, continuing) [Function]
Set up an automatic rotation through tabs of a tab pane. 67

jQuery UI Documentation

Signature

tabs("rotate", ms, continuing) » jQuery
Description

'''Part of the UI Tabs extension package.'''
Parameters

"rotate" (String) ms (Number) Amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation. continuing (Boolean) Whether or not to continue the rotation after a tab has been selected by a user. Default: false.
Examples

Example 1 Start rotation with an interval of 5 seconds. Code $(".selector").tabs('rotate', 5000); Example 2 Stop rotation. Code $(".selector").tabs('rotate', null);

68

Sign up to vote on this title
UsefulNot useful