SIMPLE_FORM集合包装(单选按钮):项目的双重封装 [英] simple_form collection wrapper (radios buttons) : double encapsulation of items
本文介绍了SIMPLE_FORM集合包装(单选按钮):项目的双重封装的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用Simple_Form重现此单选按钮的html序列,以便使Simple_Form使用http://semantic-ui.com/语法:
<div class="grouped inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" checked="">
<label>Apples</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit">
<label>Oranges</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit">
<label>Pears</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit">
<label>Grapefruit</label>
</div>
</div>
</div>
所以我准备了一个定制的包装器:
config.wrappers :semantic_radios, tag: 'div', class: "grouped fields", error_class: 'error', hint_class: 'with_hint' do |b|
b.use :html5
b.use :label
b.use :input
end
设置一些选项:
config.item_wrapper_tag = :div
config.item_wrapper_class = 'ui radio checkbox'
并在我的表单中调用此代码:
=f.input :child_care_type, collection: [["option 1", 1],["option 2", 2]], as: :radio_buttons, wrapper: :semantic_radios
我不知道在哪里自定义div.field封装:
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fruit" checked="">
<label>Apples</label>
</div>
</div>
我的代码仅呈现以下内容:
<div class="ui radio checkbox">
<input type="radio" name="fruit" checked="">
<label>Apples</label>
</div>
你能帮我吗?我没有找到更多集合的包装自定义:s
推荐答案
摘要:
我以前做过类似的事情,创建了一个继承自SimpleForm::Inputs::CollectionRadioButtonsInput
的自定义输入,并重载了几个方法。有关自定义输入组件的详细信息,请参阅https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components。
在任何情况下,下面的代码几乎完全使用Simple_Form v2.1.0和rails v3.2.15生成所需的html标记。
代码:
# File: app/inputs/semantic_ui_radio_buttons_input.rb
class SemanticUiRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput
# Creates a radio button set for use with Semantic UI
def input
label_method, value_method = detect_collection_methods
iopts = {
:checked => 1,
:item_wrapper_tag => 'div',
:item_wrapper_class => 'field',
:collection_wrapper_tag => 'div',
:collection_wrapper_class => 'grouped inline fields'
}
return @builder.send(
"collection_radio_buttons",
attribute_name,
collection,
value_method,
label_method,
iopts,
input_html_options,
&collection_block_for_nested_boolean_style
)
end # method
protected
def build_nested_boolean_style_item_tag(collection_builder)
tag = String.new
tag << '<div class="ui radio checkbox">'.html_safe
tag << collection_builder.radio_button + collection_builder.label
tag << '</div>'.html_safe
return tag.html_safe
end # method
end # class
然后,在您的表单中,只需执行以下操作:
-# File: app/views/<resource>/_form.html.haml
-# Define the collection
- child_care_coll = %w( Infant Toddler Preschool Kindergarten ).map!.with_index(1).to_a
-# Render the radio inputs
= f.input :child_care_type,
:collection => child_care_coll,
:label_method => :first,
:value_method => :last,
:as => :semantic_ui_radio_buttons
结果:
<div class="input semantic_ui_radio_buttons optional childcare_child_care_type">
<label class="semantic_ui_radio_buttons optional control-label">
Child care type
</label>
<div class="grouped inline fields">
<div class="field">
<div class="ui radio checkbox">
<input checked="checked" class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_1" name="childcare[child_care_type]" type="radio" value="1">
<label for="childcare_child_care_type_1">Infant</label>
</div>
</div>
...
<div class="field">
<div class="ui radio checkbox">
<input class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_4" name="childcare[child_care_type]" type="radio" value="4">
<label for="childcare_child_care_type_4">Kindergarten</label>
</div>
</div>
</div>
</div>
这篇关于SIMPLE_FORM集合包装(单选按钮):项目的双重封装的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文