制作一个JavaScript按钮选择器

Question

我对JavaScript和基于Web的编程不熟悉，而我正在从事的一个宠物项目将真正受益于用看起来像单选按钮一样工作的实际按钮选择器替换看上去很糟糕的单选按钮。

一幅图片价值一千个单词，但是显然我无法发布图片，除非我的声誉提高，所以让我尝试向您描述一下。

水平单选按钮列表是在水平行中枚举的文本项列表，其前面有一个可选的“圆圈”。 如果选择了一项，则将其前面的小“圆圈”填满。一次只能选择列表中的一项。

水平按钮选择器列表是按钮的水平分组，每个按钮中间的文本表示要选择的项目。 当您选择按钮并使其位于中间时，按钮的颜色会以某种方式改变，以表明它是选定的项目。 一次只能选择组中的一个按钮。

按钮选择与单选按钮选择相比的优势在于，平板电脑和触摸屏用户更容易在水平按钮选择器列表中选择项目，而不是水平单选按钮列表，并且在视觉上更具吸引力。

我已经能够弄清楚如何执行垂直单选按钮和水平单选按钮，但是我想扩展选择器按钮的概念并将其变成实际的按钮。 谁能为此提供起点？ 我有30多个需要选择的“主题”，而且我最多可以从20个项目中选择一个“主题”，因此我希望这涉及尽可能少的编码。

谢谢！

Answer 1

您是否签出了Twitter Bootstrap？ 这可能是您要寻找的：

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

还有一个针对触摸设备进行了优化的更新版本：

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

Answer 2

您可以查看jQuery UI，上面提到的水平单选按钮选择器列表以这种方式工作：

http://jqueryui.com/button/#radio