+
• ui-accordion: The outer container of the accordion.
+
• ui-accordion-header: The headers of the accordion.
+
• ui-accordion-content: The content panels the accordion.
+
• ui-accordion-icons: Accordion headers that have icons.
+

Dependencies

• UI Core
diff --git a/entries/dialog.xml b/entries/dialog.xml index 4a1c8c8b..a1137f6f 100644 --- a/entries/dialog.xml +++ b/entries/dialog.xml @@ -51,9 +51,7 @@ }); -

Theming

- -

The dialog widget uses the jQuery UI CSS framework to style its look and feel. If dialog specific styling is needed, the following is a list of CSS class names that the dialog widget uses:

+
• ui-dialog: The outer container of the dialog.
diff --git a/includes/widget-theming.xml b/includes/widget-theming.xml new file mode 100644 index 00000000..05491004 --- /dev/null +++ b/includes/widget-theming.xml @@ -0,0 +1,6 @@ + +
+
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:
+
From cbb8b8076e53cfb73719380f62cda48790763a75 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Wed, 29 May 2013 23:19:21 -0400 Subject: [PATCH 03/19] Switching to a nested structure. --- entries/accordion.xml | 11 +++++++---- entries/dialog.xml | 26 +++++++++++++++++++------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/entries/accordion.xml b/entries/accordion.xml index fe6f5eaa..d15c5281 100644 --- a/entries/accordion.xml +++ b/entries/accordion.xml @@ -36,10 +36,13 @@
-
• ui-accordion: The outer container of the accordion.
-
• ui-accordion-header: The headers of the accordion.
-
• ui-accordion-content: The content panels the accordion.
-
• ui-accordion-icons: Accordion headers that have icons.
+
• + 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 the accordion.
  +
  +

Dependencies

diff --git a/entries/dialog.xml b/entries/dialog.xml index a1137f6f..7f3ab401 100644 --- a/entries/dialog.xml +++ b/entries/dialog.xml @@ -54,13 +54,25 @@
-
• ui-dialog: The outer container of the dialog.
-
• ui-dialog-titlebar: The title bar containing the dialog's title and close button.
-
• ui-dialog-title: The container around the textual title of the dialog.
-
• ui-dialog-titlebar-close: The dialog's close button.
-
• ui-dialog-content: The container around the dialog's content.
-
• ui-dialog-buttonpane: The pane that contains the dialog's buttons. This will only be present if the buttons option is set.
-
• ui-dialog-buttonset: The container around the buttons themselves.
+
• + ui-dialog: The outer container of the dialog. +
  +
  • + ui-dialog-titlebar: The title bar containing the dialog's title and close button. +
    +
    • ui-dialog-title: The container around the textual title of the dialog.
    +
    • ui-dialog-titlebar-close: The dialog's close button.
    +
    +
  +
  • ui-dialog-content: The container around the dialog's content.
  +
  • + ui-dialog-buttonpane: The pane that contains the dialog's buttons. This will only be present if the buttons option is set. +
    +
    • ui-dialog-buttonset: The container around the buttons themselves.
    +
    +
  +
  +

Dependencies

From cc5e32ae9e3bb5a87d25c1c241b8e00807efc407 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Wed, 29 May 2013 23:19:34 -0400 Subject: [PATCH 04/19] Adding autocomplete specific theming. --- entries/autocomplete.xml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/entries/autocomplete.xml b/entries/autocomplete.xml index 53496ed4..0b11f6ca 100644 --- a/entries/autocomplete.xml +++ b/entries/autocomplete.xml @@ -26,6 +26,13 @@
• UP/DOWN - Open the menu, if the minLength has been met.
+ + +
+
• ui-autocomplete: The menu used to display matches to the user.
+
• ui-autocomplete-input: The autocomplete's input element.
+
+

Dependencies

• UI Core
From 0ed461ac4d080befc35ae4c54d709955620f4146 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 30 May 2013 21:43:29 -0400 Subject: [PATCH 05/19] Button: Adding theming docs. --- entries/button.xml | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/entries/button.xml b/entries/button.xml index 7b8bc950..b46d7749 100644 --- a/entries/button.xml +++ b/entries/button.xml @@ -11,6 +11,28 @@

When using an input of type button, submit or reset, support is limited to plain text labels with no icons.

+ + +
+
• + 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-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-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-buttonset: The outer container of Buttonsets. +
+
+

Dependencies

