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を使用してこれを記述するより良い方法は何f.inputですか?

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 に答える