简体繁体 English

制作一个JavaScript按钮选择器

[英]Making a JavaScript button selector

原文 2013-10-18 16:00:34 6 2 javascript/ button/ selection

I'm somewhat new to JavaScript and web-based programming, and a pet project I'm working on would really benefit from replacing terrible-looking radio buttons with actual button selectors that worked the same way as radio buttons. 我对JavaScript和基于Web的编程不熟悉，而我正在从事的一个宠物项目将真正受益于用看起来像单选按钮一样工作的实际按钮选择器替换看上去很糟糕的单选按钮。

A picture is worth a thousand words, but apparently I cannot post an image until my reputation increases, so let me try to describe this to you. 一幅图片价值一千个单词，但是显然我无法发布图片，除非我的声誉提高，所以让我尝试向您描述一下。

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. 一次只能选择组中的一个按钮。

The benefit of the button selection versus radio button selection is that it is easier for tablet and touch-screen users to select the items in a horizontal button selector list instead of a horizontal radio button list, and it is more visually appealing. 按钮选择与单选按钮选择相比的优势在于，平板电脑和触摸屏用户更容易在水平按钮选择器列表中选择项目，而不是水平单选按钮列表，并且在视觉上更具吸引力。

I have been able to figure out how to do vertical radio buttons, and horizontal radio buttons, but I want to extend the selector button idea and turn it into actual buttons. 我已经能够弄清楚如何执行垂直单选按钮和水平单选按钮，但是我想扩展选择器按钮的概念并将其变成实际的按钮。 Can anyone provide a starting point for this? 谁能为此提供起点？ I have over 30 "topics" needing selection, and I can have up to 20 items to select from for a single "topic", so I want this to involve the least amount of coding as possible. 我有30多个需要选择的“主题”，而且我最多可以从20个项目中选择一个“主题”，因此我希望这涉及尽可能少的编码。

Thanks! 谢谢！

2 个解决方案

Have you checked out Twitter Bootstrap? 您是否签出了Twitter Bootstrap？ This may be what you're looking for: 这可能是您要寻找的：

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

There's also a newer version optimized for touch devices: 还有一个针对触摸设备进行了优化的更新版本：

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

You can look into jQuery UI, there are the horizontal radio button selector list you mentioned above work this way: 您可以查看jQuery UI，上面提到的水平单选按钮选择器列表以这种方式工作：

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