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 0ce8dbbe..00bff67d 100644 --- a/entries/button.xml +++ b/entries/button.xml @@ -39,6 +39,13 @@ 1.8 + + { + "ui-button": "ui-corner-all", +} + + + diff --git a/entries/dialog.xml b/entries/dialog.xml index 888cfe22..2256ce02 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,7 +141,7 @@ 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. diff --git a/entries/draggable.xml b/entries/draggable.xml index 324f82e4..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. diff --git a/entries/droppable.xml b/entries/droppable.xml index 4e43fbd4..08476d0c 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,17 +29,21 @@ 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 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. diff --git a/entries/jQuery.widget.xml b/entries/jQuery.widget.xml index 402fc048..8a5ecc31 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/menu.xml b/entries/menu.xml index b1ecd4cc..d5a19ea0 100644 --- a/entries/menu.xml +++ b/entries/menu.xml @@ -90,13 +90,13 @@
    • - 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-item-wrapper: The wrapper element inside each individual menu item. + 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.
          @@ -118,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")
          -
          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 e5f62565..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,6 +72,13 @@ 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. diff --git a/entries/selectable.xml b/entries/selectable.xml index e569d0e1..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,6 +36,10 @@ 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. diff --git a/entries/selectmenu.xml b/entries/selectmenu.xml index b792e3b1..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", +} + + + diff --git a/entries/slider.xml b/entries/slider.xml index 8c14039b..fe2e2dc9 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. diff --git a/entries/sortable.xml b/entries/sortable.xml index 7bb0c6ee..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. 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 250ebda7..0aefde02 100644 --- a/entries/tooltip.xml +++ b/entries/tooltip.xml @@ -40,6 +40,13 @@ 1.9 + + { + "ui-tooltip": "ui-corner-all ui-widget-shadow" +} + + +

                    The content of the tooltip.

                    @@ -76,7 +83,7 @@ - + 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.

                    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: