Icons to use for headers, matching an icon provided by the jQuery UI CSS Framework. Set to false to have no icons displayed.

diff --git a/entries/autocomplete.xml b/entries/autocomplete.xml index 34cdeb84..085e8d98 100644 --- a/entries/autocomplete.xml +++ b/entries/autocomplete.xml @@ -32,7 +32,7 @@
• ui-autocomplete: The menu used to display matches to the user.
-
• ui-autocomplete-input: The input element that the Autocomplete widget was instantiated with.
+
• ui-autocomplete-input: The input element that the autocomplete widget was instantiated with. While requesting data to display to the user, the ui-autocomplete-loading class is also added to this element.

Dependencies

@@ -55,6 +55,10 @@ If set to true the first item will automatically be focused when the menu is shown. + + + + The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive. diff --git a/entries/button.xml b/entries/button.xml index f25e63d0..9f8dcd1c 100644 --- a/entries/button.xml +++ b/entries/button.xml @@ -5,26 +5,21 @@

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, you can use the Buttonset widget, which provides visual groupings of buttons.

-

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".
@@ -32,22 +27,34 @@

Dependencies

-
• UI Core
+
• jQuery.ui.keyCode
• Widget Factory
- 1.8 + 1.8, rewritten: 1.12 + + { + "ui-button": "ui-corner-all", +} + + + - + -

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.

+ + @@ -56,8 +63,8 @@ - - 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. @@ -69,7 +76,7 @@ - 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. diff --git a/entries/buttonset.xml b/entries/buttonset.xml index 69eefdf3..2de178c1 100644 --- a/entries/buttonset.xml +++ b/entries/buttonset.xml @@ -1,8 +1,10 @@ - + 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.
diff --git a/entries/checkboxradio.xml b/entries/checkboxradio.xml new file mode 100644 index 00000000..5e6aef42 --- /dev/null +++ b/entries/checkboxradio.xml @@ -0,0 +1,89 @@ + + + + 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. +
  +
  +
+ +
+ +

Dependencies

+
+
• .labels()
+
• Form Reset Mixin
+
• Widget Factory
+
+ + + 1.12 + + + { + "ui-checkboxradio-label": "ui-corner-all", + "ui-checkboxradio-icon": "ui-corner-all" +} + + + + + + Whether to show the checkbox or radio icon, depending on the input's type. + + + + Text 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..5f48ce72 --- /dev/null +++ b/entries/controlgroup.xml @@ -0,0 +1,102 @@ + + + + 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. +
  +
  +
+ +
+ +

Dependencies

+
+
• Widget Factory
+
+ + + 1.12 + + + + + + + +

