Skip to content

Theming Section for Individual Widgets #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 20 commits into from
Closed

Theming Section for Individual Widgets #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
c046350
Dialog: Theming section
tjvantoll May 26, 2013
6fd8b57
Adding accordion and moving the descriptions to a shared location.
tjvantoll May 26, 2013
cbb8b80
Switching to a nested structure.
tjvantoll May 30, 2013
cc5e32a
Adding autocomplete specific theming.
tjvantoll May 30, 2013
0ed461a
Button: Adding theming docs.
tjvantoll May 31, 2013
08b0137
Datepicker: Theming docs
tjvantoll Jun 2, 2013
87d4963
Menu: Documenting how to create dividers.
tjvantoll Jun 2, 2013
dc25c45
Menu: Adding theming docs.
tjvantoll Jun 2, 2013
fb04089
Progressbar: Theming docs.
tjvantoll Jun 2, 2013
d0f362f
Slider: Theming docs.
tjvantoll Jun 3, 2013
4d13be8
Merge branch 'master' into theming_widgets
tjvantoll Jun 3, 2013
1c492b2
Spinner: Theming docs.
tjvantoll Jun 3, 2013
66e3459
Tabs: Theming docs
tjvantoll Jun 3, 2013
1fe6736
Tooltip: Theming docs.
tjvantoll Jun 3, 2013
85361a2
Minor consistency changes.
tjvantoll Jun 3, 2013
9493a34
Link to menu's theming section from autocomplete's.
tjvantoll Jun 5, 2013
f65b2de
Clarifying that autocompletes don't have to be created on <input> ele…
tjvantoll Jun 5, 2013
d424e10
Menu: Use a hyphen in the divider example.
tjvantoll Jun 5, 2013
e164283
Dialog: Noting ui-widget-overlay.
tjvantoll Jun 5, 2013
9517b68
Note which element is the "main" element for non-straightforward widg…
tjvantoll Jun 5, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions entries/accordion.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@
<li>CTRL+UP: Move focus to associated header.</li>
</ul>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-accordion</code>: The outer container of the accordion.
<ul>
<li><code>ui-accordion-header</code>: The headers of the accordion. The headers will additionally have a <code>ui-accordion-icons</code> class if they contain <a href="#option-icons"><code>icons</code></a>.</li>
<li><code>ui-accordion-content</code>: The content panels the accordion.</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
9 changes: 9 additions & 0 deletions entries/autocomplete.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
<title>Autocomplete Widget</title>
<desc>Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.</desc>
<longdesc>
<p>Any field that can receive input can be converted into an Autocomplete, namely, <code>&lt;input&gt;</code> elements, <code>&lt;textarea&gt;</code> elements, and elements with the <code>contenteditable</code> attribute.</p>

<p>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.</p>

<p>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.</p>
Expand All @@ -26,6 +28,13 @@
<li>UP/DOWN - Open the menu, if the <a href="#option-minLength"><code>minLength</code></a> has been met.</li>
</ul>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li><code>ui-autocomplete</code>: The <a href="/menu/#theming">menu</a> used to display matches to the user.</li>
<li><code>ui-autocomplete-input</code>: The input element that the Autocomplete widget was instantiated with.</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
22 changes: 22 additions & 0 deletions entries/button.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,28 @@

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

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-button</code>: The DOM element that represents the button. This element will additionally have one of the following classes depending on the <a href="#option-text">text</a> and <a href="#option-icons">icons</a> option: <code>ui-button-text-only</code>, <code>ui-button-icon-only</code>, <code>ui-button-icons-only</code>, <code>ui-button-text-icons</code>.
<ul>
<li>
<code>ui-button-icon-primary</code>: The element used to display the button's primary icon. This will only be present if a primary icon is provided in the <a href="#option-icons">icons</a> option.
</li>
<li>
<code>ui-button-text</code>: The container around the textual content of the button.
</li>
<li>
<code>ui-button-icon-secondary</code>: The element used to display the button's secondary icon. This will only be present if a secondary icon is provided in the <a href="#option-icons">icons</a> option.
</li>
</ul>
</li>
<li>
<code>ui-buttonset</code>: The outer container of Buttonsets.
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
51 changes: 51 additions & 0 deletions entries/datepicker.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,57 @@
<p>And can then override an individual datepicker for a specific locale:</p>
<code>$( selector ).datepicker( $.datepicker.regional[ "fr" ] );</code>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

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

<p>If the <a href="#option-numberOfMonths"><code>numberOfMonths</code></a> option is used to display multiple months at once, a number of additional classes are used:</p>

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

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
26 changes: 26 additions & 0 deletions entries/dialog.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,32 @@
});
</code></pre>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-dialog</code>: The outer container of the dialog.
<ul>
<li>
<code>ui-dialog-titlebar</code>: The title bar containing the dialog's title and close button.
<ul>
<li><code>ui-dialog-title</code>: The container around the textual title of the dialog.</li>
<li><code>ui-dialog-titlebar-close</code>: The dialog's close button.</li>
</ul>
</li>
<li><code>ui-dialog-content</code>: The container around the dialog's content. This is also the element the widget was instantiated with.</li>
<li>
<code>ui-dialog-buttonpane</code>: The pane that contains the dialog's buttons. This will only be present if the <a href="#option-buttons"><code>buttons</code></a> option is set.
<ul>
<li><code>ui-dialog-buttonset</code>: The container around the buttons themselves.</li>
</ul>
</li>
</ul>
</li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mention that the modal option creates an element with the ui-widget-overlay class?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The note right above this is about widget-specific classes. Perhaps just add a sentence outside of the list?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I've taken the outside sentence approach elsewhere and I think it makes sense here. This should be listed.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added tjvantoll@e164283.

