Rails 3 +簡單的形式+引導無線電和複選框作爲按鈕w /切換功能

Question

我想讓我的無線電和複選框作爲按鈕w /切換功能，如在twitters引導頁面上看到的。 link！

我以某種方式設法讓這些按鈕出現，並與數據庫功能，但是當用戶返回到頁面時，他們不會切換。我想知道這是否可能。如果是的話，我怎樣才能在我的代碼上實現？我正在使用simple_form + twitter引導。

這裏是我用來顯示的單選按鈕的代碼：

<div class="btn-group" data-toggle="buttons-radio"> 
<%= f.input :child_gender, :label => "Child gender?", :collection => [['Boy', 'Boy'], ['Girl', 'Girl'], :as => :radio_buttons, :input_html => { :data => {:toggle => 'buttons-radio'} }, :item_wrapper_class => 'btn btn-toggle btn-small inline' %> 
</div> 

這裏是複選框按鈕的代碼：

<div class="btn-group"> 
<%= f.input :child_size, :label => "What size?", :collection => child_size, :as => :check_boxes, :input_html => { :data => {:toggle => 'buttons-checkbox'} }, :item_wrapper_class => 'btn btn-toggle btn-small' %> 
</div> 

這裏是自定義CSS我有btn-toggle ：

.btn-toggle input { 
    display: none; 
} 

任何幫助表示讚賞。

Answer 1

下面是缺少的simple_forminput我們需要的引導單選按鈕。

# lib/inputs/button_radio_input.rb 
class ButtonRadioInput < SimpleForm::Inputs::CollectionRadioButtonsInput 
    def input 
    out = <<-HTML 

<div class="btn-group" data-toggle="buttons-radio"> 
HTML 
    input_field = @builder.hidden_field(attribute_name, input_html_options) 
    input_id = input_field[/ id="(\w*)/, 1] 
    label_method, value_method = detect_collection_methods 
    collection.each {|item| 
     value = item.send(value_method) 
     label = item.send(label_method) 
     on_click = "document.getElementById('#{input_id}').value='#{value}';return false;" 
     active = '' 
     active = ' active' unless 
      out =~/active/ || 
      input_html_options[:value] != value && 
      item != collection.last 
     input_html_options[:value] = value unless active.empty? 
     btn = 'btn' 
     btn = "btn btn-#{item.third}" unless item.third.nil? 
     out << <<-HTML 
    <button onclick="javascript:#{on_click}" type="button" class="#{btn}#{active}">#{label}</button> 
HTML 
    } 
    value = <<-VAL 
value="#{input_html_options[:value]}" 
VAL 
    input_field[/value="[^"]*"/] = value.chomp if input_field =~ /value/ 
    input_field[/input/] = "input #{value.chomp}" unless input_field =~ /value/ 
    out << <<-HTML 
    #{input_field} 
</div> 
HTML 
    out.html_safe 
    end 
end 

它支持一切as: :radio_buttons將接受爲按鈕樣式添加一個可選的第三個參數。

= f.input :rad_buttons, 
    as: :button_radio, 
    collection: [ [:blue, 1, :primary], 
    [:red, 2, :danger], 
    [:green, 3, :success], 
    ] 

引入haml片段上方會產生三個無線電按鈕組

• 第一按鈕風格到btn-primary與標籤blue和值1
• 第二按鈕風格到btn-danger與標籤red和值2
• 第三按鈕風格到btn-success與標籤​​和值3

由於我們沒有指定一個值（input_html: {value: 1}）的最後一個按鈕將被製成活性（相同的行爲作爲正常單選按鈕）並且rad_buttons的值將是3

nJoy！

Answer 2

您還可以使用隱藏的輸入字段與一些不顯眼的JavaScript。 與Twitter的引導的toogle按鈕把隱藏字段一起放進* .html.erb：

<%= f.hidden_field :child_gender %> 
<div id="gender-toggle" class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="btn" data-gender="boy">Boy</button> 
    <button type="button" class="btn" data-gender="girl">Girl</button> 
</div> 

在你* .js.coffee只是設置活動按鈕，並輸入值：

# Activate selected gender 
$("button[data-gender=" + $('#hidden_field_id').val() + "]").addClass('active') 

# Set gender value 
$("#gender-toggle button").click -> 
    $('#hidden_field_id').val($(this).data('gender')) 

希望這可以幫助。

Answer 3

建築物的NICKL的回答和調整的東西不需要額外的Javascript和渲染該引導目前預計語義相同的HTML，這裏是我的解決方案：

class ButtonRadioInput < SimpleForm::Inputs::CollectionRadioButtonsInput 
    def input 
    out = '<div class="btn-group" data-toggle="buttons">' 
    label_method, value_method = detect_collection_methods 
    collection.each do |item| 
     value = item.send(value_method) 
     label = item.send(label_method) 
     active = '' 
     active = ' active' unless 
      out =~/active/ || 
      input_html_options[:value] != value && 
      item != collection.last 
     input_html_options[:value] = value unless active.empty? 
     btn = 'btn' 
     btn = "btn btn-#{item.third}" unless item.third.nil? 
     out << <<-HTML 
     <label class="#{btn} #{active}">  
      <input type="radio" value="#{value}" name="#{attribute_name}">#{label}</input> 
     </label> 
HTML 
    end 
    out << "</div>" 
    out.html_safe 
    end 
end 

然後利用這一點，你會用SimpleForm這樣：

=f.input :role, label: false, as: :button_radio, 
        collection: [["Warm Up", :warm_up, :primary], 
           ["Small Sided", :small_sided, :primary], 
           ["Expanded", :expanded, :primary], 
           ["Game", :game, :primary]] 

，這會使得代碼就像從Bootstrap's own components page的單選按鈕的例子。