Rails 3 + 简单表单 + 引导单选和复选框作为按钮，带切换功能答案

【问题标题】：Rails 3 + simple form + bootstrap Radio and checkbox as button w/ toggle functionRails 3 + 简单表单 + 引导单选和复选框作为按钮，带切换功能
【发布时间】：2014-09-08 09:47:41
【问题描述】：

我正在尝试让我的收音机和复选框作为带有切换功能的按钮工作，如 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>

这是我为 btn-toggle 定制的 CSS：

.btn-toggle input {
    display: none;
}

感谢任何帮助。

【问题讨论】：

标签： ruby-on-rails-3 twitter-bootstrap simple-form

【解决方案1】：

根据 Nickl 的回答进行构建并进行调整以不需要额外的 Javascript 并呈现 Bootstrap 当前期望的相同语义 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 中的单选按钮示例一样呈现代码。

【讨论】：

要使其适用于任何模型，您需要在输入的名称属性中添加“model_name”，即<input type="radio" value="#{value}" name="#{@builder.object.class.to_s.downcase}[#{attribute_name}]">

【解决方案2】：

这是我们需要的引导单选按钮缺少的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 sn-p 会产生一个三个单选按钮组

first 按钮样式为btn-primary，标签blue 和值1
第二个按钮样式为btn-danger，标签为red，值2
第三个按钮样式为btn-success，标签green，值3

由于我们没有分配值 (input_html: {value: 1})，最后一个按钮将被激活（与普通单选按钮的行为相同），rad_buttons 的值将是 3

开心！

【讨论】：

【解决方案3】：

您还可以通过一些不显眼的 JavaScript 来使用隐藏的输入字段。将隐藏字段与 twitter 引导工具按钮放在 *.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'))

希望这会有所帮助。

【讨论】：