• UI Core
From 08b013798131d107063b2cf73a0b95164bb2584e Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sat, 1 Jun 2013 22:23:06 -0400 Subject: [PATCH 06/19] Datepicker: Theming docs --- entries/datepicker.xml | 51 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/entries/datepicker.xml b/entries/datepicker.xml index 5df4d7df..72acf3c4 100644 --- a/entries/datepicker.xml +++ b/entries/datepicker.xml @@ -181,6 +181,57 @@

And can then override an individual datepicker for a specific locale:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] ); + + +
+
• + ui-datepicker: The outer container of the datepicker. If the datepicker is inline, this element will additionally have a ui-datepicker-inline class. If the isRTL option is set, this element will additionally have a class of ui-datepicker-rtl. +
  +
  • + ui-datepicker-header: The container for the datepicker's header. +
    +
    • ui-datepicker-prev: The control used to select previous months.
    +
    • ui-datepicker-next: The control used to select subsequent months.
    +
    • + ui-datepicker-title: The container for the datepicker's title containing the month and year. +
      +
      • ui-datepicker-month: The textual display of the month or a <select> element if the changeMonth option is set.
      +
      • ui-datepicker-year: The textual display of the year or a <select> element if the changeYear option is set.
      +
      +
    +
    +
  +
  • + ui-datepicker-calendar: The table that contains the calendar itself. +
    +
    • ui-datepicker-week-end: Cells containing weekend days.
    +
    • ui-datepicker-other-month: Cells containing days that occur in a month other than the currently selected month.
    +
    • ui-datepicker-unselectable: Cells containing days that are not selectable by the user.
    +
    • ui-datepicker-current-day: The cell containing the selected day.
    +
    • ui-datepicker-today: The cell containing today's date.
    +
    +
  +
  • + ui-datepicker-buttonpane: The buttonpane that is used when the showButtonPanel option is set. +
    +
    • ui-datepicker-current: The button used to select today's date.
    +
    +
  +
  +
+
+ +

If the numberOfMonths option is used to display multiple months at once, a number of additional classes are used:

+ +
+
• + ui-datepicker-multi: The outermost container of a multiple month datepicker. This element can additionally have a ui-datepicker-multi-2, ui-datepicker-multi-3, or ui-datepicker-multi-4 class name depending on the number of months to display. +
  +
  • ui-datepicker-group: Individual pickers within the group. This element will additionally have a ui-datepicker-group-first, ui-datepicker-group-middle, or ui-datepicker-group-last class name depending on its position within the group.
  +
  +
+
+

Dependencies

• UI Core
From 87d4963c96be3bb4b721f334083fc69936820774 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sat, 1 Jun 2013 23:39:35 -0400 Subject: [PATCH 07/19] Menu: Documenting how to create dividers. --- entries/menu.xml | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/entries/menu.xml b/entries/menu.xml index 89734678..8f3958f5 100644 --- a/entries/menu.xml +++ b/entries/menu.xml @@ -29,6 +29,8 @@

Any menu item can be disabled by adding the ui-state-disabled class to that element.

+

Icons

+

To add icons to the menu, include them in the markup:

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:

+ +
+

Keyboard interaction

From dc25c45e000f717fb0300a0441fe513213853a7b Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sat, 1 Jun 2013 23:40:01 -0400 Subject: [PATCH 08/19] Menu: Adding theming docs. --- entries/menu.xml | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/entries/menu.xml b/entries/menu.xml index 8f3958f5..704ef180 100644 --- a/entries/menu.xml +++ b/entries/menu.xml @@ -67,6 +67,23 @@

Disabled items can receive keyboard focus, but do not allow any other interaction.

+ + +
+
• + 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-item: The container for individual menu items. +
    +
    • ui-menu-icon: The submenu icons set via the icons option.
    +
    +
  +
  • ui-menu-divider: Divider elements between menu items.
  +
  +
+
+

Dependencies

• UI Core
From fb040890e528ed0ac203feb42f1526f8500954d5 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 2 Jun 2013 12:19:01 -0400 Subject: [PATCH 09/19] Progressbar: Theming docs. --- entries/progressbar.xml | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/entries/progressbar.xml b/entries/progressbar.xml index 186de3fb..6db160a3 100644 --- a/entries/progressbar.xml +++ b/entries/progressbar.xml @@ -10,6 +10,22 @@ A determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process — if the actual status cannot be calculated, an indeterminate progress bar should be used to provide user feedback.
+ + +
+
• + ui-progressbar: The outer container of the progressbar. This element will additionally have a class of ui-progressbar-indeterminate for indeterminate progressbars. +
  +
  • + ui-progressbar-value: The element that represents the filled portion of the progressbar. +
    +
    • ui-progressbar-overlay: Overlay used to display an animation for indeterminate progressbars.
    +
    +
  +
  +
