• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Button

This version was saved 9 years, 10 months ago View current version     Page history
Saved by Alex Schmitz
on April 23, 2014 at 8:55:29 am
 

type: widget

release: 1.12

status: in development

documentation: N/A

demo: http://view.jqueryui.com/button-icon-span/demos/button/

 

TODOs

 


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

    • encourage users to use <button> instead

  • anchors: use as wrapper

    • proxy SPACE to click (and prevent default scrolling)

  • input[type=radio/checkbox]: unsure

    • should we just use the new checkbox/radio widget instead?

  • 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: false)
  • icon (String, default: null)
    • name of the icon to use
  • iconPosition (String Default: "beginning")
    • just beginning and end ( or add top and bottom these work in current branch )
  • label (string default: null )
    • text to use in button
  • 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()
    • enable a disabled button
  • refresh()
    • refresh the visual state of the button
  • widget()
    • return the outermost element of the widget
  • _getCreateOptions():
    • Generate label if null (read HTML or value for inputs)

    • Read disabled property
  •  

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.)

 

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)
  • items (String, default: "button, select, a, )
    • name of the icon to use
  • direction (String Default: "horizontal")
    • just horizontal and vertical

 

Methods:

  • destroy()
    • remove widget from element revert all markup 
  • disable()
    • disable use of the button
  • enable()
    • enable a disabled button
  • refresh()
    • refresh the visual state of the button
  • 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. )

 


<div id="buttonset">
     <button id="button">Text<button>
     <input type="submit" name="submit" id="submit-button" value="Text"/>
     <a href="#" id="link">Text</a>
</div>

4.2 Recommended transformed HTML markup

 

(The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

<div id="buttonset" class="ui-buttonset">

     <button class="ui-corner-all ui-widget ui-button">Text</button>

     <input class="ui-corner-all ui-widget ui-button" type="submit" name="submit" id="submit-button" value="Text">

     <a class="ui-corner-all ui-widget ui-button" href="#" id="link">Text</a>

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

 

 

Comments (0)

You don't have permission to comment on this page.