By default, controlgroup displays its widget's 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, the controlgroup will, in effect, 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 behaviour: +
+
• 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 @@ + + + + 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/dialog.xml b/entries/dialog.xml index 888cfe22..85acaf05 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. @@ -125,6 +125,14 @@ 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. + + { + "ui-dialog": "ui-corner-all", + "ui-dialog-titlebar": "ui-corner-all", +} + + + Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key. @@ -133,8 +141,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.

    + diff --git a/entries/draggable.xml b/entries/draggable.xml index 445e6a12..62a0e19d 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.
    +
    +

    Dependencies

    • UI Core
    @@ -41,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. @@ -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.12 Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element. + 1.12 Distance 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. 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.
    +
    +

    Dependencies

    • UI Core
    @@ -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/focus.xml b/entries/focus.xml deleted file mode 100644 index f91bc43c..00000000 --- a/entries/focus.xml +++ /dev/null @@ -1,20 +0,0 @@ - - - - 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. - - - - -

    This method is deprecated. Use .focus() without arguments inside a timeout or $.Widget's ._delay() method.

    - - - - - 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 @@ + + + + + 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 + + + + + + + + diff --git a/entries/jQuery.effects.clipToBox.xml b/entries/jQuery.effects.clipToBox.xml new file mode 100644 index 00000000..0300186e --- /dev/null +++ b/entries/jQuery.effects.clipToBox.xml @@ -0,0 +1,17 @@ + + + + + + + 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 @@ + + + + + + + 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 @@ + + + + + + + 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 @@ + + + + + + + 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 @@ + + + + + + + The element to restore styles for. + + + Restores all inline styles for an element. + +

    Restores all inline styles for an element which have been saved using jQuery.effects.saveStyle().

    + + + + + 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 @@ + + + + + + + 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 @@ + + + + + + + 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.

    + + + + + diff --git a/entries/jQuery.widget.xml b/entries/jQuery.widget.xml index 7b22f7da..1e77f2a8 100644 --- a/entries/jQuery.widget.xml +++ b/entries/jQuery.widget.xml @@ -192,6 +192,38 @@ + + +

    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. 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 @@ + + + + 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 + + + + + + + diff --git a/entries/menu.xml b/entries/menu.xml index 681b7354..d5a19ea0 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:

    @@ -35,20 +48,26 @@

    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:

    @@ -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.
      @@ -94,13 +118,17 @@ 1.9 + + + + - + + { + submenu: "ui-icon-carat-1-e" +} Icons to use for submenus, matching an icon provided by the jQuery UI CSS Framework. -
      -
      • submenu (string, default: "ui-icon-carat-1-e")
      -
      @@ -167,7 +195,7 @@ - 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(); ]]> diff --git a/entries/mouse.xml b/entries/mouse.xml index da6fa503..6b41a777 100644 --- a/entries/mouse.xml +++ b/entries/mouse.xml @@ -15,9 +15,11 @@ Prevents interactions from starting on specified elements. + 1.12 Time in milliseconds after mousedown until the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element. + 1.12 Distance 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. diff --git a/entries/position.xml b/entries/position.xml index 97ca5307..cc86dbe9 100644 --- a/entries/position.xml +++ b/entries/position.xml @@ -8,8 +8,8 @@

      This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.

      - 1.8 + 1.8 Defines 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. diff --git a/entries/progressbar.xml b/entries/progressbar.xml index 39452160..af42178e 100644 --- a/entries/progressbar.xml +++ b/entries/progressbar.xml @@ -14,7 +14,7 @@
      • - 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 + + { + "ui-progressbar": "ui-corner-all", + "ui-progressbar-complete": "ui-corner-right", + "ui-progressbar-value": "ui-corner-left" +} + + + The maximum value of the progressbar. diff --git a/entries/resizable.xml b/entries/resizable.xml index 4c4f1662..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.
          +
          +

          Dependencies

          • UI Core
          @@ -63,11 +72,20 @@ Possible values: "parent" and "document". + + { + "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se" +} + + + + 1.12 Tolerance, 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.12 Tolerance, 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. 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.
          +
          +

          Dependencies

          • UI Core
          @@ -24,11 +36,17 @@ Prevents selecting if you start on elements matching the selector. + + + + + 1.12 Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element. + 1.12 Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance. diff --git a/entries/selectmenu.xml b/entries/selectmenu.xml index 95f2903b..4d6972f0 100644 --- a/entries/selectmenu.xml +++ b/entries/selectmenu.xml @@ -33,6 +33,33 @@
          • 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-space: A supporting element between the text and the icon of 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.
            +
            +
          + +
          + +

          Dependencies

          +
          +
          • UI Core
          +
          • Widget Factory
          +
          • Position
          +
          • Menu
          +
          1.11 @@ -40,6 +67,14 @@ 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", +} + + + @@ -52,9 +87,10 @@ 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. + @@ -203,6 +239,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. + 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 @@ Resize 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/slider.xml b/entries/slider.xml index 8c14039b..3a2038d7 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.
          @@ -41,6 +41,15 @@ The duration of the animation, in milliseconds. + + { + "ui-slider": "ui-corner-all", + "ui-slider-handle": "ui-corner-all", + "ui-slider-range": "ui-corner-all ui-widget-header" +} + + + The maximum value of the slider. @@ -79,6 +88,9 @@ The jQuery object representing the handle being moved. + + The numeric index of the handle being moved. + The current value of the slider. @@ -91,6 +103,9 @@ The jQuery object 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. @@ -106,6 +121,9 @@ The jQuery object representing the handle that was changed. + + The numeric index of the handle that was moved. + The current value of the slider. @@ -118,6 +136,9 @@ The jQuery object 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..511c84a1 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.
          +
          +

          Dependencies

          • UI Core
          @@ -36,6 +49,10 @@ 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.12 Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element. + 1.12 Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle. diff --git a/entries/spinner.xml b/entries/spinner.xml index 71ac8504..bfe6ed2b 100644 --- a/entries/spinner.xml +++ b/entries/spinner.xml @@ -49,6 +49,15 @@ 1.9 + + { + "ui-spinner": "ui-corner-all", + "ui-spinner-down": "ui-corner-br", + "ui-spinner-up": "ui-corner-tr" +} + + + 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. diff --git a/entries/tabs.xml b/entries/tabs.xml index ee76e770..5e7deb60 100644 --- a/entries/tabs.xml +++ b/entries/tabs.xml @@ -63,12 +63,12 @@
          • - 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. + + { + "ui-tabs": "ui-corner-all", + "ui-tabs-nav": "ui-corner-all", + "ui-tabs-tab": "ui-corner-top", + "ui-tabs-panel": "ui-corner-bottom" +} + + + When set to true, the active panel can be closed. diff --git a/entries/tooltip.xml b/entries/tooltip.xml index 50335b89..a117fc11 100644 --- a/entries/tooltip.xml +++ b/entries/tooltip.xml @@ -47,6 +47,13 @@ 1.9 + + { + "ui-tooltip": "ui-corner-all ui-widget-shadow" +} + + +

                The content of the tooltip.

                @@ -59,6 +66,12 @@ 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. + @@ -77,10 +90,10 @@ - + - A class to add to the widget, can be used to display various tooltip types, like warnings or errors. -

                This may get replaced by the classes option.

                +

                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.

                diff --git a/entries/transfer-effect.xml b/entries/transfer-effect.xml index 2821da94..51781355 100644 --- a/entries/transfer-effect.xml +++ b/entries/transfer-effect.xml @@ -1,10 +1,11 @@ - + 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.

                +

                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 @@ + + + + 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/includes/animation-signature-options.xml b/includes/animation-signature-options.xml index 88859783..90d54795 100644 --- a/includes/animation-signature-options.xml +++ b/includes/animation-signature-options.xml @@ -23,7 +23,7 @@ - A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. + A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. A string can also be provided, in which case the animation is added to the queue represented by that string. diff --git a/includes/class-animation-argument-options.xml b/includes/class-animation-argument-options.xml index ca0da0ee..a3cb3926 100644 --- a/includes/class-animation-argument-options.xml +++ b/includes/class-animation-argument-options.xml @@ -22,6 +22,6 @@ - A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. + A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. A string can also be provided, in which case the animation is added to the queue represented by that string. diff --git a/includes/classes-option-desc.xml b/includes/classes-option-desc.xml new file mode 100644 index 00000000..78662b0b --- /dev/null +++ b/includes/classes-option-desc.xml @@ -0,0 +1,4 @@ + + +

                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:

                diff --git a/pages/theming/css-framework.html b/pages/theming/css-framework.html index 102293bc..12cdaa6f 100644 --- a/pages/theming/css-framework.html +++ b/pages/theming/css-framework.html @@ -114,6 +114,6 @@

                Overlay & Shadow

                .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.
              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, `
              ` is the only native element that is considered a stacking element.