如何显示可切换的项目（UI）

说我有一些用户可以切换的状态，例如[ON] | [OFF]。如何显示可切换的项目（UI）

通常，我使用一个开关（BUTTON），并且当事情是ON，用户看到：

LIGHT IS [ON]

当它是他们看到OFF

LIGHT IS [OFF]

我的问题是：是否明显（理智），应该点击[ON]打开灯光[OFF]？

你怎么做到的？任何想法或想法表示赞赏。

2009-04-09 inspite

我会使用标签和按钮来显示操作。

灯亮 - 关闭？

点击，将改变两个标签和按钮：

指示灯不亮 - 开机？

此解决方案明确指出了可用的状态和操作。

2009-04-09 10:12:59 Tom

我认为这是我在暗想的想法 – inspite 2009-04-09 10:25:34

如果清晰度是您的担心，我肯定会加入类似复选框的控件的概念。这是一个广为接受的界面组件，大多数人都能理解。

在任何情况下，您都可以使整行可点击，以便在单击文本时也可以切换（就像HTML标签元素一样）。

只显示文本为'ON'的按钮可能会混淆用户是否切换指示灯，或者当前状态是否为'on'。

2009-04-09 10:04:00

这肯定是有道理的，并比我目前做得更清楚，但我讨厌复选框：D – inspite 2009-04-09 10:09:00

的图像讲千言万语......

根据应用的类型，显示可点击设置字段的状态可能会更直观的光开关的形象？

然后，您可以使用灯泡开启和灯泡关闭图像来显示状态。

不是每个人都知道一个复选框是什么;）

2009-04-09 10:17:24 Konrad

并且有了一点CSS，您可以显示图像或回退到索姆e CSS控件（如复选框）禁用CSS /图像时。 – 2009-04-09 10:27:37

你可以使用单选框，这是相当标准的控制，不应该混淆大多数人。

<input type="radio">Light on<br> 
<input type="radio">Light off

另一种选择是尝试并实现某种形式的开关按钮，这样的事情一个是在iPhone上使用：

2009-04-09 13:08:42 Daan

回答