javascript - 制作 JavaScript 按钮选择器

Question

我对 JavaScript 和基于 Web 的编程有点陌生，我正在从事的一个宠物项目如果用与单选按钮工作方式相同的实际按钮选择器替换看起来很糟糕的单选按钮，确实会受益匪浅。

一图胜千言，但显然在我的声誉提高之前我无法发布图片，所以让我尝试向您描述一下。

A horiozontal radio button list is a list of text items, enumerated in a horizontal row, with a selectable "circle" preceeding it. If one item is selected, the little "circle" preceeding it is filled in. Only one item in the list can be selected at once.

A horizontal button selector list is a horizontal grouping of buttons, with text in the center of each button representing the item to be selected. When you select the button with the item in the center, the button color changes somehow to show that it is the selected item. Only one button in the group can be selected at once.

按钮选择与单选按钮选择相比的好处是，平板电脑和触摸屏用户可以更轻松地选择水平按钮选择器列表(而不是水平单选按钮列表)中的项目，并且在视觉上更具吸引力。

我已经能够弄清楚如何制作垂直单选按钮和水平单选按钮，但我想扩展选择器按钮的想法并将其变成实际的按钮。任何人都可以为此提供一个起点吗？我有超过 30 个“主题”需要选择，对于单个“主题”我最多可以选择 20 个项目，因此我希望这涉及尽可能少的编码。

谢谢!

Answer 1

您检查过 Twitter Bootstrap 吗？这可能就是您正在寻找的:

http://getbootstrap.com/2.3.2/javascript.html#buttons

还有一个针对触摸设备优化的新版本:

http://getbootstrap.com/javascript/#buttons