Skip to content

All: Document classes option #257

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 16 commits into from
Closed

All: Document classes option #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fa08b58
All: Document classes option
jzaefferer Mar 19, 2015
c7a5974
[tmp]: Extend jQuery.Widget, accordion and draggable classes docs
jzaefferer Mar 19, 2015
ffeb522
[tmp]: Update warning about classes option update; fix missing EOF
jzaefferer Mar 21, 2015
23eba79
[fix]: Many improvements
jzaefferer Apr 9, 2015
668c023
[fix]: Assign getter to something
jzaefferer Apr 9, 2015
8aa0dd3
[fix]: Extract classes examples into include
jzaefferer Apr 9, 2015
2ed4ae4
[fix]: Missing EOL
jzaefferer Apr 10, 2015
6793c77
[fix]: Improve _addClass() docs, add _removeClass and _toggleClass
jzaefferer Apr 10, 2015
3ceccf7
[fix]: Put the includes after the <default> element
jzaefferer Apr 10, 2015
4c9582f
[fix]: Add method and option links
jzaefferer Apr 13, 2015
e918e9a
[fix]: Document theme classes as part of the Theming options
jzaefferer Apr 13, 2015
3668d38
[fix]: Custom example for widget classes option, show regular and dee…
jzaefferer Apr 13, 2015
3d56060
[fix]: Add classes option for more widgets, update theming section
jzaefferer Apr 19, 2015
7ce635f
[fix]: Document classes option and theming for remaining components
jzaefferer Apr 19, 2015
4d77652
Entries: Mark deprecated options
jzaefferer Apr 20, 2015
c1cb99d
[fix]: Fix typos, bad nesting, sub( )menu, trailing comma
jzaefferer Apr 20, 2015
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
24 changes: 21 additions & 3 deletions entries/accordion.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,13 @@
<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 of the accordion.</li>
<li>
<code>ui-accordion-header</code>: The headers of the accordion. The active header will additionally have a <code>ui-accordion-content-active</code> class, the inactive headers will have a <code>ui-accordion-header-collapsed</code> class. The headers will also have a <code>ui-accordion-icons</code> class if they contain <a href="#option-icons"><code>icons</code></a>.
<ul>
<li><code>ui-accordion-header-icon</code>: Icon elements within each accordion header.</li>
</ul>
</li>
<li><code>ui-accordion-content</code>: The content panels of the accordion. The active content panel will additionally have a <code>ui-accordion-content-active</code> class.</li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -86,6 +91,15 @@
</desc>
</type>
</option>
<option name="classes" type="Object">
<default>{
"ui-accordion-header": "ui-corner-top",
"ui-accordion-header-collapsed": "ui-corner-all",
"ui-accordion-content": "ui-corner-bottom"
}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="collapsible" type="Boolean" default="false" example-value="true">
<desc>Whether all the sections can be closed at once. Allows collapsing the active section.</desc>
</option>
Expand All @@ -108,7 +122,11 @@
</ul>
</desc>
</option>
<option name="icons" type="Object" default='{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }' example-value='{ "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }'>
<option name="icons" type="Object" example-value='{ "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }'>
<default>{
"header": "ui-icon-triangle-1-e",
"activeHeader": "ui-icon-triangle-1-s"
}</default>
<desc>
<p>Icons to use for headers, matching <a href="/theming/icons/">an icon provided by the jQuery UI CSS Framework</a>. Set to <code>false</code> to have no icons displayed.</p>
<ul>
Expand Down
6 changes: 5 additions & 1 deletion entries/autocomplete.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

<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>
<li><code>ui-autocomplete-input</code>: The input element that the autocomplete widget was instantiated with. While requesting data to display to the user, the <code>ui-autocomplete-loading</code> class is also added to this element.</li>
</ul>

<h3>Dependencies</h3>
Expand All @@ -55,6 +55,10 @@
<option name="autoFocus" type="Boolean" default="false" example-value="true">
<desc>If set to <code>true</code> the first item will automatically be focused when the menu is shown.</desc>
</option>
<option name="classes" type="Object" default="{}">
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="delay" type="Integer" default="300" example-value="500">
<desc>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.</desc>
</option>
Expand Down
7 changes: 7 additions & 0 deletions entries/button.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@
<note id="functional-css"/>
<added>1.8</added>
<options>
<option name="classes" type="Object">
<default>{
"ui-button": "ui-corner-all",
}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="icons" default="{ primary: null, secondary: null }" example-value='{ primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }'>
<desc>
Expand Down
12 changes: 10 additions & 2 deletions entries/dialog.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@

