Skip to content

1-12 preview #283

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

1-12 preview #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
fcd1c98
Selectmenu: Add documentation for _renderButtonItem() extension point
fnagel Sep 2, 2014
1a0b17d
Tooltip: Document extended content option
jzaefferer Jan 12, 2015
733dc92
Menu: Document the new wrapper requirement
tjvantoll Nov 7, 2014
7441173
Effects: Clean up queue wording since we don't support jQuery <1.7
scottgonzalez Feb 24, 2015
2ffda1e
Interactions: distance and delay options are deprecated
scottgonzalez Feb 24, 2015
19b3987
Selectmenu: Document changes to width option
scottgonzalez Mar 4, 2015
a0912d1
CSS Framework: Updated section about shadow
jaspermdegroot Jan 22, 2015
ad42c59
Stacking Elements: Remove hard wrapping
scottgonzalez Mar 27, 2015
c1fef18
Stacking Elements: Consider `<dialog>` a stacking element
scottgonzalez Mar 27, 2015
9743a95
All: Document classes option
jzaefferer Mar 19, 2015
965db7e
Entries: Mark deprecated options
jzaefferer Apr 20, 2015
29b1f74
Effects: Mark transfer-effect deprecated, document .transfer()
jzaefferer Apr 22, 2015
75ebb4d
Entries: Make deprecations more useful
jzaefferer Apr 23, 2015
031bf52
Slider: Document new handleIndex property on all 4 events
jzaefferer Apr 22, 2015
9be8fc0
Size Effect: Document behaviour for .show() and .toggle() methods
jzaefferer Apr 24, 2015
e59e812
Entries: Document cssClip method
jzaefferer Apr 24, 2015
62d61c4
Entries: Document $.fn.labels
jzaefferer May 7, 2015
f093eb5
Position: Move <added> info onto the signature
jzaefferer May 7, 2015
f3f6afd
Focus: Deprecated focus override is gone in 1.12
jzaefferer Sep 30, 2015
f49070e
Button: Document rewrite, deprecate buttonset, document new widgets
jzaefferer Sep 30, 2015
559287c
FormResetMixin: Initial API documentation for new mixin
jzaefferer Oct 25, 2015
0b8e35c
jQuery.effects.define: Initial docs
scottgonzalez Nov 25, 2015
4b85611
jQuery.effects.scaledDimensions: Initial docs
scottgonzalez Nov 27, 2015
6ba1642
jQuery.effects.clipToBox: Initial docs
scottgonzalez Nov 27, 2015
5f0e014
jQuery.effects.createPlaceholder: Initial docs
scottgonzalez Nov 27, 2015
316d99b
jQuery.effects.removePlaceholder: Initial docs
scottgonzalez Nov 27, 2015
eb54654
jQuery.effects.saveStyle: Initial docs
scottgonzalez Nov 27, 2015
867fb9f
jQuery.effects.restoreStyle: Initial docs
scottgonzalez Nov 27, 2015
89eaae6
jQuery.effects.saveStyle: Update description
scottgonzalez Dec 3, 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
47 changes: 27 additions & 20 deletions entries/button.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,49 +5,56 @@
<longdesc>
<p>Button enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.</p>

<p>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 <code>id</code> attribute, and refer to that in the label's <code>for</code> attribute. Don't nest the input inside the label, as that <a href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/">causes accessibility problems</a>.</p>

<p>In order to group radio buttons, you can use the <a href="/buttonset/">Buttonset</a> widget, which provides visual groupings of buttons.</p>

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

