diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..b7ca95b5
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,5 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# JS files must always use LF for tools to work
+*.js eol=lf
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..aa2f7456
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,13 @@
+version: 2
+updates:
+ - package-ecosystem: github-actions
+ directory: "/"
+ schedule:
+ interval: monthly
+
+ # Group all dependabot version update PRs into one
+ groups:
+ github-actions:
+ applies-to: version-updates
+ patterns:
+ - "*"
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 00000000..e9d2fe6c
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,30 @@
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+ pull_request:
+ push:
+ branches-ignore: "dependabot/**"
+
+jobs:
+ build:
+
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [18.x, 20.x]
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+ - name: Install xmllint
+ run: sudo apt-get install -y libxml2-utils
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+ with:
+ node-version: ${{ matrix.node-version }}
+ cache: 'npm'
+ - run: npm ci
+ - run: npm test
diff --git a/.gitignore b/.gitignore
index b5a693a5..633f1bde 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,3 @@
-dist
-node_modules
-config.json
-.project
-*~
-*.diff
-*.patch
-.DS_Store
-.settings
\ No newline at end of file
+/dist/
+/node_modules/
+config.js*
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..3c032078
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 141bca14..e9a7d254 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,4 +2,4 @@ Welcome! Thanks for your interest in contributing to api.jqueryui.com. You're **
You may also want to take a look at our [commit & pull request guide](http://contribute.jquery.org/commits-and-pull-requests/) and [style guides](http://contribute.jquery.org/style-guide/) for instructions on how to maintain your fork and submit your code. Before we can merge any pull request, we'll also need you to sign our [contributor license agreement](http://contribute.jquery.org/cla).
-You can find us on [IRC](http://irc.jquery.org), specifically in [#jqueryui-dev](irc://irc.freenode.net/#jqueryui-dev) and [#jquery-content](irc://irc.freenode.net/#jquery-content) should you have any questions. If you've never contributed to open source before, we've put together [a short guide with tips, tricks, and ideas on getting started](http://contribute.jquery.org/open-source/).
+You can find us on [IRC](http://irc.jquery.org), specifically in #jqueryui-dev and #jquery-content should you have any questions. If you've never contributed to open source before, we've put together [a short guide with tips, tricks, and ideas on getting started](http://contribute.jquery.org/open-source/).
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 00000000..fa66dfde
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,46 @@
+module.exports = function( grunt ) {
+
+grunt.loadNpmTasks( "grunt-jquery-content" );
+
+grunt.initConfig({
+ xmllint: {
+ all: [
+ "entries/**",
+ "includes/**",
+ "categories.xml",
+ "entries2html.xsl",
+ "notes.xsl"
+ ]
+ },
+ "build-posts": {
+ page: "pages/**"
+ },
+ "build-xml-entries": {
+ all: "entries/**"
+ },
+ "build-resources": {
+ all: "resources/**"
+ },
+ wordpress: (function() {
+
+ // There's no config for CI, but we don't need one for basic testing
+ var config = {};
+ try {
+ config = require( "./config" );
+ } catch ( error ) {}
+ config.dir = "dist/wordpress";
+ return config;
+ })()
+});
+
+grunt.registerTask( "lint", [ "xmllint" ] );
+
+grunt.registerTask( "build", [
+ "build-posts",
+ "build-resources",
+ "build-xml-entries",
+ "build-xml-categories",
+ "build-xml-full"
+]);
+
+};
diff --git a/LICENSE-MIT.txt b/LICENSE.txt
similarity index 62%
rename from LICENSE-MIT.txt
rename to LICENSE.txt
index bcd35345..a49ceb5d 100644
--- a/LICENSE-MIT.txt
+++ b/LICENSE.txt
@@ -1,8 +1,13 @@
-Copyright (c) 2013 jQuery Foundation, http://jquery.org/
+Copyright jQuery Foundation and other contributors, https://jquery.org/
This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
-and logs, available at http://github.com/jquery/api.jqueryui.com
+available at https://github.com/jquery/api.jqueryui.com
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
@@ -22,3 +27,18 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation and all examples and demos.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+All files located in the node_modules directory are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
diff --git a/README.md b/README.md
index 87b689e5..2381691f 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,12 @@
-api.jqueryui.com
-================
+# api.jqueryui.com
-## Building
+## Building and Deploying
-### Requirements
-* libxml2
-* libxslt
+To build and deploy your changes for previewing in a [`jquery-wp-content`](https://github.com/jquery/jquery-wp-content) instance, follow the [workflow instructions](http://contribute.jquery.org/web-sites/#workflow) from our documentation on [contributing to jQuery Foundation web sites](http://contribute.jquery.org/web-sites/).
-The `xmllint` and `xsltproc` utilities need to be in your path. If you are on Windows, you can get libxml2 and libxslt from GnuWin32.
+### Requirements
-### Build
+* [libxml2](http://xmlsoft.org/)
+* [libxslt](http://xmlsoft.org/libxslt/)
-To build and deploy your changes for previewing in a [`jquery-wp-content`](https://github.com/jquery/jquery-wp-content) instance, follow the [workflow instructions](http://contribute.jquery.org/web-sites/#workflow) from our documentation on [contributing to jQuery Foundation web sites](http://contribute.jquery.org/web-sites/).
+The `xmllint` and `xsltproc` utilities need to be in your path. If you are on Windows, you can get libxml2 and libxslt from GnuWin32.
diff --git a/categories.xml b/categories.xml
index 73477144..3869a7a1 100644
--- a/categories.xml
+++ b/categories.xml
@@ -2,7 +2,7 @@
jQuery UI adds quite a bit of functionality on top of jQuery's built-in effects. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings. In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.
+
jQuery UI adds quite a bit of functionality on top of jQuery's built-in effects. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings. In addition, a full suite of custom effects are available for use when showing and hiding elements or just to add some visual appeal.
]]>
@@ -29,12 +29,12 @@
Functionality provided by jquery.ui.core.js.
+
Functionality provided by core.js.
]]>Functionality provided by jquery.ui.effect.js. In addition to the methods listed below, jquery.ui.effect.js also includes several easings.
+
Functionality provided by effect.js. In addition to the methods listed below, effect.js also includes several easings.
When focus is on a header, the following key commands are available:
-
UP/LEFT - Move focus to the previous header. If on first header, moves focus to last header.
-
DOWN/RIGHT - Move focus to the next header. If on last header, moves focus to first header.
-
HOME - Move focus to the first header.
-
END - Move focus to the last header.
-
SPACE/ENTER - Activate panel associated with focused header.
+
UP/LEFT: Move focus to the previous header. If on first header, moves focus to last header.
+
DOWN/RIGHT: Move focus to the next header. If on last header, moves focus to first header.
+
HOME: Move focus to the first header.
+
END: Move focus to the last header.
+
SPACE/ENTER: Activate panel associated with focused header.
When focus is in a panel:
-
CTRL+UP: Move focus to associated header.
+
CTRL + UP: Move focus to associated header.
@@ -39,8 +39,13 @@
ui-accordion: The outer container of the accordion.
-
ui-accordion-header: The headers of the accordion. The headers will additionally have a ui-accordion-icons class if they contain icons.
-
ui-accordion-content: The content panels of the accordion.
+
+ ui-accordion-header: The headers of the accordion. The active header will additionally have a ui-accordion-header-active class, the inactive headers will have a ui-accordion-header-collapsed class. The headers will also have a ui-accordion-icons class if they contain icons.
+
+
ui-accordion-header-icon: Icon elements within each accordion header.
+
+
+
ui-accordion-content: The content panels of the accordion. The active content panel will additionally have a ui-accordion-content-active class.
@@ -66,7 +71,7 @@
The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
-
+
@@ -93,10 +107,28 @@
-
-
- Identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.
+ Identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.
@@ -81,7 +85,7 @@
- When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.
+ When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must support CORS). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "https://example.com" and the user types foo, a GET request would be made to https://example.com?term=foo. The data itself can be in the same format as the local data described above.
@@ -89,7 +93,7 @@
- The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
+ The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:
A 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".
A 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.
@@ -104,7 +108,7 @@
Triggered when the field is blurred, if the value has changed.
-
+ The item selected from the menu, if any. Otherwise the property is null.
@@ -122,7 +126,7 @@
-
+ The focused item.
@@ -153,8 +157,8 @@
-
- The selected item.
+
+ An Object with label and value properties for the selected option.
@@ -166,6 +170,7 @@
+ Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. 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.
@@ -180,8 +185,7 @@
-
Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it.
-
Note: At this time the<ul> element created must contain an <a> element for compatibility with the menu widget. See the example below.
+
Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it. See the Menu documentation for more details about the markup.
The <ul> element that the newly created <li> element must be appended to.
@@ -200,7 +204,7 @@
_renderItem: function( ul, item ) {
return $( "
- Method that controls building the widget's menu. The method is passed an empty <ul> and an array of items that match the user typed term. Creation of the individual <li> elements should be delegated to _renderItemData().
+ Method that controls building the widget's menu. The method is passed an empty <ul> and an array of items that match the user typed term. Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.
An empty <ul> element to use as the widget's menu.
@@ -224,7 +228,7 @@ _renderMenu: function( ul, items ) {
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
- $( ul ).find( "li:odd" ).addClass( "odd" );
+ $( ul ).find( "li" ).odd().addClass( "odd" );
}
]]>
diff --git a/entries/button.xml b/entries/button.xml
index b46d7749..f7e6cf56 100644
--- a/entries/button.xml
+++ b/entries/button.xml
@@ -1,62 +1,70 @@
Button Widget
- Themeable buttons and button sets.
+ Themeable buttons.
Button enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate 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. For the association to work properly, give the input an id attribute, and refer to that in the label's for attribute. Don't nest the input inside the label, as that causes accessibility problems.
-
-
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.
+
Note: The button widget was rewritten in 1.12. Some options changed, you can find documentation for the old options in the 1.11 button docs. This widget used to bundle support for inputs of type radio and checkbox, this is now deprecated, use the checkboxradio widget instead. It also used to bundle the buttonset widget, this is also deprecated, use the controlgroup widget instead.
+
- ui-button: The DOM element that represents the button. This element will additionally have one of the following classes depending on the text and icons option: ui-button-text-only, ui-button-icon-only, ui-button-icons-only, ui-button-text-icons.
+ ui-button: The DOM element that represents the button. This element will additionally have the ui-button-icon-only class, depending on the showLabel and icon options.
- ui-button-icon-primary: The element used to display the button's primary icon. This will only be present if a primary icon is provided in the icons option.
+ ui-button-icon: The element used to display the button icon. This will only be present if an icon is provided in the icon option.
- ui-button-text: The container around the textual content of the button.
-
-
- ui-button-icon-secondary: The element used to display the button's secondary icon. This will only be present if a secondary icon is provided in the icons option.
+ ui-button-icon-space: A separator element between icon and text content of the button. This will only be present if an icon is provided in the icon option and the iconPosition option is set to "beginning" or "end".
-
- ui-buttonset: The outer container of Buttonsets.
-
Icons to display, with or without text (see 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 match an icon 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" }.
+
Icon to display, with or without text (see showLabel option). By default, the icon is displayed on the left of the label text. The positioning can be controlled using the iconPosition option.
+
The value for this option must match an icon class name, e.g., "ui-icon-gear".
+
When using an input of type button, submit or reset, icons are not supported.
-
+
+
+
+
+
Where to display the icon: Valid values are "beginning", "end", "top" and "bottom". In a left-to-right (LTR) display, "beginning" refers to the left, in a right-to-left (RTL, e.g. in Hebrew or Arabic), it refers to the right.
+
+
- Text to show in the button. When not specified (null), the element's HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.
+
+
HTML to show in the button. When not specified (null), the element's HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.
+
When using an input of type button, submit or reset, support is limited to plain text labels.
+
-
- Whether to show the label. When set to false no text will be displayed, but the icons option must be enabled, otherwise the text option will be ignored.
+
+ Whether to show the label. When set to false no text will be displayed, but the icon option must be used, otherwise the showLabel option will be ignored.
@@ -68,8 +76,9 @@
- Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programmatically.
+ Refreshes the visual state of the button. Useful for updating button state after the native element's disabled state is changed programmatically.
+
@@ -81,20 +90,6 @@ $( "button" ).button();
]]>
Button label
-]]>
-
-
- 100
- A simple jQuery UI Buttonset
-
-
-
-
-
-
]]>
diff --git a/entries/buttonset.xml b/entries/buttonset.xml
new file mode 100644
index 00000000..2de178c1
--- /dev/null
+++ b/entries/buttonset.xml
@@ -0,0 +1,76 @@
+
+
+ Buttonset Widget
+ Themeable button sets.
+
+
This widget is deprecated, use Controlgroup instead.
+
+
+ .buttonset() is bundled with .button(). Although they are separate widgets, they are combined into a single file. If you have .button() available, you also have .buttonset() available.
+
+
+
A button set provides a visual grouping for related buttons. It is recommended that a button set be used whenever you have a group of related buttons. Button sets work by selecting all appropriate 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. For grouped radio and checkbox buttons, it's recommended to use a fieldset with a legend to provide an accessible group label.
+
+
+
+
+
+ ui-buttonset: The outer container of Buttonsets.
+
+ Which descendant elements to convert manage as buttons.
+
+
+
+
+
+
+
+
+
+
+
+ Process any buttons that were added or removed directly in the DOM. Results depend on the items option.
+
+
+
+
+
+
+ 100
+ A simple jQuery UI Buttonset
+
+
+
+
+]]>
+
+
+
diff --git a/entries/checkboxradio.xml b/entries/checkboxradio.xml
new file mode 100644
index 00000000..9587d511
--- /dev/null
+++ b/entries/checkboxradio.xml
@@ -0,0 +1,89 @@
+
+
+ Checkboxradio Widget
+ Converts inputs of type radio and checkbox to themeable buttons.
+
+
Native HTML input elements are impossible to style consistently. This widget allows working around that limitation by positining the associated label on top of the hidden input, and emulating the checkbox or radio element itself using an (optional) icon. The original input still receives focus and all events, the label merely provides a themeable button on top.
+
+
+
+
+
+ ui-checkboxradio: The input of type radio or checkbox. Will be hidden, with its associated label positioned on top.
+
+
+ ui-checkboxradio-label: The label associated with the input. If the input is checked, this will also get the ui-checkboxradio-checked class. If the input is of type radio, this will also get the ui-checkboxradio-radio-label class.
+
+
+ ui-checkboxradio-icon: If the icon option is enabled, the generated icon has this class.
+
+
+ ui-checkboxradio-icon-space: If the icon option is enabled, an extra element with this class as added between the text label and the icon.
+
+ Whether to show the checkbox or radio icon, depending on the input's type.
+
+
+
+ HTML to show in the button. When not specified (null), the HTML content of the associated <label> element is used.
+
+
+
+
+
+
+
+
+
+
+
+ Refreshes the visual state of the widget. Useful for updating after the native element's checked or disabled state is changed programmatically.
+
+
+
+
+
+
+ 100
+ A simple jQuery UI checkboxradio
+
+
+
+
+
+
+
+
+
+
+]]>
+
+
+
diff --git a/entries/controlgroup.xml b/entries/controlgroup.xml
new file mode 100644
index 00000000..1f19aa79
--- /dev/null
+++ b/entries/controlgroup.xml
@@ -0,0 +1,102 @@
+
+
+ Controlgroup Widget
+ Themeable set of input widgets.
+
+
A controlgroup provides a visual grouping for button and other input widgets. Controlgroup works by selecting all appropriate descendants, based on the items option, and applying their respective widgets, if loaded. If the widgets already exist, their refresh() method is called. You can enable and disable a controlgroup, which will enable and disable all contained widgets. Destroying a controlgroup also calls each widgets's .destroy() method.
+
+
+
+
+
+ ui-controlgroup: The outer container of controlgroups. Depending on the direction option, this element will additionally have the ui-controlgroup-horizontal or ui-controlgroup-vertical classes.
+
+
+ ui-controlgroup-item: Each item inside the group.
+
By default, controlgroup displays its controls in a horizontal layout. Use this option to use a vertical layout instead.
+
+
+
+
+
+ Sets whether to exclude invisible children in the assignment of rounded corners. When set to false, all children of a controlgroup are taken into account when assigning rounded corners, including hidden children. Thus, if, for example, the controlgroup's first child is hidden and the default horizontal layout is applied, the controlgroup will, in effect, not have rounded corners on the left edge. Likewise, if the controlgroup has a vertical layout and its first child is hidden, the controlgroup will not have rounded corners on the top edge.
+
+
+
+ {
+ "button": "input[type=button], input[type=submit], input[type=reset], button, a",
+ "controlgroupLabel": ".ui-controlgroup-label",
+ "checkboxradio": "input[type='checkbox'], input[type='radio']",
+ "selectmenu": "select",
+ "spinner": ".ui-spinner-input"
+}
+
+ Which descendant elements to initialize as their respective widgets. Two elements have special behavior:
+
+
controlgroupLabel: Any elements matching the selector for this will be wrapped in a span with the ui-controlgroup-label-contents class.
+
spinner: This uses a class selector as the value. Requires either adding the class manually or initializing the spinner manually. Can be overridden to use input[type=number], but that also requires custom CSS to remove the native number controls.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Process any widgets that were added or removed directly in the DOM. Results depend on the items option.
+
+
+
+
+
+
+ 100
+ A simple jQuery UI controlgroup
+
+
+
+
+]]>
+
+
+
diff --git a/entries/cssClip.xml b/entries/cssClip.xml
new file mode 100644
index 00000000..fb0a765b
--- /dev/null
+++ b/entries/cssClip.xml
@@ -0,0 +1,57 @@
+
+
+ .cssClip()
+ Getter/setter for an object version of the CSS clip property.
+ 1.12
+
+
+ When setting the CSS clip property, specify the top, right, bottom and left, properties to use the rect() style.
+
+
+
+ 175
+
+
+
+]]>
+
+
+
+
+
+
+
diff --git a/entries/datepicker.xml b/entries/datepicker.xml
index b3cc2605..13eb3aa3 100644
--- a/entries/datepicker.xml
+++ b/entries/datepicker.xml
@@ -10,25 +10,26 @@
Keyboard interaction
While the datepicker is open, the following key commands are available:
-
PAGE UP: Move to the previous month.
-
PAGE DOWN: Move to the next month.
-
CTRL+PAGE UP: Move to the previous year.
-
CTRL+PAGE DOWN: Move to the next year.
-
CTRL+HOME: Move to the current month. Open the datepicker if closed.
-
CTRL+LEFT: Move to the previous day.
-
CTRL+RIGHT: Move to the next day.
-
CTRL+UP: Move to the previous week.
-
CTRL+DOWN: Move the next week.
-
ENTER: Select the focused date.
-
CTRL+END: Close the datepicker and erase the date.
-
ESCAPE: Close the datepicker without selection.
+
PAGE UP: Move to the previous month.
+
PAGE DOWN: Move to the next month.
+
CTRL + PAGE UP: Move to the previous year.
+
CTRL + PAGE DOWN: Move to the next year.
+
CTRL + HOME: Open the datepicker if closed.
+
CTRL/COMMAND + HOME: Move to the current month.
+
CTRL/COMMAND + LEFT: Move to the previous day.
+
CTRL/COMMAND + RIGHT: Move to the next day.
+
CTRL/COMMAND + UP: Move to the previous week.
+
CTRL/COMMAND + DOWN: Move to the next week.
+
ENTER: Select the focused date.
+
CTRL/COMMAND + END: Close the datepicker and erase the date.
+
ESCAPE: Close the datepicker without selection.
Utility functions
-
$.datepicker.setDefaults( settings )
-
Change the default settings for all date pickers.
-
Use the option() method to change settings for individual instances.
+
$.datepicker.setDefaults( options )
+
Change the default options for all date pickers.
+
Use the option() method to change options for individual instances.
Code examples:
Set all date pickers to open on focus or a click on an icon.
@@ -46,7 +47,7 @@
-
$.datepicker.formatDate( format, date, settings )
+
$.datepicker.formatDate( format, date, options )
Format a date into a string value with a specified format.
The format can be combinations of the following:
@@ -100,7 +101,7 @@
-
$.datepicker.parseDate( format, value, settings )
+
$.datepicker.parseDate( format, value, options )
Extract a date from a string value with a specified format.
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.
+
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 options to the set of available localizations and automatically applies them as defaults for all instances. Localization files can be found at https://github.com/jquery/jquery-ui/tree/master/ui/i18n.
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[ "" ] );
@@ -359,7 +360,7 @@
The list of abbreviated month names, as used in the month header on each datepicker and as requested via the dateFormat option.
- Whether the prevText and nextText options should be parsed as dates by the formatDate function, allowing them to display the target month names for example.
+ Whether the currentText, prevText and nextText options should be parsed as dates by the formatDate function, allowing them to display the target month names for example.
The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.
@@ -404,7 +405,7 @@
When the datepicker should appear. The datepicker can appear when the field receives focus ("focus"), when a button is clicked ("button"), or when either event occurs ("both").
- If using one of the jQuery UI effects for the showAnim option, you can provide additional settings for that animation via this option.
+ If using one of the jQuery UI effects for the showAnim option, you can provide additional properties for that animation using this option.
Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
@@ -457,6 +458,11 @@
Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
+
+ 1.13
+
+ Called when the datepicker widget's DOM is updated. The function receives the datepicker instance as the only parameter. this refers to the associated input field.
+
@@ -470,8 +476,8 @@
A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
-
- The new settings for the date picker.
+
+ The new options for the date picker.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.
diff --git a/entries/dialog.xml b/entries/dialog.xml
index d0151e63..d1fec480 100644
--- a/entries/dialog.xml
+++ b/entries/dialog.xml
@@ -1,5 +1,5 @@
-
+Dialog WidgetOpen content in an interactive overlay.
@@ -21,7 +21,7 @@
The dialog itself
-
While open, the dialog widget ensures that tabbing cycles focus between elements within the dialog itself, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog.
+
While open, the dialog widget ensures that keyboard navigation using the 'tab' key causes the focus to cycle amongst the focusable elements in the dialog, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog.
Upon closing a dialog, focus is automatically returned to the element that had focus when the dialog was opened.
@@ -55,7 +55,7 @@
- ui-dialog: The outer container of the dialog.
+ ui-dialog: The outer container of the dialog. If the draggable option is set, the ui-dialog-dragging class is added during a drag. If the resizable option is set, the ui-dialog-resizing class is added during a resize. If the buttons option is set, the ui-dialog-buttons class is added.
ui-dialog-titlebar: The title bar containing the dialog's title and close button.
@@ -101,15 +101,36 @@
If set to true, the dialog will automatically open upon initialization. If false, the dialog will stay hidden until the open() method is called.
-
+
+ [
+ {
+ text: "Ok",
+ icon: "ui-icon-heart",
+ click: function() {
+ $( this ).dialog( "close" );
+ }
+
+ // Uncommenting the following line would hide the text,
+ // resulting in the label being used as a tooltip
+ //showText: false
+ }
+ ]Specifies which buttons should be displayed on the dialog. 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.The keys are the button labels and the values are the callbacks for when the associated button is clicked.
- Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.
+ Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button. In addition, a key of icon can be used to control button's icon option, and a key of showText can be used to control button's text option.
Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.
@@ -118,8 +139,11 @@
Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.
-
- The specified class name(s) will be added to the dialog, for additional theming.
+
+
+
The specified class name(s) will be added to the dialog, for additional theming.
+
The dialogClass option has been deprecated in favor of the classes option, using the ui-dialog property.
+
@@ -135,22 +159,7 @@
The only supported string value is "auto" which will allow the dialog height to adjust based on its content.
-
- If and how to animate the hiding of the dialog.
-
-
- The dialog will fade out while animating the height and width for the specified duration.
-
-
-
-
- The dialog will be hidden using the specified jQuery UI effect. See the list of effects for possible values.
-
-
-
- If the value is an object, then effect, delay, 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. If delay is omitted, then no delay is used.
-
-
+
The maximum height to which the dialog can be resized, in pixels.
@@ -173,43 +182,26 @@
-
Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.
-
Note: The String and Array forms are deprecated.
+
Specifies where the dialog should be displayed when opened. The dialog will handle collisions such that as much of the dialog is visible as possible.
+
The of property 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 available properties.
-
- Identifies the position of the dialog when opened. The 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.
-
-
- A string representing the position within the viewport. Possible values: "center", "left", "right", "top", "bottom".
-
-
- An array containing an x, y coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.
-
+
- If and how to animate the showing of the dialog.
-
-
- The dialog will fade in while animating the height and width for the specified duration.
-
-
-
-
- The dialog will be shown using the specified jQuery UI effect. See the list of effects for possible values.
-
-
-
- If the value is an object, then effect, delay, 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. If delay is omitted, then no delay is used.
-
-
+
Specifies the title of the dialog. If the value is null, the title attribute on the dialog source element will be used.
+
+
+
Specifies the heading level that wraps the title of the dialog. For a value between 1 to 6, h1 to h6 is returned. Any other value, including the default 0, uses a span instead.
+
+
+
The width of the dialog, in pixels.
@@ -342,6 +334,7 @@
Opens the dialog.
+
Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.
+
+
+
+
ui-draggable: The draggable element. When the draggable is disabled, the ui-draggable-disabled class is added. While dragging, the ui-draggable-dragging class is added.
+
ui-draggable-handle: The handle of the draggable, specified using the handle option. By default, the draggable element itself is also the handle.
@@ -18,7 +25,10 @@
If set to false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling .draggable() on hundreds of elements.
- Which element the draggable helper should be appended to while dragging.
+
+
Which element the draggable helper should be appended to while dragging.
+
Note: The appendTo option only works when the helper option is set to not use the original element.
+ A jQuery object containing the element to append the helper to.
@@ -38,6 +48,10 @@
Prevents dragging from starting on specified elements.
+
+
+
+
Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The helper option must be set to "clone" in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.
@@ -63,10 +77,12 @@
Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.
+ 1.12Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
+ 1.12Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
@@ -83,7 +99,7 @@
If set to "clone", then the element will be cloned and the clone will be dragged.
- A function that will return a DOMElement to use while dragging.
+ A function that must return a jQuery or DOMElement to use while dragging.
@@ -120,7 +136,7 @@
The duration of the revert animation, in milliseconds. Ignored if the revert option is false.
- Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.
+ Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.
If set to true, container auto-scrolls while dragging.
@@ -171,19 +187,32 @@
- Triggered while the mouse is moved during the dragging.
+ Triggered while the mouse is moved during the dragging, immediately before the current move happens.The jQuery object representing the helper that's being dragged.
- Current CSS position of the helper as { top, left } object.
+ Current CSS position of the helper as { top, left } object. The values may be changed to modify where the element will be positioned. This is useful for custom containment, snapping, etc.Current offset position of the helper as { top, left } object.
+
+ Constrain movement via ui.position:
+
+ Triggered when dragging stops.
@@ -205,6 +234,7 @@
+
diff --git a/entries/droppable.xml b/entries/droppable.xml
index 4c87be57..9506ccc4 100644
--- a/entries/droppable.xml
+++ b/entries/droppable.xml
@@ -5,6 +5,12 @@
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept.
+
+
+
+
ui-droppable: The droppable element. When a draggable that can be dropped on this dropppable is activated, the ui-droppable-active class is added. When dragging a draggable over this droppable, the ui-droppable-hover class is added.
@@ -23,18 +29,28 @@
A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return true if the draggable should be accepted.
-
- If specified, the class will be added to the droppable while an acceptable draggable is being dragged.
+
+
+
If specified, the class will be added to the droppable while an acceptable draggable is being dragged.
+
The activeClass option has been deprecated in favor of the classes option, using the ui-droppable-active property.
+
If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on hundreds of elements.
+
+
+
+
By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.
-
- If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.
+
+
+
If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.
+
The hoverClass option has been deprecated in favor of the classes option, using the ui-droppable-hover property.
+
Used to group sets of draggable and droppable items, in addition to the accept option. A draggable with the same scope value as a droppable will be accepted.
@@ -135,6 +151,7 @@
+
diff --git a/entries/effect.xml b/entries/effect.xml
index 4521acdc..3e144ee6 100644
--- a/entries/effect.xml
+++ b/entries/effect.xml
@@ -10,7 +10,7 @@
A string indicating which effect to use for the transition.
- Effect-specific settings and easing.
+ Effect-specific properties and easing.
diff --git a/entries/focus.xml b/entries/focus.xml
deleted file mode 100644
index 771bfc3f..00000000
--- a/entries/focus.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
- .focus()
- Asynchronously set focus to an element.
-
-
- The number of milliseconds to wait before setting focus.
-
-
- A function to invoke after the element has been focused.
-
-
-
-
-
-
-
-
-
diff --git a/entries/form-reset-mixin.xml b/entries/form-reset-mixin.xml
new file mode 100644
index 00000000..359af329
--- /dev/null
+++ b/entries/form-reset-mixin.xml
@@ -0,0 +1,79 @@
+
+
+
+ Form Reset Mixin
+ A mixin to call refresh() on an input widget when the parent form gets reset.
+
+ This only works for native input elements that have a form attribute, like an <input>. It doesn't work for other elements like <label> or <div>
+
+
+
+
+ Call this._bindFormResetHandler() inside _create() to initialize the mixin.
+
+
+ Set the background color of the widget's element based on an option.
+
+
+
+
+
+ Call this._unbindFormResetHandler() inside _destroy() to destroy the mixin.
+
+
+
+
+
+
+
+
+ 100
+ Type colors into the input
+ ")
+ .addClass("demo-colorize-swatch")
+ .insertAfter(this.element);
+
+ this.refresh();
+ this._bindFormResetHandler();
+
+ this._on({ keyup: "refresh" });
+ },
+ refresh: function() {
+ this.swatch.css( "background-color", this.element.val() );
+ },
+ _destroy: function() {
+ this.swatch.remove();
+ this._unbindFormResetHandler();
+ }
+} ] );
+$( "#colorize" ).colorize();
+]]>
+
+
+
+
+
+]]>
+
+
+
+
+
diff --git a/entries/hide.xml b/entries/hide.xml
index d526de9b..7e235ae8 100644
--- a/entries/hide.xml
+++ b/entries/hide.xml
@@ -10,7 +10,7 @@
A string indicating which effect to use for the transition.
- Effect-specific settings and easing.
+ Effect-specific properties and easing.
diff --git a/entries/jQuery.effects.clipToBox.xml b/entries/jQuery.effects.clipToBox.xml
new file mode 100644
index 00000000..de234316
--- /dev/null
+++ b/entries/jQuery.effects.clipToBox.xml
@@ -0,0 +1,17 @@
+
+
+
+ jQuery.effects.clipToBox()
+
+
+ A set of properties that will eventually be passed to .animate(). The animationProperties must contain a clip property.
+
+
+ Calculates position and dimensions based on a clip animation.
+
+
This method is useful for mimicking a clip animation when using a placeholder for effects. Given a clip animation, jQuery.effects.clipToBox() will generate an object containing top, left, width, and height properties which can be passed to .css() or .animate(). This method is generally used in conjunction with jQuery.effects.createPlaceholder().
+
+
+
+
+
diff --git a/entries/jQuery.effects.createPlaceholder.xml b/entries/jQuery.effects.createPlaceholder.xml
new file mode 100644
index 00000000..93f47bad
--- /dev/null
+++ b/entries/jQuery.effects.createPlaceholder.xml
@@ -0,0 +1,19 @@
+
+
+
+ jQuery.effects.createPlaceholder()
+
+
+ The element to create a placeholder for.
+
+
+ Creates a placeholder to support clip animations without disrupting the layout.
+
+
Many effects require animating the clip CSS property. In order to apply clipping, the element must be absolutely positioned. As a result, if an animation that utilizes clipping is applied to an element with static or relative positioning, the layout of the page will be affected when the animated element is removed from the flow. To compensate for this, a placeholder element with the same size and position can be inserted into the document.
+
jQuery.effects.createPlaceholder() will create a placeholder with the same display, position, dimensions, and margins as the original element. The placeholder is inserted into the DOM as the next sibling of the original element. When the animation is complete, jQuery.effects.removePlaceholder() should be used to remove the inserted element.
+
If the original element is already absolutely positioned, no placeholder will be generated since the page layout isn't affected. As a result, the return value will be undefined.
+
+
+
+
+
diff --git a/entries/jQuery.effects.define.xml b/entries/jQuery.effects.define.xml
new file mode 100644
index 00000000..1787c92d
--- /dev/null
+++ b/entries/jQuery.effects.define.xml
@@ -0,0 +1,60 @@
+
+
+
+ jQuery.effects.define()
+
+
+ The name of the effect to create.
+
+
+ The default mode for the effect. Possible values are "show", "hide", or "toggle".
+
+
+
+
+ Defines the effect logic. The options argument contains duration and mode properties, as well as any effect-specific options.
+
+
+ Defines an effect.
+
+
Defines a new effect for use with .effect(), .show(), .hide(), and .toggle(). The effect method is invoked with this being a single DOM element. The done argument must be invoked when the animation is complete.
+
jQuery.effects.define() stores the new effect in jQuery.effects.effect[ name ] and returns the function that was provided as the effect parameter.
+
+
+
+
+]]>
+
+
+
+
+
+
diff --git a/entries/jQuery.effects.removePlaceholder.xml b/entries/jQuery.effects.removePlaceholder.xml
new file mode 100644
index 00000000..b8b2c405
--- /dev/null
+++ b/entries/jQuery.effects.removePlaceholder.xml
@@ -0,0 +1,17 @@
+
+
+
+ jQuery.effects.removePlaceholder()
+
+
+ The original element that has an associated placeholder.
+
+
+ Removes a placeholder created with jQuery.effects.createPlaceholder().
+
+
Removes the placeholder for an element. This method is safe to call even if jQuery.effects.createPlaceholder() did not create a placeholder.
+
+
+
+
+
diff --git a/entries/jQuery.effects.restoreStyle.xml b/entries/jQuery.effects.restoreStyle.xml
new file mode 100644
index 00000000..ce6e3d0b
--- /dev/null
+++ b/entries/jQuery.effects.restoreStyle.xml
@@ -0,0 +1,17 @@
+
+
+
+ jQuery.effects.restoreStyle()
+
+
+ The element to restore styles for.
+
+
+ Restores all inline styles for an element.
+
+
+
+
+
+
+
diff --git a/entries/jQuery.effects.saveStyle.xml b/entries/jQuery.effects.saveStyle.xml
new file mode 100644
index 00000000..a9e248ba
--- /dev/null
+++ b/entries/jQuery.effects.saveStyle.xml
@@ -0,0 +1,18 @@
+
+
+
+ jQuery.effects.saveStyle()
+
+
+ The element to save styles for.
+
+
+ Stores a copy of all inline styles applied to an element.
+
+
Stores a copy of the current inline styles applied to the element, which can be reapplied to the element later using jQuery.effects.restoreStyle(). This is useful when animating various styles and restoring the existing styles at the end.
+
When using jQuery.effects.define() to create an effect, if jQuery.effects.saveStyle() is used on the main element being animated, the styles will be restored automatically when the animation is complete.
+
+
+
+
+
diff --git a/entries/jQuery.effects.scaledDimensions.xml b/entries/jQuery.effects.scaledDimensions.xml
new file mode 100644
index 00000000..6b714bc6
--- /dev/null
+++ b/entries/jQuery.effects.scaledDimensions.xml
@@ -0,0 +1,23 @@
+
+
+
+ jQuery.effects.scaledDimensions()
+
+
+ The element to scale.
+
+
+ The percentage of the original size that the element's dimensions should be scaled to.
+
+
+ Which direction to scale the element's dimensions; either "horizontal" or "vertical". If direction is omitted, both dimensions will be scaled.
+
+
+ Scales the dimensions of an element.
+
+
This method scales the dimensions of an element, returning an object containing height, width, outerHeight, and outerWidth properties. The element is not actually modified.
jQuery UI contains many widgets that maintain state and therefore have a slightly different usage pattern than typical jQuery plugins. All of jQuery UI's widgets use the same patterns, which is defined by the widget factory. So if you learn how to use one widget, then you'll know how to use all of them.
-
Note: This documentation shows examples using the progressbar widget but the syntax is the same for every widget.
Note: This documentation shows examples using the progressbar widget but the syntax is the same for every widget.
Initialization
@@ -41,7 +43,7 @@
We can pass as many or as few options as we want during initialization. Any options that we don't pass will just use their default values.
-
You can pass multiple options arguments. Those arguments will be merged into one object (similar to $.extend( true, target, object1, objectN )). This is useful for sharing options between instances, while overriding some settings for each one:
+
You can pass multiple options arguments. Those arguments will be merged into one object (similar to $.extend( true, target, object1, objectN )). This is useful for sharing options between instances, while overriding some properties for each one:
All widgets have events associated with their various behaviors to notify you when the state is changing. For most widgets, when the events are triggered, the names are prefixed with the widget name. For example, we can bind to progressbar's change event which is triggered whenever the value changes.
+
All widgets have events associated with their various behaviors to notify you when the state is changing. For most widgets, when the events are triggered, the names are prefixed with the widget name and lowercased. For example, we can bind to progressbar's change event which is triggered whenever the value changes.
The widget's instance is stored using jQuery.data() with the widget's full name as the key. Therefore, you can use the following to retrieve the progressbar widget's instance object from the element.
+
The widget's instance can be retrieved from a given element using the instance() method.
+
+
+ $( "#elem" ).progressbar( "instance" );
+
+
+
If the instance() method is called on an element that is not associated with the widget, undefined is returned.
The instance is stored using jQuery.data() with the widget's full name as the key. Therefore, the :data selector can also determine whether an element has a given widget bound to it.
- document: The document that the widget's element is within. Useful if you need to interact with widgets within iframes.
+ defaultElement: An element to use when a widget instance is constructed without providing an element. For example, since the progressbar's defaultElement is "<div>", $.ui.progressbar({ value: 50 }) instantiates a progressbar widget instance on a newly created <div>.
+
+
+ document: A jQuery object containing the document that the widget's element is within. Useful if you need to interact with widgets within iframes.
element: A jQuery object containing the element used to instantiate the widget. If you select multiple elements and call .myWidget(), a separate widget instance will be created for each element. Therefore, this property will always contain one element.
@@ -150,7 +168,7 @@
version: The string version of the widget. For jQuery UI widgets this will be set to the version of jQuery UI the widget is using. Widget developers have to set this property in their prototype explicitly.
- widgetEventPrefix: The prefix prepended to the name of events fired from this widget. For example the widgetEventPrefix of the draggable widget is "drag", therefore when a draggable is created, the name of the event fired is "dragcreate". By default the widgetEventPrefix of a widget is its name. Note: This property is deprecated and will be removed in a later release. Event names will be changed to widgetName:eventName (e.g. "draggable:create".
+ widgetEventPrefix: The prefix prepended to the name of events fired from this widget. For example the widgetEventPrefix of the draggable widget is "drag", therefore when a draggable is created, the name of the event fired is "dragcreate". By default the widgetEventPrefix of a widget is its name. Note: This property is deprecated and will be removed in a later release. Event names will be changed to widgetName:eventName (e.g. "draggable:create").
widgetFullName: The full name of the widget including the namespace. For $.widget( "myNamespace.myWidget", {} ), widgetFullName will be "myNamespace-myWidget".
@@ -159,7 +177,7 @@
widgetName: The name of the widget. For $.widget( "myNamespace.myWidget", {} ), widgetName will be "myWidget".
- window: The window that the widget's element is within. Useful if you need to interact with widgets within iframes.
+ window: A jQuery object containing the window that the widget's element is within. Useful if you need to interact with widgets within iframes.
@@ -174,33 +192,201 @@
+
+
+
Additional (thematic) classes to add to the widget, in addition to the structural classes. The structural classes are used as keys of this option and the thematic classes are the values. See the _addClass() method for using this in custom widgets. Check out the documentation of individual widgets to see which classes they support.
+
The primary motivation of this option is to map structural classes to theme classes. In other words, any class prefixed with namespace and widget, like "ui-progressbar-", is considered a structural class. These are always added to the widget. In contrast to that, any class not specific to the widget is considered a theme class. These could be part of jQuery UI's CSS framework, but can also come from other CSS frameworks or be defined in custom stylesheets.
+
Setting the classes option after creation will override all default properties. To only change specific values, use deep setters, e.g. .option( "classes.ui-progressbar-value", null ).
+
+
+
+ Initialize a progressbar widget with the classes option specified, changing the theming for the ui-progressbar class:
+
+$( ".selector" ).progressbar({
+ classes: {
+ "ui-progressbar": "highlight"
+ }
+});
+
+
+
+ Get or set the classes option, after initialization:
+
+// Getter
+var classes = $( ".selector" ).widget( "option", "classes" );
+
+// Setter, override all classes
+$( ".selector" ).widget( "option", "classes", { "custom-header": "icon-warning" } );
+
+// Setter, override just one class
+$( ".selector" ).widget( "option", "classes.custom-header", "icon-warning" );
+
+
+
+
+
+
+
+ Add classes to an element of the widget.
+
This provides a hook for the user to add additional classes or replace default styling classes, through the classes option.
+
It also provides automatic removal of these classes when a widget is destroyed, as long as you're using _addClass(), _removeClass() and _toggleClass() together. This can heavily simplify the implementation of custom _destroy() methods.
+
+
+ The element to add the classes to. Defaults to this.element.
+
+
+
+ The classes to add, as a space-delimited list. If a property of the classes option matches a key, the value will be added as well.
+
When you only need the extra argument, you can skip this argument by specifying null.
+
+
+
+ Additional classes to add, required for layout or other reasons. Unlike the keys argument, these aren't associated with any properties of the classes option. Just like keys, they will also be automatically removed when destroying the widget.
+
+
+ Add the ui-progressbar class to the widget's element (this.element). Will also add any additional classes specified through the classes option for the given class.
+
+
+
+ Add the demo-popup-header class to the specified element (here referencing this.popup). Will also add any additional classes specified through the classes option for the given class. In addition, it will always add the ui-front class.
+
+
+
+ Adds the ui-helper-hidden-accessible class to the specified element. Uses null for the keys argument to skip it.
+
+
+
+
+
+ Remove classes from an element of the widget.
+
The arguments are the same as for the _addClass() method, the same semantics apply, just in reverse.
+
+
+ The element to remove the classes from. Defaults to this.element.
+
+
+
+ The classes to remove, as a space-delimited list. If a property of the classes option matches a key, the value will be removed as well.
+
When you only need the extra argument, you can skip this argument by specifying null.
+
+
+
+ Additional classes to remove, required for layout or other reasons. Unlike the keys argument, these aren't associated with any properties of the classes option.
+
+
+ Remove the ui-progressbar class from the widget's element (this.element). Will also remove any additional classes specified through the classes option for the given class.
+
+
+
+ Remove the demo-popup-header class from the specified element (here referencing this.popup). Will also remove any additional classes specified through the classes option for the given class. In addition, it will also remove the ui-front class.
+
+
+
+ Remove the ui-helper-hidden-accessible class from the specified element. Uses null for the keys argument to skip it.
+
+
+
+
+
+ Toggle classes of an element of the widget.
+
The arguments are the same as for the _addClass() and _removeClass() methods, except for the additional boolean argument that specifies to add or remove classes.
+
Unlike jQuery's .toggleClass() method, the boolean add argument is always required.
+
+
+ The element to toogle the classes on. Defaults to this.element.
+
+
+
+ The classes to toogle, as a space-delimited list. If a property of the classes option matches a key, the value will be toggled as well.
+
When you only need the extra argument, you can skip this argument by specifying null.
+
+
+
+ Additional classes to toggle, required for layout or other reasons. Unlike the keys argument, these aren't associated with any properties of the classes option. Just like keys, they will also be automatically removed when destroying the widget.
+
+
+
+
Indicates whether to add or remove the specified classes, where a boolean true indicates that classes should be added, a boolean false indicates that classes should be removed.
+
+
+
+ Toggle the ui-state-disabled class on the widget's element (this.element).
+
+
+
The _create() method is the widget's constructor.
There are no parameters, but this.element and this.options are already set.
+
+ Set the background color of the widget's element based on an option.
+
+
The public destroy() method cleans up all common data, events, etc. and then delegates out to _destroy() for custom, widget-specific, cleanup.
+
+ Remove a class from the widget's element when the widget is destroyed.
+
+
All widgets trigger the create event. By default, no data is provided in the event, but this method can return an object which will be passed as the create event's data.
+
+ Pass the widget's options to create event handlers as an argument.
+
+
- This method allows the widget to define a custom method for defining options during instantiation. This user-provided options override the options returned by this method which override the default options.
+ This method allows the widget to define a custom method for defining options during instantiation. The user-provided options override the options returned by this method, which override the default options.
+
+ Make the widget element's id attribute available as an option.
+
+
@@ -208,14 +394,44 @@
Note: Initialization should only be handled if there is a logical action to perform on successive calls to the widget with no arguments.
+
+ Call the open() method if the autoOpen option is set.
+
+
Called whenever the option() method is called, regardless of the form in which the option() method was called.
Overriding this is useful if you can defer processor-intensive changes for multiple option changes.
+
+ Call a resize() method if the height or width options change.
+
+
- A map of option-value pairs to set.
+ An object containing options to set, with the name of the option as the key and the option value as the value.
@@ -228,6 +444,20 @@
A value to set for the option.
+
+ Update a widget's element when its height or width option changes.
+
+
@@ -242,13 +472,23 @@
Whether or not to bypass the disabled check.
- Which element(s) to bind the event handlers to. If no element is provided, this.element is used.
+ Which element(s) to bind the event handlers to. If no element is provided, this.element is used for non-delegated events and the widget element is used for delegated events.
- A map in which the string keys represent the event type and optional selector for delegation, and the values represent a handler function to be called for the event.
+ An object in which the keys represent the event type and optional selector for delegation, and the values represent a handler function to be called for the event.
+
+ Prevent the default action of all links clicked within the widget's element.
+
+
@@ -262,11 +502,33 @@
One or more space-separated event types.
+
+ Unbind all click events from the widget's element.
+
+
Invokes the method of the same name from the parent widget, with any specified arguments. Essentially .call().
+
+
+ Zero to many arguments to pass to the parent widget's method.
+
+
+
+ Handle title option updates and call the parent widget's _setOption() to update the internal storage of the option.
+
+
@@ -275,6 +537,17 @@
Array of arguments to pass to the parent method.
+
+ Handle title option updates and call the parent widget's _setOption() to update the internal storage of the option.
+
+
@@ -289,6 +562,12 @@
The number of milliseconds to wait before invoking the function. Defaults to 0.
+
+ Call the _foo() method on the widget after 100 milliseconds.
+
+
@@ -298,6 +577,12 @@
The element(s) to apply the hoverable behavior to.
+
+ Apply hoverable styling to all <div>s within the element on hover.
+
+
@@ -307,12 +592,18 @@
The element(s) to apply the focusable behavior to.
+
+ Apply focusable styling to a set of elements within the widget.
+
+
Triggers an event and its associated callback.
The option with the name equal to type is invoked as the callback.
-
The event name is the widget name + type.
+
The event name is the lowercase concatenation of the widget name and type.
Note: When providing data, you must provide all three parameters. If there is no event to pass along, just pass null.
If the default action is prevented, false will be returned, otherwise true. Preventing the default action happens when the handler returns false or calls event.preventDefault().
@@ -325,6 +616,23 @@
A hash of data associated with the event.
+
+ Trigger a search event whenever a key is pressed.
+
+
@@ -335,11 +643,20 @@
The element(s) to show.
- The settings defining how to show the element.
+ The properties defining how to show the element.Callback to invoke after the element has been fully shown.
+
+ Pass along the show option for custom animations.
+
+
@@ -350,11 +667,21 @@
The element(s) to hide.
- The settings defining how to hide the element.
+ The properties defining how to hide the element.Callback to invoke after the element has been fully hidden.
+
+ Pass along the hide option for custom animations.
+
+
diff --git a/entries/labels.xml b/entries/labels.xml
new file mode 100644
index 00000000..bc7efd5f
--- /dev/null
+++ b/entries/labels.xml
@@ -0,0 +1,29 @@
+
+
+ .labels()
+ Finds all label elements associated with the first selected element.
+
+
This can be used to find all the <label> elements associated with an <input> element. The association can be through nesting, where the label is an ancestor of the input, or through the for attribute on the label, pointing at the id attribute of the input. If no labels are associated with the given element, an empty jQuery object is returned.
+
This methods mimics the native labels property, which isn't supported in all browsers. In addition, this method also works for document fragments.
+
+
+ 1.12
+
+
+ 100
+ Highlight all labels of the input element
+
+
+ Firstname
+
+
+
+]]>
+
+
+
+
+
diff --git a/entries/menu.xml b/entries/menu.xml
index 6af71eb0..1a54b550 100644
--- a/entries/menu.xml
+++ b/entries/menu.xml
@@ -5,23 +5,36 @@
Themeable menu with mouse and keyboard interactions for navigation.
-
A menu can be created from any valid markup as long as the elements have a strict parent/child relationship and each menu item has an anchor. The most commonly used element is the unordered list (<ul>):
+
A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. The most commonly used element is the unordered list (<ul>). Additionally, the contents of each menu item must be wrapped with a block-level DOM element. In the example below <div> elements are used as wrappers:
ENTER/SPACE: Invoke the focused menu item's action, which may be opening a submenu.
-
UP: Move focus to the previous menu item.
-
DOWN: Move focus to the next menu item.
-
RIGHT: Open the submenu, if available.
-
LEFT: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.
-
ESCAPE: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.
+
ENTER/SPACE: Invoke the focused menu item's action, which may be opening a submenu.
+
UP: Move focus to the previous menu item.
+
DOWN: Move focus to the next menu item.
+
RIGHT: Open the submenu, if available.
+
LEFT: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.
+
ESCAPE: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.
Typing a letter moves focus to the first item whose title starts with that character. Repeating the same character cycles through matching items. Typing more characters within the one second timer matches those characters.
@@ -71,12 +90,17 @@
- ui-menu: The outer container of the menu. This element will additionally have a ui-menu-icons class if the menu contains icons.
+ ui-menu: The outer container of the menu, as well as any nested submenu. This top-level element will additionally have a ui-menu-icons class if the menu contains icons.
- ui-menu-item: The container for individual menu items.
+ ui-menu-item: The container for individual menu items. This contains the element for the item's text itself as well as the element for submenus.
-
ui-menu-icon: The submenu icons set via the icons option.
+
+ ui-menu-item-wrapper: The wrapper element inside each individual menu item, containting the text content and the icon indicating submenus.
+
+
ui-menu-icon: The submenu icons set via the icons option.
+
+
ui-menu-divider: Divider elements between menu items.
Selector for the elements that serve as the menu items.
+
Note: The items option should not be changed after initialization.
@@ -150,6 +184,7 @@
+
Opens the sub-menu below the currently active item, if one exists.
@@ -158,9 +193,9 @@
What triggered the menu to expand.
-
+
- Activates a particular menu item, begins opening any sub-menu if present and triggers the menu's focus event.
+ Activates the given menu item and triggers the menu's focus event. Opens the menu item's sub-menu, if one exists.
What triggered the menu item to gain focus.
@@ -230,7 +265,7 @@
- Method that determines whether clicks on the document should close any open menus. By default, menus are closed unless the click occurred a menu.
+ Method that determines whether clicks on the document should close any open menus. By default, menus are closed unless the click occurred on the menu.
@@ -239,6 +274,20 @@
_closeOnDocumentClick: function( event ) {
return false;
}
+]]>
+
+
+
+
+ Determines whether an item should actually be represented as a divider instead of a menu item. By default any item that contains just spaces and/or dashes is considered a divider.
+
+
+
+ Treat all items as menu items with no dividers.
+
@@ -297,19 +346,32 @@ $( "#menu" ).menu();
]]>
-
Similar to jQuery.Widget, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to jQuery.Widget, but it does include internal methods that are not intended to be overwritten. The intended public API is _mouseStart(), _mouseDrag(), _mouseStop(), and _mouseCapture().
+
Similar to jQuery.Widget, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to jQuery.Widget, but it does include internal methods that are not intended to be overwritten. The intended public API is _mouseStart(), _mouseDrag(), _mouseStop(), and _mouseCapture().
Dependencies
@@ -15,9 +15,11 @@
Prevents interactions from starting on specified elements.
+ 1.12Time in milliseconds after mousedown until the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.
+ 1.12Distance in pixels after mousedown the mouse must move before the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.
This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.
- 1.8
+ 1.8Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.
@@ -54,13 +54,19 @@
+ 310A simple jQuery UI Position example.
- ui-progressbar: The outer container of the progressbar. This element will additionally have a class of ui-progressbar-indeterminate for indeterminate progressbars.
+ ui-progressbar: The outer container of the progressbar. This element will additionally have a class of ui-progressbar-indeterminate for indeterminate progressbars. For determinate progressbars, the ui-progressbar-complete class is added once the maximum value is reached.
ui-progressbar-value: The element that represents the filled portion of the progressbar.
@@ -35,6 +35,15 @@
1.6
+
The maximum value of the progressbar.
@@ -70,6 +79,7 @@
+ Gets or sets the current value of the progressbar.
diff --git a/entries/removeUniqueId.xml b/entries/removeUniqueId.xml
index b9ef87c5..11814843 100644
--- a/entries/removeUniqueId.xml
+++ b/entries/removeUniqueId.xml
@@ -6,7 +6,7 @@
1.9
-
The .removeUniqueId() will remove ids that were set by .uniqueId(). Calling .removeUniqueId() on an element that did not have its id set by .uniqueId() will have no affect, even if the element has an id.
+
The .removeUniqueId() will remove ids that were set by .uniqueId(). Calling .removeUniqueId() on an element that did not have its id set by .uniqueId() will have no affect, even if the element has an id.
The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.
+
+
+
+
ui-resizable: The resizable element. During a resize, the ui-resizable-resizing class is added. When the autoHide option is set, the ui-resizable-autohide class is added.
+
ui-resizable-handle: One of the handles of the resizable, specified using the handles option. Each handle will also have a ui-resizable-{direction} class according to its position.
+
ui-resizable-ghost: When using the ghost option, this class is applied to the ghost helper element.
+
ui-resizable-helper: When the animate option is used, but the helper option isn't specified, this class is added to the generated helper.
+ 1.12Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.
+ 1.12Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.
@@ -153,12 +171,22 @@
The size represented as { width, height } before the resizable is resized
- The current position represented as { left, top }
+ The current position represented as { left, top }. The values may be changed to modify where the element will be positioned. Useful for custom resizing logic.
- The current size represented as { width, height }
+ The current size represented as { width, height }. The values may be changed to modify where the element will be positioned. Useful for custom resizing logic.
+
+ Restrict height resizing to 30 pixel increments:
+
+ This event is triggered at the end of a resize operation.
@@ -192,6 +220,7 @@
+
diff --git a/entries/selectable.xml b/entries/selectable.xml
index f7cf8b97..43b5f204 100644
--- a/entries/selectable.xml
+++ b/entries/selectable.xml
@@ -5,6 +5,18 @@
The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Elements can also be selected via click or drag while holding the ctrl/meta key, allowing for multiple (non-contiguous) selections.
+
+
+
+
+ ui-selectable: The selectable element.
+
+
ui-selectee: One of the selectable elements, as specified through the filter option. This element can also receive one of the following classes: ui-selecting (when the lasso includes this element), ui-selected (after a successful selection), ui-unselecting (when the lasso lost this element).
+
+
+
ui-selectable-helper: The "lasso" element used to visualize the ongoing selection.
Prevents selecting if you start on elements matching the selector.
+
+
+
+
+ 1.12Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element.
+ 1.12Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.
@@ -97,6 +115,7 @@
+ Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee when the autoRefresh option is set to false.
diff --git a/entries/selectmenu.xml b/entries/selectmenu.xml
new file mode 100644
index 00000000..cae8dacc
--- /dev/null
+++ b/entries/selectmenu.xml
@@ -0,0 +1,392 @@
+
+
+ Selectmenu Widget
+ Duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.
+
+
Selectmenu transforms a <select> element into a themeable and customizable control. The widget acts as a proxy to the original <select>; therefore the original element's state is maintained for form submission and serialization.
+
+
Selectmenu supports <optgroup> elements and custom markup to render specific presentations like multiple lines. The <select> and its options can be disabled by adding a disabled attribute.
+
+
+ Note: Support for accesskey on custom elements is extremely limited in browsers. As such, if there is an accesskey attribute on the <select> element, it will not work with the custom selectmenu. If there is an accesskey attribute on any of the <option> elements, using the accesskey may cause the original element and the custom element to be out of sync. However, most browsers don't support accesskey on <option> elements.
+
+
+
Keyboard interaction
+
+
When the menu is open, the following key commands are available:
+
+
UP/LEFT: Move focus to the previous item.
+
DOWN/RIGHT: Move focus to the next item.
+
END/PAGE DOWN: Move focus to the last item.
+
HOME/PAGE UP: Move focus to the first item.
+
ESCAPE: Close the menu.
+
ENTER/SPACE: Select the currently focused item and close the menu.
+
ALT/OPTION + UP/DOWN: Toggle the visibility of the menu.
+
+
+
When the menu is closed, the following key commands are available:
+
+
UP/LEFT: Select the previous item.
+
DOWN/RIGHT: Select the next item.
+
END/PAGE DOWN: Select the last item.
+
HOME/PAGE UP: Select the first item.
+
ALT/OPTION + UP/DOWN: Toggle the visibility of the menu.
+
SPACE: Open the menu.
+
+
+
+
+
+
+ ui-selectmenu-button: The button-like element replacing the native selectmenu on the page. Has the ui-selectmenu-button-closed class when closed, the ui-selectmenu-button-open class when open.
+
+
ui-selectmenu-text: The span representing the text portion of the button element.
+
ui-selectmenu-icon: The icon within the selectmenu button.
+
+
+
+ ui-selectmenu-menu: The wrapper element around the menu used to display options to the user (not the menu itself). When the menu is open, the ui-selectmenu-open class is added.
+
+
ui-selectmenu-optgroup: One of the elements that replicates <optgroup> elements from native selects.
+ Which element to append the menu to. When the value is null, the parents of the <select> are checked for a class name of ui-front. If an element with the ui-front class name is found, the menu is appended to that element. Regardless of the value, if no element is found, the menu is appended to the body.
+
+
+ {
+ "ui-selectmenu-button-closed": "ui-corner-all",
+ "ui-selectmenu-button-open": "ui-corner-top",
+}
+
+
+
+ Initialize the with the classes option specified, changing the theming for the ui-selectmenu-menu class:
+
+ $( ".selector" ).({
+ classes: {
+ "ui-selectmenu-menu": "highlight"
+ }
+ });
+
+
+
+ Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-selectmenu-menu class:
+
+ // Getter
+ var themeClass = $( ".selector" ).( "option", "classes.ui-selectmenu-menu" );
+
+ // Setter
+ $( ".selector" ).( "option", "classes.ui-selectmenu-menu", "highlight" );
+
+
+
+
+
+ Identifies the position of the menu in relation to the associated button element. You can refer to the jQuery UI Position utility for more details about the various options.
+
+
+ The width of the menu, in pixels. When the value is null, the width of the native select is used. When the value is false, no inline style will be set for the width, allowing the width to be set in a stylesheet.
+
+
+
+
+
+
+ Triggered when the selected item has changed. Not every select event will fire a change event.
+
+
+
+ The active item.
+
+
+
+
+ Triggered when the menu is hidden.
+
+
+
+
+
+ Triggered when an items gains focus.
+
+
+
+
+ The focused item.
+
+
+
+
+ Triggered when the menu is opened.
+
+
+
+
+ Triggered when a menu item is selected.
+
+
+
+
+ The selected item.
+
+
+
+
+
+
+ Closes the menu.
+
+
+
+
+
+
+ Returns a jQuery object containing the menu element.
+
+
+ Opens the menu.
+
+
+
+
+ Parses the original element and re-renders the menu. Processes any <option> or <optgroup> elements that were added, removed or disabled.
+
+
+
+ Returns a jQuery object containing the button element.
+
+
+
+
+
+
Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it. See the Menu documentation for more details about the markup.
+
+
+ The <ul> element that the newly created <li> element must be appended to.
+
+
+
+ The original <option> element.
+
+
+ The index of the <option> within the <select>.
+
+
+ The value of the <option>.
+
+
+ The label of the <option>.
+
+
+ The label for the parent optgroup, if any.
+
+
+ Whether the <option> is disabled.
+
+
+
+ Style the menu item background colors based on the value of their corresponding option elements.
+ " )
+ .css( "background-color", item.value );
+
+ if ( item.disabled ) {
+ li.addClass( "ui-state-disabled" );
+ }
+
+ this._setText( li, item.label );
+
+ return li.appendTo( ul );
+}
+]]>
+
+
+
+
+ Method that controls building the widget's menu. The method is passed an empty <ul> and an array of items based on the <option> elements in the original <select>. Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.
+
+
+ An empty <ul> element to use as the widget's menu.
+
+
+ An array of items based on the <option> elements in the original <select>. See the _renderItem() extension point for details on the format of the item objects.
+
+
+
+
Add a CSS class name to the odd menu items.
+
Note: For simplicity, this example does not support optgroups or disabled menu items.
+
+
+
+
+
+ Method responsible for sizing the menu before it is displayed. The menu element is available at this.menu.
+
+ Always display the menu as 500 pixels wide.
+
+
+
+
+
+
Method that controls the creation of the generated button content. The method must create and return a new element.
+
+
+
+ Whether the item is disabled.
+
+
+ A reference to the item's original <option> element.
+
+
+ The numeric index of the item.
+
+
+ The string to display for the item.
+
+
+ If the item is within an <optgroup>, this is set to that <optgroup>'s label.
+
+
+ The value attribute of the item's original <option>.
+
+
+
+ Style the button background color based on the value of the selected option.
+ ", {
+ "class": "ui-selectmenu-text"
+ })
+ this._setText( buttonItem, item.label );
+
+ buttonItem.css( "background-color", item.value )
+
+ return buttonItem;
+}
+]]>
+
+
+
+
+ A simple jQuery UI Selectmenu
+
+ Select a speed:
+
+]]>
+
+
+
+ 270
+ A simple jQuery UI Selectmenu with optgroups
+
+ Select a file:
+
+]]>
+
+
+
+ 270
+ A jQuery UI Selectmenu with overflow
+
+ Select a number:
+
+]]>
+
+
+
+
diff --git a/entries/show.xml b/entries/show.xml
index d0db611b..76e7a2e0 100644
--- a/entries/show.xml
+++ b/entries/show.xml
@@ -10,7 +10,7 @@
A string indicating which effect to use for the transition.
- Effect-specific settings and easing.
+ Effect-specific properties and easing.
diff --git a/entries/size-effect.xml b/entries/size-effect.xml
index daea84b0..e8602458 100644
--- a/entries/size-effect.xml
+++ b/entries/size-effect.xml
@@ -2,6 +2,9 @@
Size EffectResize an element to a specified width and height.
+
+
When using this effect with the .show() and .toggle() methods, the to argument is used as the starting point and the original size used as the endpoint.
+ Height and width to resize to.
diff --git a/entries/slide-effect.xml b/entries/slide-effect.xml
index b51b1495..2ec612e3 100644
--- a/entries/slide-effect.xml
+++ b/entries/slide-effect.xml
@@ -3,7 +3,7 @@
Slide EffectSlides the element out of the viewport.
-
+ The direction of the effect. Possible values: "left", "right", "up", "down".
diff --git a/entries/slider.xml b/entries/slider.xml
index 56bcc570..58e6f675 100644
--- a/entries/slider.xml
+++ b/entries/slider.xml
@@ -11,10 +11,10 @@
- ui-slider: The track of the slider control. This element will additionally have a class name of ui-slider-horizontal or ui-slider-vertical depending on the orientation of the slider.
+ ui-slider: The track of the slider control. This element will additionally have a class name of ui-slider-horizontal or ui-slider-vertical depending on the orientation option of the slider.
-
ui-slider-handle: The slider handles.
-
ui-slider-range: The selected range used when the range option is set. This element can additionally have a class of ui-slider-range-min or ui-slider-range-max if the range option is set to "min" or "max" respectively.
+
ui-slider-handle: One of the slider handles.
+
ui-slider-range: The selected range used when the range option is set. This element can additionally have a class of ui-slider-range-min or ui-slider-range-max if the range option is set to "min" or "max" respectively.
@@ -30,7 +30,7 @@
1.5
- Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.
+ Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.When set to true, the handle will animate with the default duration.
@@ -41,6 +41,15 @@
The duration of the animation, in milliseconds.
The maximum value of the slider.
@@ -76,8 +85,11 @@
Triggered when the user starts sliding.
-
- The jQuery object representing the handle being moved.
+
+ The HTML element representing the handle being moved.
+
+
+ The numeric index of the handle being moved.The current value of the slider.
@@ -88,8 +100,11 @@
Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.
-
- The jQuery object representing the handle being moved.
+
+ The HTML element representing the handle being moved.
+
+
+ The numeric index of the handle being moved.The value that the handle will move to if the event is not canceled.
@@ -103,8 +118,11 @@
Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.
-
- The jQuery object representing the handle that was changed.
+
+ The HTML element representing the handle that was changed.
+
+
+ The numeric index of the handle that was moved.The current value of the slider.
@@ -115,8 +133,11 @@
Triggered after the user slides a handle.
-
- The jQuery object representing the handle that was moved.
+
+ The HTML element representing the handle that was moved.
+
+
+ The numeric index of the handle that was moved.The current value of the slider.
@@ -128,6 +149,7 @@
+ Get or set the value of the slider.
diff --git a/entries/sortable.xml b/entries/sortable.xml
index 60297f67..5b6e12a6 100644
--- a/entries/sortable.xml
+++ b/entries/sortable.xml
@@ -6,6 +6,19 @@
The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.
Note: In order to sort table rows, the tbody must be made sortable, not the table.
+
+
+
+
+ ui-sortable: The sortable element.
+
+
ui-sortable-handle: The handle of each sortable item, specified using the handle option. By default, each sortable item itself is also the handle.
+
ui-sortable-placeholder: The element used to show the future position of the item currently being sorted.
+
+
+
ui-sortable-helper: The element shown while dragging a sortable item. The element actually used depends on the helper option.
Prevents sorting if you start on elements matching the selector.
+
+
+
+
A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both sortable elements.
@@ -62,10 +79,12 @@
Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.
+ 1.12Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.
+ 1.12Tolerance, 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.
@@ -91,7 +110,7 @@
If set to "clone", then the element will be cloned and the clone will be dragged.
- A function that will return a DOMElement to use while dragging. The function receives the event and the element being sorted.
+ A function that must return a jQuery or DOMElement to use while dragging. The function receives the event and the jQuery element being sorted.
@@ -167,14 +186,33 @@
- This event is triggered when a connected sortable list has received an item from another list.
+ This event is triggered when an item from a connected sortable list has been dropped into another list. The latter is the event target.
- This event is triggered when a sortable item has been dragged out from the list and into another.
+ This event is triggered when a sortable item from the list has been dropped into another. The former is the event target.
-
+
+
+ The jQuery object representing the helper being sorted.
+
+
+ The jQuery object representing the current dragged element.
+
+
+ The current absolute position of the helper represented as { top, left }.
+
+
+ The current position of the helper represented as { top, left }.
+
+
+ The original position of the element represented as { top, left }.
+
+
+ The jQuery object representing the element being used as a placeholder.
+
+ This event is triggered when a sortable item is moved into a sortable list.
@@ -207,6 +245,7 @@
+ Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.
diff --git a/entries/spinner.xml b/entries/spinner.xml
index db7a8bf9..c5fa0a9e 100644
--- a/entries/spinner.xml
+++ b/entries/spinner.xml
@@ -5,17 +5,21 @@
Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.
-
The Spinner, or number stepper widget, is perfect for handling all kinds of numeric input. It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales.
+
The Spinner, or number stepper widget, is perfect for handling all kinds of numeric input. It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales.
Spinner wraps a text input with two buttons to increment and decrement the current value. Key events are added so that the same incrementing and decrementing can be done with the keyboard. Spinner delegates to Globalize for number formatting and parsing.
+
+ Spinner currently supports Globalize 0.x only. Support for Globalize 1.x is currently not planned.
+
+
Keyboard interaction
-
UP: Increment the value by one step.
-
DOWN: Decrement the value by one step.
-
PAGE UP: Increment the value by one page.
-
PAGE DOWN: Decrement the value by one page.
+
UP: Increment the value by one step.
+
DOWN: Decrement the value by one step.
+
PAGE UP: Increment the value by one page.
+
PAGE DOWN: Decrement the value by one page.
Focus stays in the text field, even after using the mouse to click one of the spin buttons.
Sets the culture to use for parsing and formatting the value. If null, the currently set culture in Globalize is used, see Globalize docs for available cultures. Only relevant if the numberFormat option is set. Requires Globalize to be included.
@@ -110,6 +123,7 @@
+
@@ -166,6 +180,11 @@
+
+
+ Returns whether the Spinner's value is valid given its min, max, and step.
+
+
diff --git a/entries/switchClass.xml b/entries/switchClass.xml
index 32f5b3f7..638dd41d 100644
--- a/entries/switchClass.xml
+++ b/entries/switchClass.xml
@@ -5,7 +5,6 @@
The .switchClass() method allows you to animate the transition of adding and removing classes at the same time.
When focus is on a tab, the following key commands are available:
-
UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
-
DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
-
HOME: Move focus to the first tab. Activate focused tab after a short delay.
-
END: Move focus to the last tab. Activate focused tab after a short delay.
-
SPACE: Activate panel associated with focused tab.
-
ENTER: Activate or toggle panel associated with focused tab.
-
ALT+PAGE UP: Move focus to the previous tab and immediately activate.
-
ALT+PAGE DOWN: Move focus to the next tab and immediately activate.
+
UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
+
DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
+
CTRL + UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. The focused tab must be manually activated.
+
CTRL + DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. The focused tab must be manually activated.
+
HOME: Move focus to the first tab. Activate focused tab after a short delay.
+
END: Move focus to the last tab. Activate focused tab after a short delay.
+
CTRL + HOME: Move focus to the first tab. The focused tab must be manually activated.
+
CTRL + END: Move focus to the last tab. The focused tab must be manually activated.
+
SPACE: Activate panel associated with focused tab.
+
ENTER: Activate or toggle panel associated with focused tab.
+
ALT/OPTION + PAGE UP: Move focus to the previous tab and immediately activate.
+
ALT/OPTION + PAGE DOWN: Move focus to the next tab and immediately activate.
When focus is in a panel, the following key commands are available:
-
CTRL+UP: Move focus to associated tab.
-
ALT+PAGE UP: Move focus to the previous tab and immediately activate.
-
ALT+PAGE DOWN: Move focus to the next tab and immediately activate.
+
CTRL + UP: Move focus to associated tab.
+
ALT/OPTION + PAGE UP: Move focus to the previous tab and immediately activate.
+
ALT/OPTION + PAGE DOWN: Move focus to the next tab and immediately activate.
- ui-tabs: The outer container of the tabs. This element will additionally have a class of ui-tabs-collapsible when the collapsible option is set.
+ ui-tabs: The outer container of the tabs. This element will additionally have a class of ui-tabs-collapsible when the collapsible option is set.
ui-tabs-nav: The list of tabs.
-
The active list item in the nav will have a ui-tabs-active class. Any list item whose associated content is loading via an Ajax call will have a ui-tabs-loading class.
+
ui-tabs-tab: One of the items in the list of tabs.The active item will have the ui-tabs-active class. Any list item whose associated content is loading via an Ajax call will have the ui-tabs-loading class.
ui-tabs-anchor: The anchors used to switch panels.
@@ -97,6 +101,16 @@
The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
Triggered when a remote tab is about to be loaded, after the beforeActivate event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to ui.jqXHR and ui.ajaxSettings.
-
Note: Although ui.ajaxSettings is provided and can be modified, some of these settings have already been processed by jQuery. For example, prefilters have been applied, data has been processed, and type has been determined. The beforeLoad event occurs at the same time, and therefore has the same restrictions, as the beforeSend callback from jQuery.ajax().
+
Note: Although ui.ajaxSettings is provided and can be modified, some of these properties have already been processed by jQuery. For example, prefilters have been applied, data has been processed, and type has been determined. The beforeLoad event occurs at the same time, and therefore has the same restrictions, as the beforeSend callback from jQuery.ajax().
@@ -182,7 +196,7 @@
The jqXHR object that is requesting the content.
- The settings that will be used by jQuery.ajax to request the content.
+ The properties that will be used by jQuery.ajax to request the content.
@@ -217,18 +231,20 @@
Disables all tabs.
-
+
Disables a tab. The selected tab cannot be disabled. To disable more than one tab at once, set the disabled option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).
-
- Which tab to disable.
-
- The zero-based index of the tab to disable.
-
-
- The href of the tab to disable.
-
+
+ The zero-based index of the tab to disable.
+
+
+
+
+ Disables a tab. The selected tab cannot be disabled.
+
+
+ The href of the tab to disable.
@@ -236,37 +252,54 @@
Enables all tabs.
-
+ Enables a tab. To enable more than one tab at once reset the disabled property like: $( "#example" ).tabs( "option", "disabled", [] );.
-
- Which tab to enable.
-
- The zero-based index of the tab to enable.
-
-
- The href of the tab to enable.
-
+
+ The zero-based index of the tab to enable.
+
+
+
+ Enables a tab.
+
+ The href of the tab to enable.
-
- Loads the panel content of a remote tab.
-
- Which tab to load.
-
+
+
+ Loads the panel content of a remote tab.
+ The zero-based index of the tab to load.
-
-
+
+
+
+ Loads the panel content of a remote tab.
+ The href of the tab to load.
-
-
+
+
+ Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the heightStyle option.
+
+
+ Determine which list should be converted to tabs. By default the first descendant list is used.
+
+ Use the list with the class my-tabs or fall back to the default implementation.
+
+
+
+ A simple jQuery UI TabsA string indicating which effect to use for the transition.
- Effect-specific settings and easing.
+ Effect-specific properties and easing.
diff --git a/entries/tooltip.xml b/entries/tooltip.xml
index 766bbdbd..71197e2b 100644
--- a/entries/tooltip.xml
+++ b/entries/tooltip.xml
@@ -1,5 +1,6 @@
-
+Tooltip WidgetCustomizable, themeable tooltips, replacing native tooltips.
@@ -17,6 +18,13 @@
In general, disabled elements do not trigger any DOM events. Therefore, it is not possible to properly control tooltips for disabled elements, since we need to listen to events to determine when to show and hide the tooltip. As a result, jQuery UI does not guarantee any level of support for tooltips attached to disabled elements. Unfortunately, this means that if you require tooltips on disabled elements, you may end up with a mixture of native tooltips and jQuery UI tooltips.
+
Keyboard interaction
+
+
When the tooltip is open and the corresponding item has focus, the following key commands are available:
@@ -51,12 +66,18 @@
A string of HTML to use for the tooltip content.
+
+ A DOM element to use for the tooltip content.
+
+
+ A jQuery object to use for the tooltip content.
+
-
A selector indicating which items should show tooltips. Customize if you're using something other then the title attribute for the tooltip content, or if you need a different selector for event delegation.
+
A selector indicating which items should show tooltips. Customize if you're using something other than the title attribute for the tooltip content, or if you need a different selector for event delegation.
When changing this option, you likely need to also change the content option.
@@ -64,15 +85,15 @@
-
Identifies the position of the tooltip in relation to the associated target element. The of option defaults to the target 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.
+
Identifies the position of the tooltip in relation to the associated target element. The of option defaults to the target 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.
-
+
- A class to add to the widget, can be used to display various tooltip types, like warnings or errors.
-
A class to add to the widget, can be used to display various tooltip types, like warnings or errors.
+
The tooltipClass option has been deprecated in favor of the classes option, using the ui-tooltip property.
@@ -96,6 +117,7 @@
Programmatically open a tooltip. This is only intended to be called for non-delegated tooltips.
+
@@ -125,7 +147,7 @@
- 80
+ 100Create a tooltip on the document, using event delegation for all elements with a title attribute.
-
+Transfer EffectTransfers the outline of an element to another element
Very useful when trying to visualize interaction between two elements.
The transfer element itself has the class ui-effects-transfer, and needs to be styled by you, for example by adding a background or border.
+
This effect is deprecated, replaced by the .transfer() method.
diff --git a/entries/transfer.xml b/entries/transfer.xml
new file mode 100644
index 00000000..c2c408f9
--- /dev/null
+++ b/entries/transfer.xml
@@ -0,0 +1,66 @@
+
+
+ .transfer()
+ Transfers the outline of an element to another element
+
+
Very useful when trying to visualize interaction between two elements.
+
The transfer element itself has the class ui-effects-transfer, and needs to be styled by you, for example by adding a background or border.
+
+ 1.12
+
+
+
+ The target of the transfer effect.
+
+
+ A class to add to the transfer element, in addition to ui-effects-transfer.
+
+
+ A string or number determining how long the animation will run. The strings "fast" and "slow" can be supplied to indicate durations of 200 and 600 milliseconds, respectively. The number type indicates the duration in milliseconds.
+
+
+
+
+ A string indicating which easing function to use for the transition.
+
+
+
+
+
+ 150
+ Clicking on the green element transfers to the other.
+
+
+
+
+]]>
+
+
+
+
diff --git a/entries/uniqueId.xml b/entries/uniqueId.xml
index 3cf76c2f..7cd1e710 100644
--- a/entries/uniqueId.xml
+++ b/entries/uniqueId.xml
@@ -6,7 +6,7 @@
1.9
-
Many widgets need to generate unique ids for elements. .uniqueId() will check if the element has an id, and if not, it will generate one and set it on the element. It is safe to call .uniqueId() on an element without checking if it already has an id. If/when the widget needs to clean up after itself, the .removeUniqueId() method will remove the id from the element if it was added by .uniqueId() and leave the id alone if it was not. .removeUniqueId() is able to be smart about this because the generated ids have a prefix of "ui-id-".
+
Many widgets need to generate unique ids for elements. .uniqueId() will check if the element has an id, and if not, it will generate one and set it on the element. It is safe to call .uniqueId() on an element without checking if it already has an id. If/when the widget needs to clean up after itself, the .removeUniqueId() method will remove the id from the element if it was added by .uniqueId() and leave the id alone if it was not. .removeUniqueId() is able to be smart about this because the generated ids have a prefix of "ui-id-".
diff --git a/entries/zIndex.xml b/entries/zIndex.xml
deleted file mode 100644
index 1c25eb49..00000000
--- a/entries/zIndex.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
- .zIndex()
- Get the z-index for an element.
-
-
-
The .zIndex() method is useful for finding the z-index of an element, regardless of whether the z-index is set directly on the element or on one of its ancestors. In order to determine the z-index, this method will start at the specified element and walk up the DOM until it finds an element that is positioned and has a z-index set. If no such element is found, then the method will return a value of 0.
-
This method assumes that elements with nested z-indexes would not have a z-index of 0. For example, given the following DOM the inner element will be treated as if it does not have a z-index set because it is impossible to differentiate between an explicit value of 0 and no value in Internet Explorer.
Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.
+
diff --git a/includes/classes-option-example.xml b/includes/classes-option-example.xml
new file mode 100644
index 00000000..1f4e392b
--- /dev/null
+++ b/includes/classes-option-example.xml
@@ -0,0 +1,23 @@
+
+
+
+ Initialize the with the classes option specified, changing the theming for the ui- class:
+
+$( ".selector" ).({
+ classes: {
+ "ui-": "highlight"
+ }
+});
+
+
+
+ Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui- class:
+
+// Getter
+var themeClass = $( ".selector" ).( "option", "classes.ui-" );
+
+// Setter
+$( ".selector" ).( "option", "classes.ui-", "highlight" );
+
+
+
diff --git a/includes/widget-method-instance.xml b/includes/widget-method-instance.xml
new file mode 100644
index 00000000..ab7c8177
--- /dev/null
+++ b/includes/widget-method-instance.xml
@@ -0,0 +1,8 @@
+
+
+
+
Retrieves the 's instance object. If the element does not have an associated instance, undefined is returned.
+
+
Unlike other widget methods, instance() is safe to call on any element after the plugin has loaded.
+
+
diff --git a/includes/widget-method-option.xml b/includes/widget-method-option.xml
index b9652f52..f50ef6fc 100644
--- a/includes/widget-method-option.xml
+++ b/includes/widget-method-option.xml
@@ -4,7 +4,10 @@
Sets one or more options for the .
- Gets the value currently associated with the specified optionName.
+
+
Gets the value currently associated with the specified optionName.
+
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.
+ The name of the option to get.
@@ -13,7 +16,10 @@
Gets an object containing key/value pairs representing the current options hash.
- Sets the value of the option associated with the specified optionName.
+
+
Sets the value of the option associated with the specified optionName.
+
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.
+ The name of the option to set.
diff --git a/includes/widget-option-hide.xml b/includes/widget-option-hide.xml
index 94712fc9..5c38a8ca 100644
--- a/includes/widget-option-hide.xml
+++ b/includes/widget-option-hide.xml
@@ -15,7 +15,7 @@
The will be hidden using the specified effect.
- The value can either be the name of a built-in jQuery animation method, such as "slideUp", or the name of a jQuery UI effect, such as "fold".
+ The value can either be the name of a built-in jQuery animation method, such as "slideUp", or the name of a jQuery UI effect, such as "fold".
In either case the effect will be used with the default duration and the default easing.
diff --git a/includes/widget-option-show.xml b/includes/widget-option-show.xml
index 16d2b3c6..c7987948 100644
--- a/includes/widget-option-show.xml
+++ b/includes/widget-option-show.xml
@@ -15,7 +15,7 @@
The will be shown using the specified effect.
- The value can either be the name of a built-in jQuery animation method, such as "slideDown", or the name of a jQuery UI effect, such as "fold".
+ The value can either be the name of a built-in jQuery animation method, such as "slideDown", or the name of a jQuery UI effect, such as "fold".
In either case the effect will be used with the default duration and the default easing.
diff --git a/includes/widget-theming.xml b/includes/widget-theming.xml
index 05491004..f6ecc9a8 100644
--- a/includes/widget-theming.xml
+++ b/includes/widget-theming.xml
@@ -2,5 +2,5 @@
Theming
-
The widget uses the jQuery UI CSS framework to style its look and feel. If specific styling is needed, the following CSS class names can be used:
+
The widget uses the jQuery UI CSS framework to style its look and feel. If specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:
The best way to understand how an easing will affect an animation is to see the equation graphed over time. See below for a graph of all animations available in jQuery UI.
.ui-widget-overlay: Applies 100% width & height dimensions to an overlay screen, along with background color/texture, and screen opacity.
- .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Applies background color/texture, custom corner radius, opacity, top/left offsets and shadow "thickness". Thickness is applied via padding to all sides of a shadow that is set to match the dimensions of the overlay element. Offsets are applied via top and left margins (can be positive or negative).
+ .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Sets box-shadow x & y offset, blur radius and color.
The following is a full list of the icons provided:
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/pages/theming/stacking-elements.md b/pages/theming/stacking-elements.md
index 538ad718..da00a736 100644
--- a/pages/theming/stacking-elements.md
+++ b/pages/theming/stacking-elements.md
@@ -6,40 +6,26 @@
}
}
-Widgets that stack, or move in front of other elements, often present challenges
-when placed into real world pages. It's usually easy to either change the `z-index`
-or parent of the stacked element to avoid any collisions on the page. However,
-jQuery UI needs a generic solution that doesn't require manually playing with
-`z-index` values. This is accomplished via the `ui-front` class, and usually an
-accompanying `appendTo` option on stacking widgets.
+Widgets that stack, or move in front of other elements, often present challenges when placed into real world pages. It's usually easy to either change the `z-index` or the parent of the stacked element to avoid any collisions on the page. However, jQuery UI needs a generic solution that doesn't require manually playing with `z-index` values. This is accomplished via the `ui-front` class, and usually an accompanying `appendTo` option on stacking widgets.
## The `ui-front` class
-The `ui-front` class is very basic. It just sets a static `z-index` value on the
-element. However, the existence of the class is used to indicate where stacking
-elements should be appended. This allows us to take advantage of nested stacking
-contexts, resulting in a default DOM position that works for most use cases.
+The `ui-front` class is very basic. It just sets a static `z-index` value on the element. However, the existence of the class is used to indicate that an element is a stacking element, which indicates where additional stacking elements should be appended. This allows us to take advantage of nested stacking contexts, resulting in a default DOM position that works for most use cases.
-*Note: When using `ui-front`, you must also set `position` to `relative`,
-`absolute` or `fixed` in order for the `z-index` to be applied.*
+*Note: When using `ui-front`, you must also set `position` to `relative`, `absolute` or `fixed` in order for the `z-index` to be applied.*
## The stacking technique
-Any widget that appends a stacking element to the page must use the `ui-front`
-class, and in many cases should have an `appendTo` option. The following logic
-should be applied to the stacking element:
-
-* If a value is provided for the `appendTo` option, then append the stacking
-element to the specified element.
-* If the `appendTo` option is set to `null` (default), then the widget should
-walk up the DOM from the associated element. For example, when the autocomplete
-menu is appended to the DOM, the walking starts from the associated input element.
- * If an element with the `ui-front` class is found, append to that element.
- * If no element with the `ui-front` class is found, append to the body.
-* The stacking element must also have `position` set to `relative`, `absolute`,
-or `fixed` in order for the `z-index` from the `ui-front` class to be applied.
-Using [.position()](/position/) will automatically set `position`.
+Any widget that appends a stacking element to the page must use the `ui-front` class, and in many cases should have an `appendTo` option. The following logic should be applied to the stacking element:
+
+* If a value is provided for the `appendTo` option, then append the stacking element to the specified element.
+* If the `appendTo` option is set to `null` (default), then the widget should walk up the DOM from the associated element. For example, when the autocomplete menu is appended to the DOM, the walking starts from the associated input element.
+ * If another stacking element is found, append to that element.
+ * If no other stacking elements are found, append to the body.
+* The stacking element must also have `position` set to `relative`, `absolute`, or `fixed` in order for the `z-index` from the `ui-front` class to be applied. Using [.position()](/position/) will automatically set `position`.
+
+Stacking elements are defined as elements with the `ui-front` class, or any native element that creates a new stacking context. Currently, `