+
+

Dependencies

• UI Core
From d0f362fceb2c06cd73fd3da88220cd9edb3ce23c Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 2 Jun 2013 20:07:20 -0400 Subject: [PATCH 10/19] Slider: Theming docs. --- entries/slider.xml | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/entries/slider.xml b/entries/slider.xml index 7755ebf9..56bcc570 100644 --- a/entries/slider.xml +++ b/entries/slider.xml @@ -7,6 +7,18 @@

The slider widget will create handle elements with the class ui-slider-handle on initialization. You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization. It will only create the number of handles needed to match the length of value/values. For example, if you specify values: [ 1, 5, 18 ] and create one custom handle, the plugin will create the other two.

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

Dependencies

• UI Core
From 1c492b2687132cf4f5ffbe5ba154bc58c23c32e6 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 2 Jun 2013 21:24:39 -0400 Subject: [PATCH 11/19] Spinner: Theming docs. --- entries/spinner.xml | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/entries/spinner.xml b/entries/spinner.xml index bccb67a5..05a8b7b6 100644 --- a/entries/spinner.xml +++ b/entries/spinner.xml @@ -20,6 +20,18 @@

Focus stays in the text field, even after using the mouse to click one of the spin buttons.

+ + +
+
• + ui-spinner: The outer container of the spinner. +
  +
  • ui-spinner-input: The <input> element that displays the value of the spinner.
  +
  • ui-spinner-button: The button controls used to increment and decrement the spinner's value. The up button will additionally have a ui-spinner-up class and the down button will additionally have a ui-spinner-down class.
  +
  +
+
+

Dependencies

• UI Core
From 66e3459d3bf607db5f8ffa46777b863babb15970 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 2 Jun 2013 22:13:44 -0400 Subject: [PATCH 12/19] Tabs: Theming docs --- entries/tabs.xml | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/entries/tabs.xml b/entries/tabs.xml index 5a346742..1fd0f551 100644 --- a/entries/tabs.xml +++ b/entries/tabs.xml @@ -28,6 +28,27 @@
• ALT+PAGE DOWN: Move focus to the next tab and immediately activate.
+ + +
+
• + ui-tabs: The outer container of the tabs. This element will additionally have a class of ui-tabs-collapsible when the collapsible option is set. +
  +
  • + ui-tabs-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-anchor: The anchors used to switch panels.
      +
      +
    +
    +
  +
  • ui-tabs-panel: The panels associated with the tabs. Only the panel whose corresponding tab is active will be visible.
  +
  +
+
+

Dependencies

• UI Core
From 1fe6736342f9d635dcb59cde27af32683aafc6a4 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 2 Jun 2013 22:22:12 -0400 Subject: [PATCH 13/19] Tooltip: Theming docs. --- entries/tooltip.xml | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/entries/tooltip.xml b/entries/tooltip.xml index 3f6b1941..766bbdbd 100644 --- a/entries/tooltip.xml +++ b/entries/tooltip.xml @@ -17,6 +17,17 @@

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.

+ + +
+
• + ui-tooltip: The outer container for the tooltip. +
  +
  • ui-tooltip-content: The content of the tooltip.
  +
  +
+
+

Dependencies

• UI Core
From 85361a21e57b103735577464ba2dd4b5e78e3dcd Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 2 Jun 2013 22:26:02 -0400 Subject: [PATCH 14/19] Minor consistency changes. --- entries/accordion.xml | 2 +- entries/autocomplete.xml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/entries/accordion.xml b/entries/accordion.xml index d15c5281..4cf69ca4 100644 --- a/entries/accordion.xml +++ b/entries/accordion.xml @@ -39,7 +39,7 @@
• 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-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 the accordion.
diff --git a/entries/autocomplete.xml b/entries/autocomplete.xml index 0b11f6ca..1a3cdc32 100644 --- a/entries/autocomplete.xml +++ b/entries/autocomplete.xml @@ -30,7 +30,7 @@
• ui-autocomplete: The menu used to display matches to the user.
-
• ui-autocomplete-input: The autocomplete's input element.
+
• ui-autocomplete-input: The autocomplete's <input> element.