<ul>
<li>
<code>ui-dialog</code>: The outer container of the dialog.
<code>ui-dialog</code>: The outer container of the dialog. If the <a href="#option-draggable"><code>draggable</code> option</a> is set, the <code>ui-dialog-dragging</code> class is added during a drag. If the <a href="#option-resizable"><code>resizable</code> option</a> is set, the <code>ui-dialog-resizing</code> class is added during a resize. If the <a href="#option-buttons"><code>buttons</code> option</a> is set, the <code>ui-dialog-buttons</code> class is added.
<ul>
<li>
<code>ui-dialog-titlebar</code>: The title bar containing the dialog's title and close button.
Expand Down Expand Up @@ -125,6 +125,14 @@
<desc>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 <code>icons</code> can be used to control <a href="/button/#option-icons">button's <code>icons</code> option</a>, and a key of <code>showText</code> can be used to control <a href="/button/#option-text">button's <code>text</code> option</a>.</desc>
</type>
</option>
<option name="classes" type="Object">
<default>{
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all",
}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="closeOnEscape" default="true" example-value="false">
<desc>Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key.</desc>
<type name="Boolean" />
Expand All @@ -133,7 +141,7 @@
<desc>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</desc>
<type name="String" />
</option>
<option name="dialogClass" default='""' example-value='"alert"'>
<option name="dialogClass" default='""' example-value='"alert"' deprecated="1.12">
<desc>The specified class name(s) will be added to the dialog, for additional theming.</desc>
<type name="String" />
</option>
Expand Down
11 changes: 11 additions & 0 deletions entries/draggable.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
<longdesc>
<p>Make the selected elements draggable by mouse. If you want not just drag, but drag &amp; drop, see the <a href="/droppable/">jQuery UI Droppable plugin</a>, which provides a drop target for draggables.</p>

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

<ul>
<li><code>ui-draggable</code>: The draggable element. When the draggable is disabled, the <code>ui-draggable-disabled</code> class is added. While dragging, the <code>ui-draggable-dragging</code> class is added.</li>
<li><code>ui-draggable-handle</code>: The handle of the draggable, specified using the <a href="#option-handle"><code>handle</code> option</a>. By default, the draggable element itself is also the handle.</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand Down Expand Up @@ -41,6 +48,10 @@
<option name="cancel" type="Selector" default='"input,textarea,button,select,option"' example-value='".title"'>
<desc>Prevents dragging from starting on specified elements.</desc>
</option>
<option name="classes" type="Object" default="{}">
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="connectToSortable" type="Selector" default="false" example-value='"#my-sortable"'>
<desc>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 <a href="#option-helper"><code>helper</code></a> option must be set to <code>"clone"</code> in order to work flawlessly. Requires the <a href="/sortable/">jQuery UI Sortable plugin</a> to be included.</desc>
</option>
Expand Down
14 changes: 12 additions & 2 deletions entries/droppable.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
<longdesc>
<p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by <a href="/draggable/">draggables</a>). You can specify which draggables each will accept.</p>

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

<ul>
<li><code>ui-droppable</code>: The droppable element. When a draggable that can be dropped on this dropppable is activated, the <code>ui-droppable-active</code> class is added. When dragging a draggable over this droppable, the <code>ui-droppable-hover</code> class is added.</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
Expand All @@ -23,17 +29,21 @@
<desc>A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return <code>true</code> if the draggable should be accepted.</desc>
</type>
</option>
<option name="activeClass" type="String" default="false" example-value='"ui-state-highlight"'>
<option name="activeClass" type="String" default="false" example-value='"ui-state-highlight"' deprecated="1.12">
<desc>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</desc>
</option>
<option name="addClasses" type="Boolean" default="true" example-value="false">
<desc>If set to <code>false</code>, will prevent the <code>ui-droppable</code> class from being added. This may be desired as a performance optimization when calling <code>.droppable()</code> init on hundreds of elements.</desc>
</option>
<option name="classes" type="Object" default="{}">
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="greedy" type="Boolean" default="false" example-value="true">
<desc>By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to <code>true</code>, any parent droppables will not receive the element. The <code>drop</code> event will still bubble normally, but the <code>event.target</code> can be checked to see which droppable received the draggable element.</desc>
</option>
<option name="hoverClass" type="String" default="false" example-value='"drop-hover"'>
<option name="hoverClass" type="String" default="false" example-value='"drop-hover"' deprecated="1.12">
<desc>If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.</desc>
</option>
<option name="scope" type="String" default='"default"' example-value='"tasks"'>
Expand Down
Loading