<p class="warning">Note: The button widget was rewritten in 1.12. Some options changed, you can find documentation for the old options in the <a href="/1.11/button/">1.11 button docs</a>. This widget used to bundle support for inputs of type radio and checkbox, this is now deprecated, use the <a href="/checkboxradio/">checkboxradio widget</a> instead. It also used to bundle the buttonset widget, this is also deprecated, use the <a href="/controlgroup/">controlgroup widget</a> instead.</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>.
<code>ui-button</code>: The DOM element that represents the button. This element will additionally have the <code>ui-button-icon-only</code> class, depending on the <a href="#option-showLabel">showLabel</a> and <a href="#option-icon">icon</a> options.
<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.
<code>ui-button-icon</code>: The element used to display the button icon. This will only be present if an icon is provided in the <a href="#option-icon">icon</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.
<code>ui-button-icon-space</code>: A separator element between icon and text content of the button. This will only be present if an icon is provided in the <a href="#option-icon">icon</a> option and the <a href="#option-iconPosition">iconPosition</a> option is set to <code>"beginning"</code> or <code>"end"</code>.
</li>
</ul>
</li>
</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
<li><a href="/jQuery.ui.keyCode/">jQuery.ui.keyCode</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
</ul>
</longdesc>
<note id="functional-css"/>
<added>1.8</added>
<added>1.8, rewritten: 1.12</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" }'>
<option name="icon" default="null" example-value='{ icon: "ui-icon-gear" }'>
<desc>
<p>Icons to display, with or without text (see <a href="#option-text"><code>text</code></a> 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.</p>

<p>The value for the <code>primary</code> and <code>secondary</code> properties must match <a href="/theming/icons/">an icon class name</a>, e.g., <code>"ui-icon-gear"</code>. For using only one icon: <code>icons: { primary: "ui-icon-locked" }</code>. For using two icons: <code>icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }</code>.</p>
<p>Icon to display, with or without text (see <a href="#option-showLabel"><code>showLabel</code></a> option). By default, the icon is displayed on the left of the label text. The positioning can be controlled using the <a href="#option-iconPosition"><code>iconPosition</code></a> option.</p>
<p>The value for this option must match <a href="/theming/icons/">an icon class name</a>, e.g., <code>"ui-icon-gear"</code>.</p>
<p>When using an input of type button, submit or reset, icons are not supported.</p>
</desc>
<type name="Object" />
<type name="String" />
</option>
<option name="iconPosition" default='"beginning"' example-value='{ iconPositon: "end" }'>
<desc>
<p>Where to display the <a href="#option-icon"><code>icon</code></a>: 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.</p>
</desc>
<type name="String" />
</option>
<option name="label" default="null" example-value='"custom label"'>
<desc>
Expand All @@ -56,8 +63,8 @@
</desc>
<type name="String" />
</option>
<option name="text" default="true" example-value="false">
<desc>Whether to show the label. When set to <code>false</code> no text will be displayed, but the <a href="#option-icons"><code>icons</code></a> option must be enabled, otherwise the <code>text</code> option will be ignored.</desc>
<option name="showLabel" default="true" example-value="false">
<desc>Whether to show the label. When set to <code>false</code> no text will be displayed, but the <a href="#option-icon"><code>icon</code></a> option must be used, otherwise the <code>showLabel</code> option will be ignored.</desc>
<type name="Boolean" />
</option>
</options>
Expand All @@ -69,7 +76,7 @@
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="refresh">
<desc>Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programmatically.</desc>
<desc>Refreshes the visual state of the button. Useful for updating button state after the native element's disabled state is changed programmatically.</desc>
</method>
<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
Expand Down
4 changes: 3 additions & 1 deletion entries/buttonset.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<?xml version="1.0"?>
<entry name="buttonset" type="widget" widget-element="button set element that contains the buttons">
<entry name="buttonset" type="widget" widget-element="button set element that contains the buttons" deprecated="1.12">
<title>Buttonset Widget</title>
<desc>Themeable button sets.</desc>
<longdesc>
<p class="warning">This widget is deprecated, use <a href="/controlgroup/">Controlgroup</a> instead.</p>

<div class="note">
<code>.buttonset()</code> is bundled with <code>.button()</code>. Although they are separate widgets, they are combined into a single file. If you have <code>.button()</code> available, you also have <code>.buttonset()</code> available.
</div>
Expand Down
89 changes: 89 additions & 0 deletions entries/checkboxradio.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<?xml version="1.0"?>
<entry name="checkboxradio" type="widget" widget-element="checkboxradio">
<title>Checkboxradio Widget</title>
<desc>Converts inputs of type radio and checkbox to themeable buttons.</desc>
<longdesc>
<p>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.</p>

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

<ul>
<li>
<code>ui-checkboxradio</code>: The input of type radio or checkbox. Will be hidden, with its associated label positioned on top.
<ul>
<li>
<code>ui-checkboxradio-label</code>: The label associated with the input. If the input is checked, this will also get the <code>ui-checkboxradio-checked</code> class. If the input is of type radio, this will also get the <code>ui-checkboxradio-radio-label</code> class.
</li>
<li>
<code>ui-checkboxradio-icon</code>: If the <a href="#option-icon"><code>icon</code></a> option is enabled, the generated icon has this class.
</li>
<li>
<code>ui-checkboxradio-icon-space</code>: If the <a href="#option-icon"><code>icon</code></a> option is enabled, an extra element with this class as added between the text label and the icon.
</li>
</ul>
</li>

</ul>

<h3>Dependencies</h3>
<ul>
<li><a href="/labels/">.labels()</a></li>
<li><a href="/form-reset-mixin/">Form Reset Mixin</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
</ul>
</longdesc>
<note id="functional-css"/>
<added>1.12</added>
<options>
<option name="classes" type="Object">
<default>{
"ui-checkboxradio-label": "ui-corner-all",
"ui-checkboxradio-icon": "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="icon" default="true" example-value="false">
<desc>Whether to show the checkbox or radio icon, depending on the input's type.</desc>
<type name="Boolean" />
</option>
<option name="label" default="null" example-value='"custom label"'>
<desc>Text to show in the button. When not specified (<code>null</code>), the HTML content of the associated <code>&lt;label&gt;</code> element is used.</desc>
<type name="String" />
</option>
</options>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</events>
<methods>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="refresh">
<desc>Refreshes the visual state of the widget. Useful for updating after the native element's checked or disabled state is changed programmatically.</desc>
</method>
<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<height>100</height>
<desc>A simple jQuery UI checkboxradio</desc>
<code><![CDATA[
$( "input[type='radio']" ).checkboxradio();
]]></code>
<html><![CDATA[
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
]]></html>
</example>
<category slug="widgets"/>
</entry>
Loading