2

我正在尝试使用input-appendTwitter Bootstrap 的功能。但是,我想尝试使用simple_form.

<div class="control-group string required">
 <label class="string required control-label" for="video_company_id"><abbr title="required">*</abbr> Company</label>
  <div class="controls">
    <div class="input-append">
      <%= f.text_field  :company_id, :class => "span2" %>
        <span class="add-on"><%= link_to image_tag('/assets/button/magnifier.png'), "#select_company", :"data-toggle" => "modal" %></span>
    </div>
  </div>
</div>

产量

在此处输入图像描述

simple_form用using写这个更好的方法是什么f.input

编辑到 mdepolli

谢谢mdepolli。这确实让我更接近我需要去的地方。但是,它只是将查找嵌入到表单中,而不是“附加组件”。

  <%= f.input  :company_id, :as => :string, :class => "span2", :wrapper_html => { :class => "input-append"} %>
  <%= link_to image_tag('/assets/button/magnifier.png'), "#select_company", :"data-toggle" => "modal", :class => "add-on", :wrapper_html => { :class => "input-append"} %>

在此处输入图像描述

再次编辑content_tag,它将它带到单独的行 在此处输入图像描述

4

1 回答 1

4

首先,让我们在 SimpleForm 初始化程序中创建一个自定义包装器。

config/initializers/simple_form.rb

config.wrappers :append, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.wrapper :tag => 'div', :class => 'controls' do |input|
    input.wrapper :tag => 'div', :class => 'input-append' do |append|
      append.use :input
    end
    input.use :hint,  :wrap_with => { :tag => 'span', :class => 'help-block' }
    input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
  end
end

现在让我们回到你的表格。请务必替换@model为附加到您正在使用的 ActiveRecord 模型的实际实例变量。

<%= simple_form_for @model do |f| %>
  <%= f.input :company_id, :wrapper => :append do %>
    <%= f.input_field :company_id %>
    <%= content_tag :span, link_to(image_tag('/assets/button/magnifier.png'), "#select_company", :"data-toggle" => "modal"), :class => 'add-on' %>
  <% end %>
  <%= f.button :submit %>
<% end %>

编辑:对不起,我花了一点时间,最后不得不制作一个自定义包装器。

于 2013-01-26T21:46:14.430 回答