type: widget
release: 1.12
status: in development
documentation: N/A
demo: http://view.jqueryui.com/button-icon-span/demos/button/
TODOs
- investigate pseudo elements vs spans for icons
- create new branch using spans for icons
- Determine if <label><input></label> is still bad for accessibility
Button:
1 - Description:
To have a fresh start on the planning on this refactor, the older wiki page that covered the current button is archived on Button (Old).
The button widget allows consistent visual design of buttons and other button like widgets ( toggle buttons, checkboxes ).
While the old button widget combined the toggle button / checkbox / radio behavior into a single widget. These will now be separated into two widgets.
The button set functionality will be converted into a controlgroup widget.
The checkboxradio widget and the control group widget will be loosely modeled after the jQuery Mobile widgets of the same name
http://api.jquerymobile.com/checkboxradio/
http://api.jquerymobile.com/controlgroup/
Supported types:
-
button[type=button/submit/reset]: use as wrapper
-
input[type=button/submit/reset]: no icon support
-
anchors: use as wrapper
-
input[type=radio/checkbox]: unsure
- anything else: officially unsupported, likely to work the same as <button>
Buttons are generally just styling. As such, we should be able to easily style buttons just with the CSS framework. This is a big part of why Bootstrap is so popular.
2 - Visual Design:
The visual design of the button will not change at this time except that it will no longer support multiple icons
button set visual design will also remain the same
checkbox radio will now support 2 visual styles: a toggle button style, and one where the checkbox or radio button will show
3 - Functional Specification: Button
(Detailed description of how the script will be structured: defaults, options, architecture, extensibility, etc.)
Options:
- disabled (Boolean Default: null)
- icon (String, default: null)
- iconPosition (String Default: "beginning")
- just beginning and end ( or add top and bottom these work in current branch )
- label (string default: null )
- showLabel (Boolean Default: true )
- whether to show text or not
Methods:
- destroy()
- remove widget from element revert all markup
- disable()
- disable use of the button
- enable()
- refresh()
- refresh the visual state of the button
- widget()
- return the outermost element of the widget
- _getCreateOptions():
-
Events:
- create
- when the widget is initially created
4 - Markup & Style:
4.1 Initial markup examples
(Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )
<button id="button">Text<button>
<input type="submit" name="submit" id="submit-button" value="Text"/>
<a href="#" id="link">Text</a>
4.2 Recommended transformed HTML markup
(The HTML markup structure and classes that will be used by the scripts in the enhanced version)
<button class="ui-button ui-widget ui-corner-all">Text</button>
<input class="ui-button ui-widget ui-corner-all" type="submit" name="submit" id="submit-button" value="Text">
<a class="ui-button ui-widget ui-corner-all" href="#" id="link">Text</a>
4.3 Accessibility recommendation
(Detailed recommendations for ARIA, HTML markup, CSS and JavaScript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices)
4.4 CSS & Theme
(Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.)
5 - Latest version of plugin:
(Link to the latest version in the jQuery UI trunk here)
6 - Open issues being discussed
(Use this area to place things that we're hashing out like features and options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)
7 - Backcompat
- Text option will proxy to showLabel option.
- Icons option will proxy to icon with the iconPosition set to either beginning or end based on primary or secondary.
- Checkboxes and radios will be proxied to checkboxradio widget with icon set to false.
- Need to figure out how to handle multiple icons in new button.
Checkboxradio:
1 - Description checkboxradio:
Widget to create toggle buttons our of inputs of type checkbox or radio with or without an icon representing the check / radio
Supported Types:
- input[type=checkbox/radio] ( checkboxradio widget )
2 - Visual Design checkboxradio:
The grouping can be done either horizontally for a toolbar like effect or vertically for for a list like effect. The visual effects of this widget should be able to be recreated with css only.
3 - Functional Specification checkboxradio:
(Detailed description of how the script will be structured: defaults, options, architecture, extensibility, etc.)
Options:
- disabled (Boolean Default: null)
- label (String, default:null )
- string to use as text in the label
- icon (Boolean Default: false )
- wether icon should be shown
Methods:
- destroy()
- remove widget from element revert all markup
- disable()
- enable()
- enable a disabled checkbox or radio button
- refresh()
- widget()
- Return the outermost element of the checkboxradio widget
Events:
- create
- when the widget is initially created
4 - Markup & Style:
4.1 Initial markup examples
(Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )
<!-- Checkbox -->
<label for="checkbox-1">Checkbox widget sample</label>
<input type="checkbox" id="checkbox-1" />
<!--Radio Button-->
<label for="radio-1">Radio widget sample</label>
<input type="radio" id="radio-1" name="radio" checked/>
4.2 Recommended transformed HTML markup
(The HTML markup structure and classes that will be used by the scripts in the enhanced version)
<!--Default horizontal direction -->
<label for="checkbox-1" class="ui-checkbox-label ui-corner-all ui-widget ui-button">Checkbox widget sample</label>
<input type="checkbox" id="checkbox-1" class="ui-checkboxradio ui-helper-hidden-accessible">
<!--Default horizontal direction -->
<label for="radio-1" class="ui-state-active ui-radio-checked ui-radio-label ui-corner-all ui-widget ui-button">Radio widget sample</label>
<input type="radio" id="radio-1" name="radio" checked="" class="ui-checkboxradio ui-helper-hidden-accessible">
4.3 Accessibility recommendation
(Detailed recommendations for ARIA, HTML markup, CSS and JavaScript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices)
With the suggested markup we maintain native behavior for both keyboard and screen reader users. The only issue comes with the focus outline because a label never normally receives focus. This means the visual button will never get the expected focus outline. The only way around this would to implement our own focus outline in the theme.
4.4 CSS & Theme
(Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.)
5 - Latest version of plugin:
(Link to the latest version in the jQuery UI trunk here)
6 - Open issues being discussed
(Use this area to place things that we're hashing out like features and options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)
Focus Outline We need to decide what to do here this also relates to menu.
Controlgroup:
1 - Description Controlgroup:
A grouping of "button like" widgets ( eg: button, checkboxradio, selectmenu ). child widgets will be automatically enhanced based on element type.
Supported Types:
- a ( button widget )
- input[type=button/submit/reset] ( button widget )
- button ( button widget )
- input[type=checkbox/radio] ( checkboxradio widget )
- select ( selectmenu widget )
- textinput ( when it exists should we support this? )
2 - Visual Design Controlgroup:
The grouping can be done either horizontally for a toolbar like effect or vertically for for a list like effect. The visual effects of this widget should be able to be recreated with css only.
3 - Functional Specification Controlgroup:
(Detailed description of how the script will be structured: defaults, options, architecture, extensibility, etc.)
Options:
- disabled (Boolean Default: false)
- If the controlgroup child widgets should be disabled or not.
- items (Object, default: "{
- 'button': 'input[type=button], input[type=submit], input[type=reset], button, a',
- 'checkboxradio': 'input[type=checkbox], input[type=radio]',
- 'selectmenu': 'select'}
- }" )
- Object containing widgetname selector pairs
- direction (String Default: "horizontal")
- Just horizontal and vertical
- Determines if the controlgroup should be horizontal like a toolbar or vertical like a column
- excludeInvisible (Boolean Default: true)
Methods:
- destroy()
- remove widget from element revert all markup
- this will also call destroy on all child widgets
- disable()
- calls disable on all child widgets
- enable()
- calls enable on all child widgets
- refresh()
- refresh the visual state of the controlgroup
- calls refresh on all child widgets
- widget()
- Return the outermost element of the controlgroup
Events:
- create
- when the widget is initially created
4 - Markup & Style:
4.1 Initial markup examples
(Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )
<div class="controlgroup">
<button style="display:none">Button with icon only</button>
<label for="checkbox">Checkbox</label>
<input type="checkbox" value="checkbox" id="checkbox">
<button>Button with icon on the bottom</button>
<select>
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
</div>
4.2 Recommended transformed HTML markup
(The HTML markup structure and classes that will be used by the scripts in the enhanced version)
<!--Default horizontal direction -->
<div class="ui-controlgroup-horizontal ui-controlgroup controlgroup">
<button style="display:none" class="ui-widget ui-button" role="button">Button with icon only</button>
<label for="checkbox" class="ui-checkbox-label ui-widget ui-button ui-corner-left">Checkbox</label>
<input type="checkbox" value="checkbox" id="checkbox" class="ui-checkboxradio ui-helper-hidden-accessible">
<button class="ui-widget ui-button" role="button">Button with icon on the bottom</button>
<select id="ui-id-3" style="display: none;">
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<span class="ui-corner-right ui-state-default ui-widget ui-icon-end ui-button ui-selectmenu-button" tabindex="0" id="ui-id-3-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="ui-id-3-menu" aria-haspopup="true" aria-activedescendant="ui-id-19" aria-labelledby="ui-id-19" aria-disabled="false" style="width: 37.89999961853027px;">
<span class="ui-icon-triangle-1-s ui-icon"></span>
<span class="ui-selectmenu-text">Fast</span>
</span>
</div>
<!--Default horizontal direction -->
<div class="ui-controlgroup-vertical ui-controlgroup controlgroup">
<button style="display:none" class="ui-widget ui-button" role="button">Button with icon only</button>
<label for="checkbox2" class="ui-checkbox-label ui-widget ui-button ui-corner-top">Checkbox</label>
<input type="checkbox" value="checkbox2" id="checkbox2" class="ui-checkboxradio ui-helper-hidden-accessible">
<button class="ui-widget ui-button" role="button">Button with icon on the bottom</button>
<select id="ui-id-24" style="display: none;">
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
<span class="ui-corner-bottom ui-state-default ui-widget ui-icon-end ui-button ui-selectmenu-button" tabindex="0" id="ui-id-24-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="ui-id-24-menu" aria-haspopup="true" aria-activedescendant="ui-id-40" aria-labelledby="ui-id-40" aria-disabled="false" style="width: 263.8999996185303px;">
<span class="ui-icon-triangle-1-s ui-icon"></span>
<span class="ui-selectmenu-text">Fast</span>
</span>
</div>
4.3 Accessibility recommendation
(Detailed recommendations for ARIA, HTML markup, CSS and JavaScript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices)
4.4 CSS & Theme
(Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.)
5 - Latest version of plugin:
(Link to the latest version in the jQuery UI trunk here)
6 - Open issues being discussed
(Use this area to place things that we're hashing out like features and options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)
- should we support textinputs and selectmenus? yes select menus are currently supported once we
- should we support hidden elements? Yes this is in the current implementation.
7 - Backcompat
- Buttonset will be proxied to controlgroup.
- Items option from buttonset calls will be proxied to controlgroup's items option to the value of the button property.
Comments (0)
You don't have permission to comment on this page.