gpt4 book ai didi

ruby-on-rails-3 - Rails 3 + 简单表单 + Bootstrap 单选和复选框作为按钮,带切换功能

转载 作者:行者123 更新时间:2023-12-04 23:25:26 25 4
gpt4 key购买 nike

我正在尝试让我的 radio 和复选框作为带有切换功能的按钮工作,如 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;
}

任何帮助表示赞赏。

最佳答案

从 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 中的单选按钮示例一样呈现代码.

关于ruby-on-rails-3 - Rails 3 + 简单表单 + Bootstrap 单选和复选框作为按钮,带切换功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13806594/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com