0

On Rails 4. 指定された配色に従ってグラフィックス/製品を検索できるサイトを構築しています。関連モデル:

class Product < ActiveRecord::Base 
  belongs_to :color_scheme
end

class ColorScheme < ActiveRecord::Base 
  has_many :products
end

各配色には、列として 5 つの色の 16 進数値があります。Bootstrap を使用すると、コードは次のようになりますcollection_select。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
  data-toggle="dropdown" aria-expanded="true" style="width:100%; margin-bottom:20px;">
    <%= t('template.scheme')%> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <% @color_schemes.where(enabled: true).each do |scheme| %>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">
        <div style="width:30px; height: 20px; display: inline-block;
          background-color:#<%=scheme.color1%>;"></div>
        <div style="width:30px; height: 20px; display: inline-block;
          background-color:#<%=scheme.color2%>;"></div>
        <div style="width:30px; height: 20px; display: inline-block;
          background-color:#<%=scheme.color3%>;"></div>
        <div style="width:30px; height: 20px; display: inline-block;
          background-color:#<%=scheme.color4%>;"></div>
        <div style="width:30px; height: 20px; display: inline-block;
          background-color:#<%=scheme.color5%>;"></div>
      </li>
    <% end %>
  </ul>
</div>

そして、これは視覚的な結果です:

ここに画像の説明を入力

私はランサックを使用しており、これは検索用のドロップダウンであるため、これを に変換しましたcollection_selectが、同じ視覚効果を得る方法がわかりません。

<%= f.collection_select :color_scheme_id_eq, ColorScheme.order('created_at DESC').all, :id, 
  :name, {include_blank: t('template.scheme')}, {class: 'form-control select-scheme', 
  style: 'width:100%; margin-bottom:20px;'} %>

そのため、配色のテキスト名を表示するだけでなく、上記のように色を表示したいと思います。これはおそらくコレクションの選択の範囲外であることは理解していますが、色は名前よりも視覚的に意味があると思います. collection_selectこれは、ランサックで動作するタグまたは他のタグを介して可能ですか? ありがとう！編集：色盲の人などのために、色の右側に配色の名前がまだ残っている可能性があることも付け加えておく必要があります.

4

1 に答える 1

1

別の提案があります：

  • 選択フィールドの上に配色を持つdivを作成します
  • 次に、各配色のJavaScriptクリックイベントを使用して、選択フィールドに値を設定します

この問題を解決するためのコード サンプルを次に示します。

.col-sm-3
  #color-label-project{style: 'text-align: center;'}
    - t('labels.project.label_color_hashes').map do |k, v|
      %span{style: "width:30px; height: 20px; display: inline-block; background-color: #{v};", id: "#{k}", 'data-value': "#{k}"}
  = f.input :label_color, collection: Project::LABEL_COLOR_NAME, prompt: true, disabled: false, label: false

:javascript
  $("#color-label-project span").bind('click', function(){
      $('select[name="project[label_color]"]').val($(this).data("value"));
  })

これが私のやり方です：

ここに画像の説明を入力

于 2016-04-19T02:05:30.917 に答える