</ul>

<p>Additionally, when the <a href="#option-modal"><code>modal</code></a> option is set, an element with a <code>ui-widget-overlay</code> class name is appended to the <code>&lt;body&gt;</code>.</p>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
31 changes: 31 additions & 0 deletions entries/menu.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@

<p>Any menu item can be disabled by adding the <code>ui-state-disabled</code> class to that element.</p>

<h3 id="icons">Icons</h3>

<p>To add icons to the menu, include them in the markup:</p>

<pre><code><![CDATA[
Expand All @@ -38,6 +40,18 @@
]]></code></pre>
<p>Menu automatically adds the necessary padding to items without icons.</p>

<h3 id="dividers">Dividers</h3>

<p>Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes:</p>

<pre><code><![CDATA[
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li>-</li>
<li><a href="#">Item 2</a></li>
</ul>
]]></code></pre>

<h3>Keyboard interaction</h3>

<ul>
Expand All @@ -53,6 +67,23 @@

<p>Disabled items can receive keyboard focus, but do not allow any other interaction.</p>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-menu</code>: The outer container of the menu. This element will additionally have a <code>ui-menu-icons</code> class if the menu contains icons.
<ul>
<li>
<code>ui-menu-item</code>: The container for individual menu items.
<ul>
<li><code>ui-menu-icon</code>: The submenu icons set via the <a href="#option-icons"><code>icons</code></a> option.</li>
</ul>
</li>
<li><code>ui-menu-divider</code>: Divider elements between menu items.</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
16 changes: 16 additions & 0 deletions entries/progressbar.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 &#8212; if the actual status cannot be calculated, an indeterminate progress bar should be used to provide user feedback.
</p>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-progressbar</code>: The outer container of the progressbar. This element will additionally have a class of <code>ui-progressbar-indeterminate</code> for indeterminate progressbars.
<ul>
<li>
<code>ui-progressbar-value</code>: The element that represents the filled portion of the progressbar.
<ul>
<li><code>ui-progressbar-overlay</code>: Overlay used to display an animation for indeterminate progressbars.</li>
</ul>
</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
12 changes: 12 additions & 0 deletions entries/slider.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,18 @@

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

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-slider</code>: The track of the slider control. This element will additionally have a class name of <code>ui-slider-horizontal</code> or <code>ui-slider-vertical</code> depending on the <a href="#option-orientation"><code>orientation</code></a> of the slider.
<ul>
<li><code>ui-slider-handle</code>: The slider handles.</li>
<li><code>ui-slider-range</code>: The selected range used when the <a href="#option-range"><code>range</code></a> option is set. This element can additionally have a class of <code>ui-slider-range-min</code> or <code>ui-slider-range-max</code> if the <code>range</code> option is set to <code>"min"</code> or <code>"max"</code> respectively.</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
12 changes: 12 additions & 0 deletions entries/spinner.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,18 @@

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

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-spinner</code>: The outer container of the spinner.
<ul>
<li><code>ui-spinner-input</code>: The <code>&lt;input&gt;</code> element that the Spinner widget was instantiated with.</li>
<li><code>ui-spinner-button</code>: The button controls used to increment and decrement the spinner's value. The up button will additionally have a <code>ui-spinner-up</code> class and the down button will additionally have a <code>ui-spinner-down</code> class.</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
21 changes: 21 additions & 0 deletions entries/tabs.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,27 @@
<li>ALT+PAGE DOWN: Move focus to the next tab and immediately activate.</li>
</ul>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-tabs</code>: The outer container of the tabs. This element will additionally have a class of <code>ui-tabs-collapsible</code> when the <a href="#option-collapsible"><code>collapsible</code></a> option is set.
<ul>
<li>
<code>ui-tabs-nav</code>: The list of tabs.
<ul>
<li>The active list item in the nav will have a <code>ui-tabs-active</code> class. Any list item whose associated content is loading via an Ajax call will have a <code>ui-tabs-loading</code> class.
<ul>
<li><code>ui-tabs-anchor</code>: The anchors used to switch panels.</li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder why the tabs stylesheet doesn't use this class. Instead it has a generic a selector.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I added ui-tabs-anchor during the redesign. Probably just never updated the stylesheet. I'll update that.

</ul>
</li>
</ul>
</li>
<li><code>ui-tabs-panel</code>: The panels associated with the tabs. Only the panel whose corresponding tab is active will be visible.</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
11 changes: 11 additions & 0 deletions entries/tooltip.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,17 @@

<p>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.</p>

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

<ul>
<li>
<code>ui-tooltip</code>: The outer container for the tooltip.
<ul>
<li><code>ui-tooltip-content</code>: The content of the tooltip.</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down
6 changes: 6 additions & 0 deletions includes/widget-theming.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<div>
<h3 id="theming">Theming</h3>

<p>The <placeholder name="name"/> widget uses the <a href="/theming/css-framework">jQuery UI CSS framework</a> to style its look and feel. If <placeholder name="name"/> specific styling is needed, the following CSS class names can be used:</p>
</div>