4

ラジオとチェックボックスを、Twitterのブートストラップページに表示されるトグル機能付きのボタンとして機能させようとしています。リンク！

私はどういうわけかそれらのボタンをデータベースで表示して機能させることができましたが、ユーザーがページに戻ったときにそれらは切り替えられません。それが可能かどうか疑問に思いました。はいの場合、コードにそれを実装するにはどうすればよいですか？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;
}

どんな助けでも大歓迎です。

4

3 に答える 3

4

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独自のコンポーネントページのラジオボタンの例と同じようにコードがレンダリングされます。

于 2014-09-08T01:47:41.713 に答える
2

控えめなJavaScriptで非表示の入力フィールドを使用することもできます。隠しフィールドを*.html.erbのtwitterブートストラップtoogleボタンと一緒に配置します。

<%= 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'))

お役に立てれば。

于 2013-02-20T20:27:11.113 に答える
2

simple_form inputこれが、ブートストラップラジオボタンに必要な欠落です。

# 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ボタンスタイルのオプションの3番目の引数を追加して、受け入れるすべてのものをサポートします。

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

上記のhamlスニペットは、3つのラジオボタングループを生成します

  • btn-primaryラベルblueと値でスタイル設定された最初のボタン1
  • btn-dangerラベルredと値でスタイル設定された2番目のボタン2
  • btn-successラベルgreenと値でスタイル設定された3番目のボタン3

値（）を割り当てなかったためinput_html: {value: 1}、最後のボタンがアクティブになり（通常のラジオボタンの場合と同じ動作）、の値は次のrad_buttonsようになります。3

nJoy！

于 2013-10-11T10:30:37.003 に答える