Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Idioms for a three-state toggle?

I have a table column where each row has one of three states, and the purpose of the row is to offer manipulation AND display of this property with three states.

My current development view is to have three tightly packed radio buttons with labels at the head of the columns (and every 50 rows or so) and onClick they send an AJAX request and thar she blows.

This is fugly.

Is there a standard idiom for a control like this? I'm currently mocking up something similar to the iPhone on/off toggle, but with a "middle" state.

Any input would be welcome.

EDIT

A bit more clarification: I have a tool for confirming events. Each event is either "proposed", "cancelled", or "confirmed". They all default to "proposed" until someone explicitly confirms or cancels them. This is a thin front-end for a SQL table.

like image 606
Alex Mcp Avatar asked Apr 05 '10 18:04

Alex Mcp


2 Answers

I've seen this handled with image buttons that remain "depressed" when you click while popping the other two out. They act like radio buttons except that the label and the state are merged. If your names are too lengthy to fit in a button, you can abbreviate them and provide a key. I'd also give each one a distinct color. For implementation just pop the value in a hidden form field on click.

These are called "Toggle Buttons" in some other UI's:

  • http://java.sun.com/products/jlf/ed2/book/HIG.Controls2.html
  • http://msdn.microsoft.com/en-us/library/dd940509%28VS.85%29.aspx
  • http://developer.gnome.org/projects/gup/hig/2.0/controls-toggle-buttons.html
like image 103
roufamatic Avatar answered Nov 15 '22 09:11

roufamatic


The standard mechanization for things like this in military avionics, where screen space is always at a premium,and so are buttons, is a "rotary". Each time you click it, it steps to the next value in sequence, wrapping around.

As an example, a device with a cryogenic cooler might have three states: OFF, WARM, and COOL. Initially, the device is OFF: no power applied. Click it, and it switches to WARM, meaning power is applied, but no cooling. Click it again, and it starts the cooler. (Since cooling in this kind of thing is usually supplied by a gas bottle with a strictly limited capacity, you don't want to cool the device until you are getting ready to party.) Click it again, and it shuts the device OFF.

like image 42
John R. Strohm Avatar answered Nov 15 '22 07:11

John R. Strohm