jQueryUI(1.5.2)

jQuery UIAPI Reference

For jQuery UI Version 1.5.2

Table of Contents

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

jQuery UI Documentation

1

UI/DraggablesPlugin 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 greatrange of options to make them fit your needs.

All callbacks (start,stop,drag) receive two arguments: The original browser event and a preparedui 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 offsetelement* '''ui.absolutePosition''' - current absolute position of the helper as { top, left } object, relative topage

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 elementpassed to ''appendTo'' will be used as the helper's container. If not specified, the helper isappended 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 specifiedelement - 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 todrag from the same position. Coordinates can be given as a hash using a combination of the keys''top'', ''left'', ''right'', ''bottom''.


2

delay (Integer) Time in milliseconds to define when the dragging should start. It helpspreventing unwanted drags when clicking on an element.

distance (Integer) Tolerance, in pixels, for when dragging should start. If specified, dragging willnot 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 supplya 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 thedraggable 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 theview 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 getswithin the ''scrollSensitivity'' distance.

snap (Boolean,Selector) If set to a selector or to true (same as selector ".ui-draggable"), the newdraggable will snap to the edges of the selected elements when coming to an edge of theelement.

snapMode ("inner","outer","both") If set, the dragged element will only snap to the outer edgesor to the inner edges of the element.

snapTolerance (Integer) The distance in pixels from the snapping elements before the snappingshould occur.

refreshPositions (Boolean) If set to true, all droppable positions are calculated on everymousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreasesperformance.

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>


3

Example 2


Code


Html


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


Code


Html


draggable("enable") [Function]

Enable the draggable functionality.

Signature


4

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)


5

UI/DroppablesPlugin 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 bydraggables). 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, viewbelow 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, toprovide 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 willbe accepted.

activeClass (String) The class that should be added to the droppable while an acceptabledraggable 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 anacceptable draggable.

tolerance (String) Specifies which mode to use for testing whether a draggable is 'over' adroppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. Default value: 'intersect'.

activate (function(e, ui)) This function is called any time an accepted draggable starts dragging.


6

deactivate (function(e, ui)) This function is called any time an accepted draggable stopsdragging.

over (function(e, ui)) This function is called as an accepted draggable is dragged 'over' (withinthe tolerance of) this droppable.

out (function(e, ui)) This function is called when an accepted draggable is dragged out (withinthe 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]


7

Completely remove the droppable functionality.

Signature

droppable("destroy") » jQuery

Description

This method removes the droppable functionality completely.

Parameters

"destroy" (String)


8

UI/SortablesPlugin 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 greatrange of options to make them fit your needs.


