ruby-on-rails-3 – Rails 3简单形式bootstrap Radio和复选框作

发布时间：2020-12-17 03:39:15 所属栏目：百科来源：网络整理

导读：我试图让我的无线电和复选框作为按钮与切换功能一起工作,如twitters bootstrap页面上所示. link！我已经设法让这些按钮出现并与数据库一起运行,但是当用户返回页面时,它们不会被切换.我想知道这是否可能.如果是,我如何在我的代码上实现它？我正在使用simple

我试图让我的无线电和复选框作为按钮与切换功能一起工作,如twitters bootstrap页面上所示. link！

我已经设法让这些按钮出现并与数据库一起运行,但是当用户返回页面时,它们不会被切换.我想知道这是否可能.如果是,我如何在我的代码上实现它？我正在使用simple_form twitter bootstrap.

这是我用来显示单选按钮的代码：

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

任何帮助表示赞赏.

解决方法

这是引导单选按钮所需的缺少simple_form输入.

# 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

它支持以下所有内容：：radio_buttons将接受为按钮样式添加可选的第3个参数.

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

上面的haml片段将生成一个三个单选按钮组

>第一个按钮样式为btn-primary,标签为蓝色,值为1
>第二个按钮设置为btn-danger,标签为红色,值为2
>第三个按钮设为btn-success,标签为绿色,值为3

由于我们没有赋值(input_html：{value：1}),最后一个按钮将被激活(与普通单选按钮的行为相同),rad_buttons的值将为3

的nJoy！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!