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/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..3c032078
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18
diff --git a/Gruntfile.js b/Gruntfile.js
index 15d01b05..fa66dfde 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -22,7 +22,12 @@ grunt.initConfig({
all: "resources/**"
},
wordpress: (function() {
- var config = require( "./config" );
+
+ // 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;
})()
diff --git a/categories.xml b/categories.xml
index c0ed6b44..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.
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.
@@ -78,7 +83,7 @@
Name of easing to use with default duration.
- Animation settings with easing and duration properties.
+ An object containing easing and duration properties to configure animations.
Can also contain a down property with any of the above options.
"Down" animations occur when the panel being activated has a lower index than the currently active panel.
@@ -86,6 +91,15 @@
+
@@ -93,10 +107,28 @@
-
-
- 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.
@@ -405,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.
@@ -458,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.
+
@@ -471,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 888cfe22..d1fec480 100644
--- a/entries/dialog.xml
+++ b/entries/dialog.xml
@@ -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.
@@ -105,9 +105,7 @@
[
{
text: "Ok",
- icons: {
- primary: "ui-icon-heart"
- },
+ icon: "ui-icon-heart",
click: function() {
$( this ).dialog( "close" );
}
@@ -122,9 +120,17 @@
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. In addition, a key of icons can be used to control button's icons option, and a key of showText can be used to control button's text option.
+ 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.
@@ -133,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.
+
@@ -187,6 +196,12 @@
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.
diff --git a/entries/draggable.xml b/entries/draggable.xml
index 9c690d05..f3a30395 100644
--- a/entries/draggable.xml
+++ b/entries/draggable.xml
@@ -5,6 +5,13 @@
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.
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.
@@ -66,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.
@@ -86,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.
@@ -123,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.
@@ -174,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.
diff --git a/entries/droppable.xml b/entries/droppable.xml
index 4e43fbd4..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.
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.
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:
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.
+
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.
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" );
+
+
+
+
@@ -200,6 +232,109 @@
+
+
+ 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.
@@ -296,7 +431,7 @@ _setOptions: function( options ) {
]]>
- 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.
@@ -341,7 +476,7 @@ _setOption: function( key, value ) {
- 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.
@@ -508,7 +643,7 @@ this._on( this.element, {
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.
@@ -532,7 +667,7 @@ this._show( this.element, this.options.show, function() {
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.
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 681b7354..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. 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:
-
Item 1
-
Item 2
-
Item 3
+
+
Item 1
+
+
+
Item 2
+
+
+
Item 3
-
Item 3-1
-
Item 3-2
-
Item 3-3
-
Item 3-4
-
Item 3-5
+
+
Item 3-1
+
+
+
Item 3-2
+
+
+
Item 3-3
+
-
Item 4
-
Item 5
+
+
Item 4
+
+
+
Item 5
+
]]>
@@ -35,20 +48,26 @@
-
Save
+
+
Save
+
]]>
Menu automatically adds the necessary padding to items without icons.
Dividers
-
Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes:
+
Divider elements can be created by including menu items that contain only spaces and/or dashes:
-
Item 1
+
+
Item 1
+
-
-
Item 2
+
+
Item 2
+
]]>
@@ -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.
@@ -165,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.
@@ -318,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.
diff --git a/entries/resizable.xml b/entries/resizable.xml
index a7f1a9bf..b69f99dc 100644
--- a/entries/resizable.xml
+++ b/entries/resizable.xml
@@ -5,6 +5,15 @@
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.
diff --git a/entries/selectable.xml b/entries/selectable.xml
index 11ba0967..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.
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" );
+
+
+
+
+
@@ -50,11 +107,12 @@
- 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.
+ 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.
+
+ 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.
+
@@ -126,7 +184,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.
+
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.
@@ -190,7 +248,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" );
}
]]>
@@ -203,6 +261,46 @@ _renderMenu: function( ul, items ) {
_resizeMenu: function() {
this.menu.outerWidth( 500 );
}
+]]>
+
+
+
+
+
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;
+}
]]>
@@ -228,6 +326,7 @@ $( "#speed" ).selectmenu();
]]>
+ 270A simple jQuery UI Selectmenu with optgroups
+ 270A jQuery UI Selectmenu with overflowA 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 8c14039b..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.
diff --git a/entries/sortable.xml b/entries/sortable.xml
index 12dae5f2..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.
diff --git a/entries/spinner.xml b/entries/spinner.xml
index 71ac8504..c5fa0a9e 100644
--- a/entries/spinner.xml
+++ b/entries/spinner.xml
@@ -5,10 +5,14 @@
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.
+
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.
- 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.
@@ -101,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().
@@ -186,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.
diff --git a/entries/toggle.xml b/entries/toggle.xml
index 393cb637..51acdebf 100644
--- a/entries/toggle.xml
+++ b/entries/toggle.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/tooltip.xml b/entries/tooltip.xml
index 0df72c93..71197e2b 100644
--- a/entries/tooltip.xml
+++ b/entries/tooltip.xml
@@ -18,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:
@@ -52,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.
@@ -70,10 +90,10 @@
-
+
- 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.
@@ -127,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/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-theming.xml b/includes/widget-theming.xml
index 79812e92..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, `