* '''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 oneconnected 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. Ifused, the sortable is now connected to the other one-way, so you can drag from this sortable tothe 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 preventingunwanted drags when clicking on an element.


9

distance (Integer) Tolerance, in pixels, for when sorting should start. If specified, sorting will notstart until after mouse is dragged beyond distance. Can be used to allow for clicks on elementswithin 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. Thesupplied function receives the event and the element being sorted, and should return a valid DOMnode to be used as a custom proxy helper.

tolerance (String) This is the way the reordering behaves during drag. Default is "guess", whichguesses 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 smoothanimation. 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 DOMposition 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 theplaceholder/helper is still available.

update (function(e, ui)) Function that gets called when the user stopped sorting and the DOMposition has changed.

receive (function(e, ui)) Function that gets called when a connected sortable list has received anitem from another list.

remove (function(e, ui)) Function that gets called when a sortable item has been dragged outfrom the list and into another.

over (function(e, ui)) Function that gets called when a sortable item is moved into a connectedlist.

out (function(e, ui)) Function that gets called when a sortable item is moved away from aconnected list.

activate (function(e, ui)) Function that gets called when using connected lists, every connectedlist on drag start receives it.

deactivate (function(e, ui)) Function that gets called when sorting was stopped, is propagatedto all possible connected lists.

sortable("disable") [Function]


10

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


11

"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 itemorder back to the server.

It works by default by looking at the id of each item in the format 'setname_number', and it spitsout 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 mustbe in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen toseparate 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


12

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 doneautomatically by the script and slows down performance. Use wisely.

Parameters

"refreshPositions" (String)


13

UI/SelectablesPlugin 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 ofeach selectee at the beginning of each select operation. If you have many many items, you maywant 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 elementadded to the selection.

selecting (Function) This callback is fired during the select operation, on each element added tothe 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 elementremoved from the selection.

unselecting (Function) This callback is fired during the select operation, on each elementremoved from the selection.

selectable("disable") [Function]

Temporarily disable the selectable functionality.

Signature

selectable("disable") » jQuery


14

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]


15

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)


16

UI/ResizablesPlugin 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 preparedui 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 aspectratio. If an alternate ratio is desired, you can submit a number and then the aspect ratio will beconstrained by height \ width.

autoHide (Boolean) When set to true, automatically hides the handles except when the mousehovers over the element.


17

cancel (Selector) Prevents resizing if you start on elements matching the selector.

containment (Element, Selector) Constrains resizing to within the bounds of the specifiedelement - can be a DOM element, 'parent', 'document' or a jQuery selector.

delay (Integer) Time in milliseconds to define when the dragging should start. It helpspreventing 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 willnot 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 jqueryselector matching the child element of the resizable to use as the handle. If the handle is not achild 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 resizeduring 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 defaultborder.

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 proportionallyresized together with the original one. Just specify jquery string in this array or directly insertDOM 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").


18

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)


19

UI/AccordionPlugin 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 uniquetags for header and content elements, eg. a definition list(dl > dt + dd), you don't have to specify any options atall.

If your structure uses the same elements for header andcontent or uses some kind of nested structure, you have tospecify 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 completionof the animation; otherwise, it is triggered immediately.<pre>$(".ui-accordion").bind("accordionchange", function(event, ui) {ui.options // options used to intialize this widgetui.newHeader // jQuery, activated headerui.oldHeader // jQuery, previous headerui.newContent // jQuery, activated contentui.oldContent // jQuery, previous content});</pre>

Accordions being created on a jQuery object. To avoid visual surprises, each element to be madean 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>


20

Each item must have exactly two elements - the first one for the header, and the second one forthe content. The first element needs to be queryable. The second element does not have to bemarked 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 totaste):<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 todisplay none at start. Needs «alwaysOpen: false».

alwaysOpen (Boolean) Whether there must be one content element open. Allows collapsing theactive section by the triggering event (click is the default).

animated (Boolean, String) Choose your favorite animation, or disable them (set to false). Inaddition to the default, "bounceslide" and "easeslide" are supported (both require the easingplugin).

autoHeight (Boolean) If set, the highest content part is used as height reference for all otherparts. Provides more consistent animations.

clearStyle (Boolean) If set, clears height and overflow styles after finishing animations. Thisenables 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 ownmatcher.

selectedClass (String) Class for active header elements.

Examples

Example

A simple jQuery UI Accordion.

Code

$("#example").accordion();


21

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, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat 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-accordion-

right"></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, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat 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-accordion-right"></div></a>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat 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


22

Description

The index can be a zero-indexed number to match the position of the header to close or a stringexpression 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 ofthe 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 behaviourback to the usual state.


23

Parameters

"enable" (String)

Examples

Example


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 disablesall interactions.

To completely remove the accordion behaviour, including visual changes, use[[UI/Accordion/accordion#.22destroy.22|accordion("destroy")]].

Parameters

"disable" (String)

Examples

Example


Code

$(".selector").accordion("disable")

accordion("destroy") [Function]

Destroy the selected accordion.


24

Signature

accordion("destroy") » jQuery

Description

Destroying the accordion completely reverts changes made by accordion), including events andstyles.

To just temporily disable the behaviour of an accordion, use[[UI/Accordion/accordion#.22disable.22|accordion("disable")]].

Parameters

"destroy" (String)

Examples

Example


Code

$(".selector").accordion("disable")


25

UI/AutocompletePlugin 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 areoptional.

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 theautocompleter activates.

delay (Number) The delay in milliseconds the autocompleter waits after a keystroke to activateitself.

cacheLength (Number) The number of backend query results to store in cache. If set to 1 (thecurrent result), no caching will happen. Must be >= 1.

matchSubset (Boolean) Whether or not the autocompleter can use a cache for more specificqueries. This means that all matches of "foot" are a subset of all matches for "foo". Usually this istrue, and using this options decreases server load and increases performance. Only useful withcacheLength settings bigger than one, like 10.

matchCase (Boolean) Whether or not the comparison is case sensitive. Important only if youuse 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 presentedby 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 automaticallyselected on tab/return, even if it has not been handpicked by keyboard or mouse action. If thereis a handpicked (highlighted) result, that result will take precedence.

extraParams (Object) Extra parameters for the backend. If you were to specify { bar:4 }, theautocompleter would call my_autocomplete_backend.php?q=foo&bar=4 (assuming the input boxcontains "foo"). The param can be a function that is called to calculate the param before eachrequest.


26

formatItem (Function) Provides advanced markup for an item. For each row of results, thisfunction 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 ofresults (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 searchesfor matches. For example, there may be items you want displayed to the user, but don't wantincluded 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 beput into the input field. Again three arguments: Data, position (starting with one) and totalnumber 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 istyped or something else is selected.

max (Number) Limit the number of items in the select box. Is also sent as a "limit" parameterwith a remote request.

highlight (Boolean, Function) Whether and how to highlight matches in the select box. Set tofalse to disable. Set to a function to customize. The function gets the value as the first argumentand the search term as the second and must return the formatted value.

scroll (Boolean) Whether to scroll when more results than configured via scrollHeight areavailable.

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 listitem as second argument.

Examples


27

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 orobject.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 fromthe list of autocomplete items. You can use it to execute anything that does somethingwith 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]


28

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)


29

UI/ColorpickerPlugin 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


30

"setColor" (String)

color (String or Object) The 'color' argument is the same format as the option color, string forhex 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)


31

UI/DatepickerPlugin 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 theregionalisation attributes.

clearStatus (String) The text to display in the status bar for the clear link. This attribute is oneof 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 theregionalisation attributes.

closeStatus (String) The text to display in the status bar for the close link. This attribute is oneof 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 theregionalisation attributes.

prevStatus (String) The text to display in the status bar for the previous month link. Thisattribute is one of the regionalisation attributes.

nextText (String) The text to display for the next month link. This attribute is one of theregionalisation attributes.

nextStatus (String) The text to display in the status bar for the next month link. This attribute isone of the regionalisation attributes.

hideIfNoPrevNext (Boolean) Normally the previous and next links are disabled when not


32

applicable (see ''minDate''/''maxDate''). You can hide them altogether by setting this attribute totrue.

currentText (String) The text to display for the current day link. This attribute is one of theregionalisation attributes.

currentStatus (String) The text to display in the status bar for the current day link. Thisattribute is one of the regionalisation attributes.

gotoCurrent (Boolean) If true, the current day link moves to the currently selected date insteadof today.

navigationAsDateFormat (Boolean) When true the ''formatDate'' function is applied to the''prevText'', ''nextText'', and ''currentText'' values before display, allowing them to display thetarget month names for example.

monthNames (String[]) The list of full month names, as used in the month header on eachdatepicker and as requested via the ''dateFormat'' setting. This attribute is one of theregionalisation attributes.

monthNamesShort (String[]) The list of abbreviated month names, for use as requested viathe ''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. Thisattribute is one of the regionalisation attributes.

yearRange (String) Control the range of years displayed in the year drop-down: either relativeto current year (-nn:+nn) or absolute (nnnn:nnnn).

changeYear (Boolean) Allows you to change the year by selecting from a drop-down list. Youcan 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. Thisattribute is one of the regionalisation attributes.

weekHeader (String) The column header for the week of the year (see ''showWeeks''). Thisattribute is one of the regionalisation attributes.

weekStatus (String) The text to display in the status bar for the week of the year. This attributeis one of the regionalisation attributes.

dayNames (String[]) The list of long day names, starting from Sunday, for use as requested viathe ''dateFormat'' setting. They also appear as popup hints when hovering over the correspondingcolumn headings. This attribute is one of the regionalisation attributes.

dayNamesShort (String[]) The list of abbreviated day names, starting from Sunday, for use asrequested 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 ascolumn 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 isone of the regionalisation attributes.

changeFirstDay (Boolean) Allows you to click on the day names to have the week start on thatday. 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 regionalisationattributes.

highlightWeek (Boolean) If true, the entire week row is highlighted when the mouse hoversover a day.

showOtherMonths (Boolean) Display dates in other months (non-selectable) at the start or endof the current month.


33

dateStatus (String) The text to display in the status bar for the date links. Use any of the dateformatting characters (see ''dateFormat''). This attribute is one of the regionalisation attributes.

showWeeks (Boolean) Display the week of the year alongside each month. The column headeris specified by the ''weekHeader'' setting. The week number is calculated based on the first dateshown 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 defaultISO 8601 implementation.

calculateWeek (Function) Perform the week of the year calculation. This function accepts aDate as a parameter and returns the number of the corresponding week of the year. The defaultimplementation uses the ISO 8601 definition of a week: weeks start on a Monday and the firstweek of the year contains January 4. This means that up to three days from the previous yearmay be included in the first week of the current year, and that up to three days from the currentyear 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 canbe a straight integer, or can be a two-element array to define the number of rows and columns todisplay.

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 asecond 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 ifthe field is blank. Specify either an actual date via a Date object, or relative to today with anumber (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 Dateobject, or relative to today with a number (e.g. +7) or a string of values and periods ('y' foryears, '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 Dateobject, or relative to today with a number (e.g. +7) or a string of values and periods ('y' foryears, '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 theregionalisation 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 valueis used directly. If a string value is provided then it is converted to a number and added to thecurrent year. Once the cutoff year is calculated, any dates entered with a year value less than orequal to it are considered to be in the current century, while those greater than it are deemed tobe in the previous century.

initStatus (String) The text to display in the status bar when the datepicker is first opened. Thisattribute is one of the regionalisation attributes.

showStatus (Boolean) True if a status bar should be shown within the datepicker indicatingwhat 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 thedatepicker. The default function uses the ''dateStatus'' value and substitutes in information fromthe current date.

appendText (String) The text to display after each date field, e.g. to show the required format.


34

duration (String, Number) Control the speed at which the datepicker appears, it may be a timein 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/EffectsjQuery UI effects].

showOptions (Options) If using one of the jQuery UI effects for ''showAnim'', you can provideadditional 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 triggerwithout it appearing on a button.

beforeShow (Function) Can be a function that takes an input field and current datepickerinstance and returns a settings (anonymous) object to update the date picker with. It is calledjust before the datepicker is displayed.

beforeShowDay (Function) The function takes a date as a parameter and must return an arraywith [0] equal to true/false indicating whether or not this date is selectable and [1] equal to aCSS class name(s) or '' for the default presentation. It is called for each day in the datepickerbefore is it displayed.

altField (String) The jQuery selector for another field that is to be updated with the selecteddate from the datepicker. Use the ''altFormat'' setting below to change the format of the datewithin this field. Leave as blank for no alternate field.

altFormat (String) The ''dateFormat'' to be used for the ''altField'' above. This allows one dateformat to be shown to the user for selection purposes, while a different format is actually sentbehind the scenes.

onSelect (Function) Allows you to define your own event when the datepicker is selected. Thefunction 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 datepickermoves to a new month and/or year. The function receives the date of the first day of the firstdisplayed month and the datepicker instance as parameters. ''this'' refers to the associated inputfield.

onClose (Function) Allows you to define your own event when the datepicker is closed, whetheror not a date is selected. The function receives the selected date(s) as a date or array of datesand 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 ofthe 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 beendeprecated and in it's place is this method.


35

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 datetext 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 aMouseEvent 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.


36

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


37

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 datesfor a range.

Parameters

"getDate" (String)

datepicker("setDate", date, endDate) [Function]

Set the current date(s) for a datepicker.

Signature

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


38

Description

Returns the current date for the datepicker attached to the first control, or an array of two datesfor 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']);


39

$.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 textThere 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 tothe 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 atSunday.<br/><i>dayNames</i> (String[7]) - the long names for the days of the week, starting atSunday.<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/>


40

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 weekof the year contains January 4. This means that up to three days from the previous year may beincluded in the first week of the current year, and that up to three days from the current yearmay 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


41

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 thedatepicker default, which is usually standard English.<br/>Attributes include:<br/>''shortYearCutoff'' (Number) - the value (0-99) beyond which years are considered to be in theprevious century. Used in conjunction with the 'y' format option. Defaults to the datepickerdefault, which is usually 10 years in the future.<br/><i>dayNamesShort</i> (String[7]) - the short names for the days of the week, starting atSunday.<br/><i>dayNames</i> (String[7]) - the long names for the days of the week, starting atSunday<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


42

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


43

UI/DialogPlugin 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 isthe text of the button. The value is the callback function for when the button is clicked. Thecontext of the callback is the dialog element; if you need access to the button, it is available asthe target of the event object.

dialogClass (String) The specified class name(s) will be added to the dialog, for additionaltheming.

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 itemson the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlaybelow 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 ofviewport) or the possible string values (e.g. ['right','top'] for top right corner).


44

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 causethe 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 attributeon 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 inaccordance with the [[Events/triggerHandler|triggerHandler]] interface. The data passed is theopened dialog options object.

focus (Function) Callback for the dialogfocus event. The function gets passed two arguments inaccordance with the [[Events/triggerHandler|triggerHandler]] interface. The data passed is thefocused 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 inaccordance with the [[Events/triggerHandler|triggerHandler]] interface. The data passed is theclosed 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


45

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 contentsof the dialog. To do that, use X.dialog('destroy').remove().

Parameters


46

"destroy" (String)


47

UI/MagnifierPlugin 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 elementrise up.

distance (Number) How far away the mouse needs to be, in pixels, before it begins having aneffect on the element.

magnification (Number) The factor by which the element will be magnified when the mouse iscompletely over it.

verticalLine (Number) ..........

items (Selector) Which children elements to magnify

opacity (Object {min:Number, max:Number}) The minimum and maximum opacity that anelement transitions inbetween (the maximum opacity will be set when the mouse is completelyover the element).

overlap (Boolean) Allow the magnified elements to overlap each other, as opposed to pushingeach 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 magnifieditems.<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


48

element's .offset() .) Offset object has two properties, top and left, which give the offset relativeto 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


49

This method removes the magnifier completely.

Parameters

"destroy" (String)


50

UI/ProgressbarPlugin 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 areoptional.

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


51

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


52

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.


53

Signature

progressbar("destroy") » jQuery

Description

This method removes the progressbar completely.

Parameters

"destroy" (String)


54

UI/SliderPlugin 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 multiplehandles, callbacks and more. Some options will not work correctly unless your external andinternal stylesheets come '''before''' the script tags.


* '''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, buta 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 havehandles already, they are automatically created.

