2013-07-15 46 views
0

有谁知道如何写bootstrap-switchsimple_form包装?用于自举开关的导轨简单形式包装?

生成的HTML需要看起来像这样:

<div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
     <input type="text" id="inputEmail" placeholder="Email"> 
    </div> 
</div> 
+0

你想使用包装引导程序开关和生成的HTML。我发现[form-horizo​​ntal original bootstrap](http://twitter.github.io/bootstrap/base-css.html#form-horizo​​ntal)和[form-horizo​​ntal bootstrap switch](http:// www。 larentis.eu/switch/#form-horizo​​ntal) –

回答

-3

simple_form有内置自举插件检查出来here

+0

是的,我正在使用它,但我需要一个自举开关的包装。 – CoderDave

2

我不明白你将如何使用引导开关脚本的文本字段。尽管如此,有些人可能会在这里以与标题中所提问题相同的问题结束。

您可以简单地复制引导包装,并添加所需的类:

config.wrappers :bootstrap_switch, tag: 'div', class: "control-group", error_class: 'error', boolean_style: :inline do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label 
    b.wrapper tag: 'div', class: 'controls' do |ba| 
    ba.wrapper "switch", tag: 'div', class: 'switch' do |s| 
     s.use :input 
    end 
    ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
    ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
end 

这将创建一个具有一流的“开关”(因此由脚本风格化)嵌套式div。这个内部包装有命名空间“开关”,它使我们能够设置一些选项:

f.input :inputField, :wrapper => :bootstrap_switch, :switch_html => { :data => { on: "success", on_label: "<i class='icon-ok icon-white'></i>", off: "warning", off_label: "<i class='icon-remove'></i>" } }