Skip to content

Commit f9bc59a

Browse files
scottgonzalezscottgonzalez
committed
Button: Split out .buttonset() docs
Fixes jquerygh-97
1 parent 3db0fa5 commit f9bc59a

File tree

2 files changed

+76
-29
lines changed

2 files changed

+76
-29
lines changed

‎entries/button.xml

+2-29
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<?xml version="1.0"?>
22
<entry name="button" type="widget" widget-element="element visually representing the button">
33
<title>Button Widget</title>
4-
<desc>Themeable buttons and button sets.</desc>
4+
<desc>Themeable buttons.</desc>
55
<longdesc>
66
<p>Button enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.</p>
77

88
<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>
99

10-
<p>In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calling <code>.buttonset()</code>. Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendants and applying <code>.button()</code> to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's <code>destroy</code> method. For grouped radio and checkbox buttons, it's recommended to use a <code>fieldset</code> with a <code>legend</code> to provide an accessible group label.</p>
10+
<p>In order to group radio buttons, Button also provides an additional widget, called <a href="/buttonset/">Buttonset</a>, which provides visual groupings of buttons.</p>
1111

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

@@ -28,9 +28,6 @@
2828
</li>
2929
</ul>
3030
</li>
31-
<li>
32-
<code>ui-buttonset</code>: The outer container of Buttonsets.
33-
</li>
3431
</ul>
3532

3633
<h3>Dependencies</h3>
@@ -82,30 +79,6 @@ $( "button" ).button();
8279
]]></code>
8380
<html><![CDATA[
8481
<button>Button label</button>
85-
]]></html>
86-
</example>
87-
<example>
88-
<height>100</height>
89-
<desc>A simple jQuery UI Buttonset</desc>
90-
<code><![CDATA[
91-
$( "#radio" ).buttonset();
92-
]]></code>
93-
<html><![CDATA[
94-
<form>
95-
<fieldset>
96-
<legend>Favorite jQuery Project</legend>
97-
<div id="radio">
98-
<input type="radio" id="sizzle" name="project">
99-
<label for="sizzle">Sizzle</label>
100-
101-
<input type="radio" id="qunit" name="project" checked="checked">
102-
<label for="qunit">QUnit</label>
103-
104-
<input type="radio" id="color" name="project">
105-
<label for="color">Color</label>
106-
</div>
107-
</fieldset>
108-
</form>
10982
]]></html>
11083
</example>
11184
<category slug="widgets"/>

‎entries/buttonset.xml

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<?xml version="1.0"?>
2+
<entry name="buttonset" type="widget" widget-element="button set element that contains the buttons">
3+
<title>Buttonset Widget</title>
4+
<desc>Themeable button sets.</desc>
5+
<longdesc>
6+
<div class="note">
7+
<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.
8+
</div>
9+
10+
<p>A button set provides a visual grouping for related <a href="/button/">buttons</a>. It is recommended that a button set be used whenever you have a group of related buttons. Button sets work by selecting all appropriate descendants and applying <code>.button()</code> to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's <code>.destroy()</code> method. For grouped radio and checkbox buttons, it's recommended to use a <code>fieldset</code> with a <code>legend</code> to provide an accessible group label.</p>
11+
12+
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
13+
14+
<ul>
15+
<li>
16+
<code>ui-buttonset</code>: The outer container of Buttonsets.
17+
</li>
18+
</ul>
19+
20+
<h3>Dependencies</h3>
21+
<ul>
22+
<li><a href="/category/ui-core/">UI Core</a></li>
23+
<li><a href="/jQuery.widget/">Widget Factory</a></li>
24+
</ul>
25+
</longdesc>
26+
<note id="functional-css"/>
27+
<added>1.8</added>
28+
<options>
29+
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
30+
<option name="items" default='"button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"' example-value='"button, input[type=button], input[type=submit]"'>
31+
<desc>Which descendant elements to convert manage as buttons.</desc>
32+
<type name="Selector" />
33+
</option>
34+
</options>
35+
<events>
36+
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
37+
</events>
38+
<methods>
39+
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
40+
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
41+
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
42+
<method name="refresh">
43+
<desc>Process any buttons that were added or removed directly in the DOM. Results depend on the <a href="#option-items"><code>items</code></a> option.</desc>
44+
</method>
45+
<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
46+
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
47+
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
48+
</methods>
49+
<example>
50+
<height>100</height>
51+
<desc>A simple jQuery UI Buttonset</desc>
52+
<code><![CDATA[
53+
$( "#radio" ).buttonset();
54+
]]></code>
55+
<html><![CDATA[
56+
<form>
57+
<fieldset>
58+
<legend>Favorite jQuery Project</legend>
59+
<div id="radio">
60+
<input type="radio" id="sizzle" name="project">
61+
<label for="sizzle">Sizzle</label>
62+
63+
<input type="radio" id="qunit" name="project" checked="checked">
64+
<label for="qunit">QUnit</label>
65+
66+
<input type="radio" id="color" name="project">
67+
<label for="color">Color</label>
68+
</div>
69+
</fieldset>
70+
</form>
71+
]]></html>
72+
</example>
73+
<category slug="widgets"/>
74+
</entry>

0 commit comments

Comments
 (0)