range (Boolean) If set to true, the slider will detect if you have two handles and create a stylablerange element between these two. You now also have access to ui.range in your callbacks to getthe amount of the range.

min (Integer) The minimum value of the slider. Useful for tracking values via callback, and to setsteps.

max (Integer) The maximum value of the slider. Useful for tracking values via callback, and toset steps.


55

startValue (Integer) The value the handle will have first.

stepping (Integer) If defined, the new value has to be dividable through this number, so theslider jumps from step to step.

steps (Integer) Alternative to stepping, this defines how many steps a slider will have, instead ofhow many values to jump, as in stepping.

axis (String) Normally you don't need to set this option because the plugin detects the sliderorientation 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 eand ui, for event and user-interface respectively. Use ui.value (single-handled sliders) to obtainthe 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 haschanged. 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 getanother 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'sindex/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 sliderhandle first as if the first handle is forced to overtake the second, you'll get strange results withminus 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 thehandle element itself).

slider("value", index) [Function]


56

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 itsindex, 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.


57

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)


58

UI/SpinnerPlugin 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, maxand currency provided.

Callbacks (init, up, down, spin, change) accept two arguments: The original browser event and aprepared 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. £. Will also automaticallyformat into a currency value.

incremental (Boolean) If ''incremental'' is set to ''true'' stepping delta will increase when spunincessantly. 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 customisingthe display value. Used for DOM lists only. See ''items''.

