0

simple_form_for を使用して、カラー セレクターのようなものを作成するにはどうすればよいでしょうか? ユーザーがチェックボックスをチェックすることで、使用する色の数を選択できるページを想像してください。ユーザーがチェックボックスをオンにして色を選択できるように、色が入った小さなボックスとその横にチェックボックスを表示したいと思います。このようなもの

<input type="checkbox" name="colors[test]"><div style="background-color: red; width: 20px; height: 20px"></div>
<input type="checkbox" name="colors[test]"><div style="background-color: green; width: 20px; height: 20px""></div>
<input type="checkbox" name="colors[test]"><div style="background-color: blue; width: 20px; height: 20px""></div>
4

1 に答える 1

2

コレクションに html タグを追加し、それぞれのクラスを定義できます。そして、それに応じてスタイルを設定します。simple_form_for @colorまたは似たようなものを持っていると思います。

<%= f.input :test, :label => 'Choose a Color:', :collection =>{'<div class="red colorbox"></div>'.html_safe => 'red', '<div class="green colorbox"></div>'.html_safe => 'green', '<div class="blue colorbox"></div>'.html_safe => 'blue' }, :as => :check_boxes %>

スタイルシートで:

/* The colorbox will be under a label with collection_check_boxes class.*/
.collection_check_boxes {
  width: 30px;
  height: 20px;
}

.colorbox {
  width: 20px;
  height: 20px;
}

.red {background: red;}
.green {background: green;}
.blue {background: blue;}
于 2013-03-02T06:46:48.227 に答える