• 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 (Old) (redirected from Buttons)

Page history last edited by Scott González 11 years, 3 months ago

 

type: widget

release: 1.8

status: released

documentation: http://api.jqueryui.com/button/

demo: http://jqueryui.com/button/

 

 


 

 

1 - Description:

 

A standard set of button types that can be used across all widgets. Buttons can be basic (A1), have a menu (A2), a split button which opens a menu only when the right hand arrow is clicked (A3) or toggle buttons (A4) that behave like a radiobutton set where only one can be depressed at once. Buttons in a UI usually have different visual styles to indicate importance (A5) such in a save/cancel dialog and may need to be multiple sizes (A6).

 

Button content

Every button should have a text label, even if it's ultimately displayed as an icon only, by hiding the text label in an accessible way.

 

Button types

There are a range of button primitive types we need to support, each with slightly different functionality and behavior. For each button type below, they can have any of the 4 button content styles above:

  • Basic button (A1)
  • Button with menu (A2) - clicking the button will open a menu. Two variations:
    • No feedback - choosing a menu option simply closes the menu, button remains unchanged (comonly used for an action menu)
    • Button label feedback - choosing a menu option updates the button label (like a select box)
  • Split button (A3) - this button has 2 separate clickable regions: the left label works like the basic button, while clicking the right hand arrow will open a menu. Same menu options apply so the menu selection can update the button label (see Outlook's "Create new X" split button)
  • Grouped buttons (A4)
    • Standard button - these are normal buttons, but are visually connected together (no margins inbetween, common outer rounded corners)
    • Toggle: Single select - works like a radiobutton set: clicking one deselects all others
    • Toggle: Multi-select - works like a checkbox set: multiple can be clicked to the on/selected state

 

Typical use cases - buttons can appear in a wide variety of contexts so we need to ensure that they can easily be added to a lot of places:

  • Dialogs - may be grouped together (cancel/save) and aligned left or right in the dialog
  • Date picker - in the re-factor, we will support a flexible bottom button bar that will hold 1-3 (max?) buttons, should be able to align one or a group left and another right
  • Headers - usually right aligned but could be anywhere
  • Toolbars - this is a separate plugin, but it needs to be considered since it is generally a container for buttons
  • In tables and grids - action buttons per row, in row detail panels, in toolbars above and below the grid
  • Next to form inputs, should be easily styled to match height of input
  • Sitting anywhere on a page by themselves

 

Example buttons

Filament Group created an article with a core set of CSS framework buttons (not comprehensive to what we want to build for UI but a start)

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

 

Ext JS 3 button examples, very full set of every scenario except button groups:

http://extjs.com/deploy/ext-3.0-rc1.1/examples/button/buttons.html

 


 

2 - Visual Design:

 

 


 

 

3 - Functional Specifications/Requirements:

 

Buttons can be created from any of the following:

  • <button>, <button type="button">, <button type="submit">, <button type="reset">
  • <input type="button">, <input type="submit">, <input type="reset">
  • <label for="my-button"><input type="checkbox" id="my-button">
  • <label for="my-button"><input type="radio" id="my-button">
  • <a>

 

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

When using a checkbox or radio button, the label will transformed into a button.

 

 

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

  • Apply role="button"
  • For checkbox buttons
    • Can be marked up either as role="checkbox" & aria-checked="true/false", or role="button" & aria-pressed="true/false". Since there is already a checkbox widget and the checkbox button looks like an actual button, the latter option is recommended.
  • For Radio Buttons:
    • Must use role="radio" and aria-checked="true/false" rather than aria-pressed
    • must either be contained by an element with role="radiogroup", or this element must reference each radio button through aria-owns (in this case the element could be a hidden div). The radiogroup element must specify an accessible name for the group, using an "aria-labelledby", "aria-label" or "title" attribute.
    • Only the selected radio button must be part of the tab order
    • The selected button can be changed using the keyboard's arrow keys.
  • High Contrast Mode
    • The icons in icon buttons become invisible when high contrast mode is enabled. One solution would be to (when high contrast mode is detected) disable the styles that normally position the icon button's label text off screen. This would turn the icon button into a regular text button when high contrast mode is enabled (which also means that the width would have to be set to auto, making the button much wider than it normally is. An alternative solution would be to inject a high contrast version of the background image as an actual image element to the DOM (although each icon would have to be stored as a separate image).

 


 

4 - Markup & Style:

 

(only used prior to implementation)

 


5 - Latest version of plugin:

 

http://view.jqueryui.com/master/demos/button/default.html

 


 

6 - Open issues being discussed

 

 

none

Comments (4)

Yanick said

at 8:57 am on Jul 12, 2010

what about vertically grouped buttons? In the buttonset widget, having an option "align: 'x'|'y'" (or 'horizontal'|'vertical') could set "ui-corder-top" instead of "ui-corner-left" and "ui-corner-bottom" instead of "ui-corner-right" for 'y' (or vertical) aligned button sets. Their widths could be aligned to the largest one (keeping original widths for the destroy method), and inserting a <br /> between each buttons (optionally to ensure that they are, in fact, vertically aligned. This could be useful for vertically aligned toolbars.

Scott González said

at 9:01 am on Jul 12, 2010

I like this idea. The option should be "orientation" with possible values of "horizontal" (default) and "vertical" in order to match other plugins.

Jonathon Saine said

at 4:02 pm on Oct 26, 2012

I see that this new approach keeps the buttons very blocky and a little 'metro'ish. Which is nice even for legacy ie6 (even though its being dropped). I am happy to see that you worked out the line-height issue that most people have due to the browser specific rules overriding that.
- would one be able to scale the buttons via font-size? responsive design?
- would one be able to add rounding to the buttons if they wanted?

The next big thing that everyone is going to ask with regards to buttons is about colors.. changing colors using bootstrap's buttons is as simple as changing out a css class (css3 gradient). Now currently a theme wouldn't include multiple background colors for a user to swap out bg colors on a button.. and to me that is where the problem lies. These buttons also look a bit somber.. I really do enjoy google's buttons where they are bright and vibrant and just look clean generally.

bootstrap: http://rc.getbootstrap.com/base-css.html#buttons
I do like the fact they have a 'block button' which comes in handy for dialog/modals/etc.

someone took bootstrap and applied 'google' buttons in place which to me are very similar to this latest jui approach.. just a little more colorful and 'flatter':
bootstrap - google buttons: http://blog.timodonnell.com/css3-google-buttons/base-css.html#buttons

I personally go an even slightly different route where I take the default bootstrap buttons and merge in just a little of the google css (mainly just focus) to create my own buttons.. I'll have to throw up a jsfiddle/jsbin to show this later.

Jonathon Saine said

at 4:10 pm on Oct 26, 2012

Here is an example of my bootstrap buttons that I do, http://jsfiddle.net/FtGUQ/1/
Main difference is when a button is selected/hover compared to their stock method.

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