Description: Convert a pair of headers and content panels into an accordion.
The markup of your accordion container needs pairs of headers and content panels:
|
1
2
3
4
5
6
|
|
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.
The panels can be activated programmatically by setting the active option.
0
active to false will collapse all panels. This requires the collapsible option to be true.slide
false will disable animations."slide" and "bounceslide" have built-in custom implementations.true
false
autoHeight option to be false.false
"click"
false
autoHeight option."> li > :first-child,> :not(li):even"
Selector for the header element, applied via .find() on the main accordion element. Content panels must be the sibling immedately after their associated headers.
{ "header": "ui-icon-triangle-1-e", "headerSelected": "ui-icon-triangle-1-s" }
Icons to use for headers, matching an icon defined by the jQuery UI CSS Framework. Set to false to have no icons displayed.
Invoke the activate method:
|
1
|
|
Invoke the destroy method:
|
1
|
|
Invoke the disable method:
|
1
|
|
Invoke the enable method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
Invoke the resize method:
|
1
|
|
jQuery object containing the accordion.
Invoke the widget method:
|
1
|
|
accordionchange
ui.oldHeader and ui.oldContent will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newContent will be empty jQuery objects.Initialize the accordion with the change callback specified:
|
1
2
3
|
|
Bind an event listener to the accordionchange event:
|
1
|
|
accordionchangestart
ui.oldHeader and ui.oldContent will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newContent will be empty jQuery objects.Initialize the accordion with the changestart callback specified:
|
1
2
3
|
|
Bind an event listener to the accordionchangestart event:
|
1
|
|
accordioncreate
Note: The ui object is empty but included for consistency with other events.
Initialize the accordion with the create callback specified:
|
1
2
3
|
|
Bind an event listener to the accordioncreate event:
|
1
|
|
A simple jQuery UI Accordion
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
|
Description: Adds the specified class(es) to each of the set of matched elements while animating all style changes.
400)swing)Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript. All class animation methods, including .addClass(), support custom durations and easings, as well as providing a callback for when the animation completes.
Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation.
This plugin extends jQuery's built-in .addClass() method. If jQuery UI is not loaded, calling the .addClass() method may not fail directly, as the method still exists. However, the expected behavior will not occur.
Adds the class "big-blue" to the matched elements.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
|
Description: Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
This can be used to choose previously selected values, such as entering tags for articles or entering email addresses from an address book. Autocomplete can also be used to populate associated information, such as entering a city name and getting the zip code.
You can pull data in from a local or remote source: Local is good for small data sets, e.g., an address book with 50 entries; remote is necessary for big data sets, such as a database with hundreds or millions of entries to select from. To find out more about customizing the data soure, see the documentation for the source option.
"body"
position: fixed element. Otherwise the popup menu would still scroll with the page.false
true the first item will automatically be focused when the menu is shown.300
1
{ my: "left top", at: "left bottom", collision: "none" }
of option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.none; must be specified
Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.
[ "Choice1", "Choice2" ]
label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
value properties, the value will also be used as the label.
term gets added to the URL, which the server-side script should use for filtering the results. The data itself can be in the same format as the local data described above.request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.search method, to close the open menu.Invoke the close method:
|
1
|
|
Invoke the destroy method:
|
1
|
|
Invoke the disable method:
|
1
|
|
Invoke the enable method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.Invoke the search method:
|
1
|
|
jQuery object containing the menu element. Although the menu items are constantly created and destroyed, the menu element itself is created during initialization and is constantly reused.Invoke the widget method:
|
1
|
|
autocompletechange
null.Initialize the autocomplete with the change callback specified:
|
1
2
3
|
|
Bind an event listener to the autocompletechange event:
|
1
|
|
autocompleteclose
close event will be accompanied by a change event.Note: The ui object is empty but included for consistency with other events.
Initialize the autocomplete with the close callback specified:
|
1
2
3
|
|
Bind an event listener to the autocompleteclose event:
|
1
|
|
autocompletecreate
Note: The ui object is empty but included for consistency with other events.
Initialize the autocomplete with the create callback specified:
|
1
2
3
|
|
Bind an event listener to the autocompletecreate event:
|
1
|
|
autocompletefocus
Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.
Initialize the autocomplete with the focus callback specified:
|
1
2
3
|
|
Bind an event listener to the autocompletefocus event:
|
1
|
|
autocompleteopen
Note: The ui object is empty but included for consistency with other events.
Initialize the autocomplete with the open callback specified:
|
1
2
3
|
|
Bind an event listener to the autocompleteopen event:
|
1
|
|
autocompletesearch
minLength and delay are met. If canceled, then no request will be started and no items suggested.Note: The ui object is empty but included for consistency with other events.
Initialize the autocomplete with the search callback specified:
|
1
2
3
|
|
Bind an event listener to the autocompletesearch event:
|
1
|
|
autocompleteselect
Canceling this event prevents the value from being updated, but does not prevent the menu from closing.
Initialize the autocomplete with the select callback specified:
|
1
2
3
|
|
Bind an event listener to the autocompleteselect event:
|
1
|
|
A simple jQuery UI Autocomplete
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
|
Description: The blind effect hides or shows an element by wrapping the element in a container, and "pulling the blinds"
"up")The direction the blind will be pulled to hide the element, or the direction from which the element will be revealed.
Possible Values: vertical, horizontal.
The container has overflow: hidden applied, so height changes affect what's visible.
Toggle a div using the blind effect.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
|
Description: The bounce effect bounces an element. When used with hide or show, the last or first bounce will also fade in/out.
Toggle a div using the bounce effect.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
|
Description: Themable buttons and button sets.
Button enhances standard form elements like buttons, inputs and anchors to themable buttons with appropiate hover and active styles.
In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons. Their associated label is styled to appear as the button, while the underlying input is updated on click.
In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calling .buttonset(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendants and applying .button() to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's destroy method.
When using an input of type button, submit or reset, support is limited to plain text labels with no icons.
{ primary: null, secondary: null }
text option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS. The value for the primary and secondary properties must be a class name, e.g., "ui-icon-gear". For using only one icon: icons: { primary: "ui-icon-locked" }. For using two icons: icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }.null
null), the element's HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.Invoke the destroy method:
|
1
|
|
Invoke the disable method:
|
1
|
|
Invoke the enable method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
Invoke the refresh method:
|
1
|
|
jQuery object containing the element visually representing the button.
Invoke the widget method:
|
1
|
|
buttoncreate
Note: The ui object is empty but included for consistency with other events.
Initialize the button with the create callback specified:
|
1
2
3
|
|
Bind an event listener to the buttoncreate event:
|
1
|
|
A simple jQuery UI Button
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
|
A simple jQuery UI Buttonset
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|
Description: The clip effect will hide or show an element by clipping the element vertically or horizontally.
"up")The plane in which the clip effect will hide or show its element.
vertical clips the top and bottom edges, while horizontal clips the right and left edges.
Toggle a div using the clip effect.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
|
Description: Selects elements which have data stored under the specified key.
key: The data key.
The expression $( "div:data(foo)") matches a <div> if it has data stored via .data( "foo", value ).
Select elements with data and change their background color.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
|
Description: Select a date from a popup or inline calendar
The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.
While the datepicker is open, the following key commands are available:
Change the default settings for all date pickers.
Use the option() method to change settings for individual instances.
Set all date pickers to open on focus or a click on an icon.
|
1
2
3
4
5
6
|
|
Set all date pickers to have French text.
|
1
|
|
Format a date into a string value with a specified format.
The format can be combinations of the following:
There are also a number of predefined standard date formats available from $.datepicker:
Display the date in ISO format. Produces "2007-01-26".
|
1
|
|
Display the date in expanded French format. Produces "Samedi, Juillet 14, 2007".
|
1
2
3
4
5
6
|
|
Extract a date from a string value with a specified format.
The format can be combinations of the following:
A number of exceptions may be thrown:
Extract a date in ISO format.
|
1
|
|
Extract a date in expanded French format.
|
1
2
3
4
5
6
7
|
|
Determine the week of the year for a given date: 1 to 53.
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 of 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.
This function is the default implementation for the calculateWeek option.
Find the week of the year for a date.
|
1
|
|
Set as beforeShowDay function to prevent selection of weekends.
We can provide the noWeekends() function into the beforeShowDay option which will calculate all the weekdays and provide an array of true/false values indicating whether a date is selectable.
Set the DatePicker so no weekend is selectable
|
1
2
3
|
|
Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g., jquery.ui.datepicker-fr.js for French. The desired localization file should be included after the main datepicker code. Each localization file adds its settings to the set of available localizations and automatically applies them as defaults for all instances.
The $.datepicker.regional attribute holds an array of localizations, indexed by language code, with "" referring to the default (English). Each entry is an object with the following attributes: closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear, and yearSuffix.
You can restore the default localizations with:
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
And can then override an individual datepicker for a specific locale:
$( selector ).datepicker( $.datepicker.regional[ "fr" ] );
""
altFormat option to change the format of the date within this field. Leave as blank for no alternate field.""
dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the [[UI/Datepicker/formatDate|formatDate]] function""
false
true to automatically resize the input field to accommodate dates in the current dateFormat.null
null
[0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or "" for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.jQuery.datepicker.iso8601Week
false
false
yearRange option to control which years are made available for selection."Done"
showButtonPanel option to display this button.true
true, entry in the input field is constrained to those characters allowed by the current dateFormat option."Today"
showButtonPanel option to display this button."mm/dd/yy"
[[UI/Datepicker/formatDate|formatDate]] function.[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]
dateFormat option.[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]
[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]
dateFormat option.null
[[UI/Datepicker#option-dateFormat|dateFormat]], or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.2 represents two days from today and -1 represents yesterday.dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today."normal"
false
true, the current day link moves to the currently selected date instead of today.null
null, there is no maximum.2 represents two days from today and -1 represents yesterday.dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.null
null, there is no minimum.2 represents two days from today and -1 represents yesterday.dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
dateFormat option.[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
dateFormat option."Next"
1
null
this refers to the associated input field.null
"" if none) and the datepicker instance as parameters. this refers to the associated input field.null
this refers to the associated input field."Prev"
false
showOtherMonths option is set to true."+10"
[[UI/Datepicker#option-dateFormat|dateFormat]] 'y'). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.0 and 99 indicating the cutoff year."+3" or "-5"."show"
"show" (the default), "slideDown", "fadeIn", any of the jQuery UI effects. Set to an empty string to disable animation.0
numberOfMonths option, the showCurrentAtPos option defines which position to display the current month in.false
"focus"
"focus"), when a button is clicked ("button"), or when either event occurs ("both").{}
showAnim option, you can provide additional settings for that animation via this option.false
selectOtherMonths option.false
true, a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.1
"Wk"
showWeek option to display this column."c-10:c+10"
"-nn:+nn"), relative to the currently selected year ("c-nn:c+nn"), absolute ("nnnn:nnnn"), or combinations of these formats ("nnnn:-nn"). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.Invoke the destroy method:
|
1
|
|
[x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.Invoke the dialog method:
|
1
|
|
null if no date has been selected.Invoke the getDate method:
|
1
|
|
Invoke the hide method:
|
1
|
|
Invoke the isDisabled method:
|
1
|
|
Invoke the refresh method:
|
1
|
|
Date object or a string in the current date format (e.g., "01/26/2009"), a number of days from today (e.g., +7) or a string of values and periods ("y" for years, "m" for months, "w" for weeks, "d" for days, e.g., "+1m +7d"), or null to clear the selected date.Invoke the setDate method:
|
1
|
|
Invoke the show method:
|
1
|
|
A simple jQuery UI Datepicker.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
|
Description: Open content in an interactive overlay.
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.
If the content length exceeds the maximum height, a scrollbar will automatically appear.
A bottom button bar and semi-transparent modal overlay layer are common options that can be added.
true
true, the dialog will automatically open upon initialization. If false, the dialog will stay hidden until the open() method is called.true
"close"
""
true
true, the dialog will be draggable by the title bar. Requires the jQuery UI Draggable wiget to be included."auto"
"auto" which will allow the dialog height to adjust based on its content.null
effect, duration, and easing properties may be provided. The effect property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used.false
false
150
false
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.{ my: "center", at: "center", of: window }
of option defaults to the window, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options."center", "left", "right", "top", "botom".true
true, the dialog will be resizable. Requires the jQuery UI Resizable widget to be included.null
effect, duration, and easing properties may be provided. The effect property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used.true
""
title attribute on the dialog source element.Invoke the close method:
|
1
|
|
Invoke the destroy method:
|
1
|
|
Invoke the disable method:
|
1
|
|
Invoke the enable method:
|
1
|
|
Invoke the isOpen method:
|
1
|
|
Invoke the moveToTop method:
|
1
|
|
Invoke the open method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
optionName.Invoke the method:
|
1
|
|
Invoke the method:
|
1
|
|
jQuery object containing the generated wrapper.
Invoke the widget method:
|
1
|
|
dialogbeforeclose
Note: The ui object is empty but included for consistency with other events.
Initialize the dialog with the beforeClose callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogbeforeclose event:
|
1
|
|
dialogclose
Note: The ui object is empty but included for consistency with other events.
Initialize the dialog with the close callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogclose event:
|
1
|
|
dialogcreate
Note: The ui object is empty but included for consistency with other events.
Initialize the dialog with the create callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogcreate event:
|
1
|
|
dialogdrag
Initialize the dialog with the drag callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogdrag event:
|
1
|
|
dialogdragstart
Initialize the dialog with the dragStart callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogdragstart event:
|
1
|
|
dialogdragstop
Initialize the dialog with the dragStop callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogdragstop event:
|
1
|
|
dialogfocus
Note: The ui object is empty but included for consistency with other events.
Initialize the dialog with the focus callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogfocus event:
|
1
|
|
dialogopen
Note: The ui object is empty but included for consistency with other events.
Initialize the dialog with the open callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogopen event:
|
1
|
|
dialogresize
Initialize the dialog with the resize callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogresize event:
|
1
|
|
dialogresizestart
Initialize the dialog with the resizeStart callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogresizestart event:
|
1
|
|
dialogresizestop
Initialize the dialog with the resizeStop callback specified:
|
1
2
3
|
|
Bind an event listener to the dialogresizestop event:
|
1
|
|
A simple jQuery UI Dialog
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|