jQueryUI (1 5 2)

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
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
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
3
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
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
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
Completely remove the droppable functionality.
Signature
droppable("destroy") » jQuery
Description
This method removes the droppable functionality completely.
Parameters
"destroy" (String)
7
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.
* '''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
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
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
"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
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
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
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
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
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
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
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
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
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 «alwaysOpen: false».
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
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-accordion-
right"></div></a>
</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>
</li>
</ul>
accordion("activate", index) [Function]
Activate a content part of the Accordion programmatically.
Signature
accordion("activate", index) » jQuery
21
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
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 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
Code
$(".selector").accordion("disable")
accordion("destroy") [Function]
Destroy the selected accordion.
23
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
Code
$(".selector").accordion("disable")
24
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
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
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
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
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
"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
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
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
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
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
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
currentStatus (String) The text to display in the status bar for the current day link. This
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
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
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
weekHeader (String) The column header for the week of the year (see ''showWeeks''). This
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
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
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
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
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
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
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
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
$.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
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
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
$.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
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
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
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
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
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
"destroy" (String)
46
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
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
This method removes the magnifier completely.
Parameters
"destroy" (String)
49
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
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
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
Signature
progressbar("destroy") » jQuery
Description
This method removes the progressbar completely.
Parameters
"destroy" (String)
53
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.
* '''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
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
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
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
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. £. 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
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
Signature
spinner("destroy") » jQuery
Description
This method removes the spinner completely.
Parameters
"destroy" (String)
60
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: { 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 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
tabTemplate (String) HTML template from which a new tab is created and added. The
placeholders #{href} and #{label} 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>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
62
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
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
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
$(".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
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
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

jQueryUI (1 5 2)

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

jQueryUI (1 5 2)

Transféré par

Droits d'auteur :

Formats disponibles

jQuery UI

For jQuery UI Version 1.5.2

Creates new draggables on the nodeset supplied by the query.

* '''ui.options''' - options used to initialize the draggable

Makes the div draggable.

Makes the div draggable.

Temporarily disable the draggable functionality.

Makes the div draggable.

Enable the draggable functionality.

This method re-enables a previously disabled draggable.

Completely remove the draggable functionality.

This method removes the draggable functionality completely.

Creates new droppables on the nodeset supplied by the query.

* '''ui.options''' - options used to initialize the droppable

Temporarily disable the droppable functionality.

Enable the droppable functionality.

This method re-enables a previously disabled droppable.

Completely remove the droppable functionality.

This method removes the droppable functionality completely.

Creates new sortable on the nodeset supplied by the query.

* '''ui.options''' - options used to initialize the sortable

Temporarily disable the sortable functionality.

Enable the sortable functionality.

This method re-enables a previously disabled sortable.

Completely remove the sortable functionality.

This method removes the sortable functionality completely.

sortable("serialize", options) [Function]

Serializes the sortable's item id's into a form/ajax submittable string.

sortable("serialize", options) » String

attribute (String) the attribute that is parsed. Default: 'id'.

Refresh the sortable items.

Refresh the cached positions of the sortables' items.

Creates new selectable on the nodeset supplied by the query.

Temporarily disable the selectable functionality.

Enable the selectable functionality.

This method re-enables a previously disabled selectable.

Refresh the position and size of each selectee element

Toggles the state of selectable functionality.

Completely remove the selectable functionality.

This method removes the selectable functionality completely.

Creates new resizables on the nodeset supplied by the query.

* '''ui.element''' - a jQuery object containing the resizable element

animate (Boolean) Animates to the final size after resizing.

Temporarily disable the resizable functionality.

Enable the resizable functionality.

This method re-enables a previously disabled resizable.

Completely remove the resizable functionality.

This method removes the resizable functionality completely.

Make the selected elements Accordion widgets.

If the structure of your container is flat with unique

If your structure uses the same elements for header and

Use activate(Number) to change the active content programmatically.

A "accordionchange" event is triggered every time the accordion changes.

A simple jQuery UI Accordion.

<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css"

<ul id="example" class="ui-accordion-container" style="width: 200px;">

<a href='#' class="ui-accordion-link">Test 3<div class="ui-accordion-

accordion("activate", index) [Function]

Activate a content part of the Accordion programmatically.

accordion("activate", index) » jQuery

Activate the second content of the Accordion contained in <div id="accordion">.

Close all content parts of the accordion.

Activate the first element matching the given expression.