Dependencies

From 9493a34a58ccfef0e954048ed56333534bca154e Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Tue, 4 Jun 2013 22:06:25 -0400 Subject: [PATCH 15/19] Link to menu's theming section from autocomplete's. --- entries/autocomplete.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/entries/autocomplete.xml b/entries/autocomplete.xml index 1a3cdc32..066a6528 100644 --- a/entries/autocomplete.xml +++ b/entries/autocomplete.xml @@ -29,7 +29,7 @@
-
• ui-autocomplete: The menu used to display matches to the user.
+
• ui-autocomplete: The menu used to display matches to the user.
• ui-autocomplete-input: The autocomplete's <input> element.
From f65b2de3b6160d981c0bc4edbad3d7b6ee571e9f Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Tue, 4 Jun 2013 22:22:54 -0400 Subject: [PATCH 16/19] Clarifying that autocompletes don't have to be created on elements. --- entries/autocomplete.xml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/entries/autocomplete.xml b/entries/autocomplete.xml index 066a6528..bbaa8e60 100644 --- a/entries/autocomplete.xml +++ b/entries/autocomplete.xml @@ -3,6 +3,8 @@ Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. +

Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.

+

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to choose previously selected values, such as entering tags for articles or entering email addresses from an address book. Autocomplete can also be used to populate associated information, such as entering a city name and getting the zip code.

@@ -30,7 +32,7 @@
• ui-autocomplete: The menu used to display matches to the user.
-
• ui-autocomplete-input: The autocomplete's <input> element.
+
• ui-autocomplete-input: The autocomplete's input element.

Dependencies

From d424e10f6fe6c81b85fee19f98a82a0c8190c891 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Tue, 4 Jun 2013 22:30:17 -0400 Subject: [PATCH 17/19] Menu: Use a hyphen in the divider example. --- entries/menu.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/entries/menu.xml b/entries/menu.xml index 704ef180..9109d0b8 100644 --- a/entries/menu.xml +++ b/entries/menu.xml @@ -47,7 +47,7 @@
From e164283c9b7e76ee5d484e719a61d01dfeceb148 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Tue, 4 Jun 2013 22:40:02 -0400 Subject: [PATCH 18/19] Dialog: Noting ui-widget-overlay. --- entries/dialog.xml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/entries/dialog.xml b/entries/dialog.xml index 7f3ab401..7828e195 100644 --- a/entries/dialog.xml +++ b/entries/dialog.xml @@ -75,6 +75,8 @@
+

Additionally, when the modal option is set, an element with a ui-widget-overlay class name is appended to the <body>.

+

Dependencies

• UI Core
From 9517b6823d9d9af1717227dc98f23258b6dc5b44 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Tue, 4 Jun 2013 23:00:53 -0400 Subject: [PATCH 19/19] Note which element is the "main" element for non-straightforward widgets. --- entries/autocomplete.xml | 2 +- entries/dialog.xml | 2 +- entries/spinner.xml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/entries/autocomplete.xml b/entries/autocomplete.xml index bbaa8e60..c179f4be 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 autocomplete's input element.
+
• ui-autocomplete-input: The input element that the Autocomplete widget was instantiated with.

Dependencies

diff --git a/entries/dialog.xml b/entries/dialog.xml index 7828e195..b976d623 100644 --- a/entries/dialog.xml +++ b/entries/dialog.xml @@ -64,7 +64,7 @@
• ui-dialog-titlebar-close: The dialog's close button.
-
• ui-dialog-content: The container around the dialog's content.
+
• ui-dialog-content: The container around the dialog's content. This is also the element the widget was instantiated with.
• ui-dialog-buttonpane: The pane that contains the dialog's buttons. This will only be present if the buttons option is set.
  diff --git a/entries/spinner.xml b/entries/spinner.xml index 05a8b7b6..1630a037 100644 --- a/entries/spinner.xml +++ b/entries/spinner.xml @@ -26,7 +26,7 @@
  • ui-spinner: The outer container of the spinner.
    -
    • ui-spinner-input: The <input> element that displays the value of the spinner.
    +
    • ui-spinner-input: The <input> element that the Spinner widget was instantiated with.
    • ui-spinner-button: The button controls used to increment and decrement the spinner's value. The up button will additionally have a ui-spinner-up class and the down button will additionally have a ui-spinner-down class.