2011-10-20 8 views
5

Come posso creare un menu a tendina colori in ruby ​​su rails 3?Ruby on rails dropdown <select> menu - come stile o applicare classe alle opzioni?

so come farlo in HTML, CSS e JavaScript come segue, ma non so come in Ruby on Rails 3.

Idealmente utilizzando collection_select o collection_options_for_select altri oggetti da collezione che costruiscono <select> 's e <options>' s . Usando questi sarebbe preferibile per il looping manuale attraverso la collezione e sputando pezzi e lo styling di ogni pezzo anche se ciò potrebbe essere fatto.

Codice parziale di ciò che sto cercando di ottenere è:

<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> 

codice completo e ': http://pietschsoft.com/post/2004/09/20/Color-the-background-of-items-in-a-Dropdown-box-in-your-HTML-pages.aspx

risposta

4

Rails Helper options_for_select permette assolutamente di fornire informazioni styling per le singole opzioni.

Questo è retta dalla documentazione di 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> 

e

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> 

E nel tuo caso sarebbe

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

Funziona con Firefox, ma non Safari 5.1.4 su Mac 10.6.8 – gamov

2

Il costruito nel aiutanti non lo supportano per quanto ne so. Tuttavia si può rotolare il vostro proprio con:

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

e quindi utilizzarlo come segue:

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

Sì Essi permettono il supporto per opzioni di –