items (Array) An Array of objects which automatically convert into DOM lists to form spinneritems. Used in combination with ''format''.


59

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.


60

Signature

spinner("destroy") » jQuery

Description

This method removes the spinner completely.

Parameters

"destroy" (String)


61

UI/TabsPlugin 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 areoptional.

Options

selected (Number) Zero-based index of the tab to be selected on initialization. To set all tabs tounselected 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) thatshould be disabled on initialization.

cookie (Object) Store the latest active (clicked) tab in a cookie. The cookie is used to determinethe active tab on the next page load. Requires cookie plugin. The object needs to have key/valuepairs of the form the cookie plugin expects as options. Available options: { expires: 7,path: '/', domain: 'jquery.com', secure: true }

spinner (String) The HTML content of this string is shown in a tab title while remote content isloading. 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 everyclick. Cached content is being lazy loaded, e.g once and only once for the first click. Note that toprevent the actual Ajax requests from being cached by the browser you need to provide an extracache: 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 generatean 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 durationoption 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").


62

tabTemplate (String) HTML template from which a new tab is created and added. Theplaceholders #{href} and #{label} are replaced with the url and tablabel that are passed as arguments to the add method.

panelTemplate (String) HTML template from which a new tab panel is created in case of addinga 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 beenloaded.

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 nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat.</div><div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat.</div></div>


63

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 fullurl (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 tabis 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


64

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]


65

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 panelthe 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


66

$(".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


67

The specified URL will be used for subsequent loads. Note that you can not only change the URLfor 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.


68

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 0or null to stop the rotation.

continuing (Boolean) Whether or not to continue the rotation after a tab has been selected by auser. 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);

Documents

jQueryUI(1.5.2)