Блог

Как я могу создать выпадающее меню цветов в ruby on rails 3?

Я знаю, как это сделать в html, css и javascript следующим образом, но я не знаю, как в ruby on rails 3.

В идеале с помощью collection_select или collection_options_for_select другие объекты коллекции, которые создают <select> ‘s и <options> ‘s. Было бы предпочтительнее использовать их для ручного перебора коллекции, выделения фрагментов и стилизации каждого фрагмента, хотя это можно было бы сделать.

Часть кода того, что я пытаюсь получить, это:

 <select>
<option value="">Highlight</option>
<option value="#000000" style="background-color: Black;color: #FFFFFF;">Black</option>
<option value="#808080" style="background-color: Gray;">Gray</option>
<option value="#A9A9A9" style="background-color: DarkGray;">DarkGray</option>
  

Полный код находится по адресу:
http://pietschsoft.com/post/2004/09/20/Color-the-background-of-items-in-a-Dropdown-box-in-your-HTML-pages.aspx

Rails Helper options_for_select абсолютно позволяет вам предоставлять информацию о стиле для отдельных параметров.

Это прямо из документации options_for_select

   options_for_select([ "Denmark", ["USA", {:class=>'bold'}], "Sweden" ], ["USA", "Sweden"])
  

дает

   <option value="Denmark">Denmark</option>n<option value="USA" class="bold" selected="selected">USA</option>n<option value="Sweden" selected="selected">Sweden</option>
  

и

   options_for_select([["Dollar", "$", {:class=>"bold"}], ["Kroner", "DKK", {:onclick => "alert('HI');"}]])
  

дает

   <option value="$" class="bold">Dollar</option>n<option value="DKK" onclick="alert('HI');">Kroner</option>
  

И в вашем случае это было бы

 options_for_select([["Black", {:style => "background-color: Black; color: #ffffff"}],
                    ["Gray", {:style => "background-color: Gray"}],
                    ["DarkGray", {:style => "backgorund-color: DarkGray"}]])
  

Насколько я знаю, встроенные помощники не поддерживают его. Однако вы можете создать свой собственный с помощью:

 def options_colors(colors)
  colors.collect do |color, code| 
    "<option value='#{code}' style='background-color:#{code};'>#{color}</option> "
  end.join
end
  

а затем используйте его следующим образом:

 @colors = ["Red" => "#f00", "Blue" => "blue"]
select_tag("setting[bg_color]", options_colors(@colors))