Rails 3 + formulaire simple + bootstrap Radio et case à cocher comme bouton avec fonction de basculement

Question

J'essaie de faire fonctionner mes radios et mes cases à cocher comme des boutons avec la fonction de basculement, comme on le voit sur la page bootstrap de Twitters. lien !

J'ai réussi à faire en sorte que ces boutons apparaissent et fonctionnent avec la base de données, mais lorsque l'utilisateur revient sur la page, ils ne sont pas basculés. Je me demandais si c'était possible ou non. Si oui, comment puis-je l'implémenter dans mon code ? J'utilise simple_form + twitter bootstrap.

Voici le code que j'utilise pour afficher le bouton radio :

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

Et voici le code pour le bouton checkbox :

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

Voici le fichier css personnalisé que j'ai pour btn-toggle :

.btn-toggle input {
    display: none;
}

Toute aide est appréciée.

Answer 1

En me basant sur la réponse de Nickl et en modifiant les choses pour ne pas nécessiter de Javascript supplémentaire et pour rendre le même HTML sémantique que celui attendu par Bootstrap, voici ma solution :

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

Et ensuite, pour l'utiliser, vous devez utiliser SimpleForm comme tel :

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

Cela rendra le code exactement comme les exemples de boutons radio de la section La page des composants propres à Bootstrap .

Answer 2

Vous pouvez également utiliser un champ de saisie caché avec un peu de JavaScript discret. Placez le champ caché avec les boutons twitter bootstrap toogle dans votre *.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>

Dans votre *.js.coffee, définissez simplement le bouton actif et la valeur de l'entrée :

# 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'))

J'espère que cela vous aidera.

Answer 3

Voici l'élément manquant simple_form input dont nous avons besoin pour les boutons radio de bootstrap.

# 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

Il prend en charge tout as: :radio_buttons acceptera avec l'ajout d'un 3ème argument optionnel pour les styles de boutons.

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

Le snippet haml ci-dessus produira un groupe de trois boutons radio.

• premièrement bouton stylé en btn-primary avec l'étiquette blue et la valeur 1
• deuxième bouton stylé en btn-danger avec l'étiquette red et la valeur 2
• troisième bouton stylé en btn-success avec l'étiquette green et la valeur 3

Comme nous n'avons pas attribué de valeur ( input_html: {value: 1} ), le dernier bouton sera rendu actif (le même comportement que pour les boutons radio normaux) et la valeur de rad_buttons sera 3

nJoy !