Rails 如何以图片的形式表示 selection 或者 radio?

hujoy · 2011年12月03日 · 最后由 hujoy 回复于 2012年02月04日 · 4274 次阅读

一般都是下拉列表或 radio,能不能以图片形式展现,例如四张图片,点击第 1 张图片,值就设置为 1,以此类推。

另外,数据库层面,能否将表单返回的值 (例如点击第 1 张图片,返回值为 1) 直接赋给数组的特定的位置。例如有 10 组图片,对应数组的 10 个值。

最好能以 simple_form 的形式来实现?

呼唤大牛们帮忙:@xdite @huacnlee @hooopo

不知道在贴子内@有没有效,重新骚扰一遍:@xdite @huacnlee @hooopo

用 javascript 換,這與 rails 無關

可以看看 chosen 是怎麼實作的 http://harvesthq.github.com/chosen/

匿名 #4 2011年12月03日

可以把 input 外面设个 div..然后改变这个 div 的背景。

@xdite chosen 确实是个不错的选择,但好像还不支持图片。

chosen 用于 select 的,radio, checkbox 要好看可以试试 http://uniformjs.com/

@doitian 貌似 uniformjs 也不支持以图片显示的这种吧,难不成真要自己动手 hack 别人网站上已经实现的功能。

@hujoy 图片可以放到 label 里啊,或者用 css 把 label 替换图片 background。如果浏览器支持 adjacent silbling selector 和:checked pseodo class,可以用 css 给图片加效果,或者切换 background img.

例如:

http://jsfiddle.net/qsmpK/8/

还是显示了用于 check 的 radio 或 box,最好是只显示图片,点击图片直接选择。

@hujoy 把 check 和 radio 设置成 display: none 就行了。

http://jsfiddle.net/qsmpK/9/

#9 楼 @hujoy 如果想兼容老浏览器里让图片不同状态下显示不同效果,就要用到点 javascript 了,不过 radio 比较恶心,你点击一个,之前选择的那个被取消了是不会触发 change event 的

谢谢 @doitian 其实我想实现的就是在调查中常用的,例如:你粉欢以下哪些会员?

然后点击其中任何一个图片,就会作出相应选择,后台数据库也 save 一下。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号