制作JavaScript按钮选择器

时间:2013-10-18 16:00:34

标签: javascript button selection

我对JavaScript和基于网络的编程有些陌生,而我正在研究的宠物项目真的会受益于用实际的按钮选择器替换看起来很糟糕的单选按钮,它们与单选按钮的工作方式相同。

一张图片胜过千言万语,但显然我不能发布图片,直到我的声望增加,所以让我试着向你描述一下。

  

horiozontal单选按钮列表是一个文本项列表,列举在   一个水平行,在它之前有一个可选的“圆圈”。如果一个   项目被选中,其前面的小“圆圈”被填入。   一次只能选择列表中的一个项目。

     

水平按钮选择器列表是按钮的水平分组,   在每个按钮的中心用文本代表项目   选择。当您选择项目位于中心的按钮时,   按钮颜色以某种方式更改以显示它是所选项目。   一次只能选择组中的一个按钮。

按钮选择与单选按钮选择的好处是,平板电脑和触摸屏用户更容易选择水平按钮选择器列表中的项目而不是水平单选按钮列表,并且更具视觉吸引力。

我已经能够弄清楚如何做垂直单选按钮和水平单选按钮,但我想扩展选择按钮的想法并将其转换为实际按钮。任何人都可以为此提供一个起点吗?我有超过30个“主题”需要选择,我可以有多达20个项目可供选择单个“主题”,所以我希望这涉及尽可能少的编码。

谢谢!

2 个答案:

答案 0 :(得分:1)

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

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

还有针对触控设备优化的新版本:

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

答案 1 :(得分:0)

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

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