Rails simple_form 在 f.input 的前面加上 glyicon ?

chengkai1853 · 2015年07月31日 · 最后由 hz_qiuyuanxin 回复于 2015年08月03日 · 2800 次阅读

在 rails 项目中安装了 gem 'simple_form', '~> 3.1.0.rc1', github: 'plataformatec/simple_form', branch: 'master' gem 'bootstrap-sass', '~> 3.3.5' 自己在调整登陆界面的时候,想在输入框的前面加载用户名和密码的 icon,用 bootstrap 的 glyicon. 类似这样 但是怎么弄都打不到效果。Google 了好多,有人说利用如下方式来做

<%= f.input :notary_name,:label => 'Notary', :input_html => {:class => "span4"}, :wrapper => :prepend do %>
  <span class="add-on"><i class="icon-search"></i></span><%= f.input_field :notary_name, :class => "span4 typeahead" %>
<%end%>

但是 simple_form_bootstrap.rb 中没有 prepend 的方法,于是界面就报“Couldn't find wrapper with name append”的错误,求解决方法啊。怎么实现那种效果。

本人新手,刚刚看完一本书,想写写东西试试。刚刚开始就遇到这样问题,感觉是最基础的知识,结果都被折磨了一天,莫名觉得前路漫漫啊。跪求!

下面是登陆界面的代码:

<%= render 'users/shared/header' %>

<div class="container">
<h2>Log in</h2>
<div class="row">
    <div class= "col-md-6 col-md-offset-3">
      <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'form-vertical' }) do |f| %>
        <div class="form-inputs">
          <%= f.input :email, required: false, autofocus: true, :wrapper => :append do%>
            <%= f.input_field :email %>
            <%= icon "envelope" %>
          <% end %>
          <%= f.input :password, required: false %>
          <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
        </div>

        <div class="form-actions">
          <%= f.button :submit, "Log in" ,class:"btn btn-primary"%>
        </div>
      <% end %>

      <%= render "users/shared/links" %>
    </div>
  </div>
</div>

最简单地,先自己手写,然后自己调一调样式

<div class="form-group">
  <label for="notary_name">Notary</label>
  <span class="add-on"><i class="icon-search"></i></span>
  <%= f.input_field :login, class: "span4 typeahead"   %>
</div>

你要是想用 wrapper,那得自己实现一个 input,但是如果只有个别地方有,我觉得你可以先手动写写好了,毕竟 simple_form 也就是抽象出了 wrapper 的概念,然后帮你输出一些 html。

如果你想深入了解 simple_form,simple_form 有许多文档,先通读上一遍。 https://github.com/plataformatec/simple_form/wiki

另外,我觉得你还可能需要再看看 Rails form_for 的文档,因为 simple_form_for 就是基于 form_for 的。 http://guides.rubyonrails.org/form_helpers.html http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html

我前阵子写了关于 simple_form 的博文,你可以在有一定的实践之后参考参考,文章里面讲了

  • 简单介绍 SimpleForm 做了什么事情
  • 如何编写一个简单的 wrapper
  • 从 simple_form_for 这个入口了解 SimpleForm 的基本工作原理
  • 了解 wrapper 的实现

http://justqyx.github.io/blog/2015/05/31/inspect-simple-form-1/ http://justqyx.github.io/blog/2015/05/31/inspect-simple-form-2/

如果有关于这两篇博文的问题,也欢迎在博文下面的评论留言。

新手为什么要用 complicate_form?

建议新手用 Rails 默认的方法手写 Form。 直到搞清实现原理,无障碍阅读 gem 的源码后,再根据自己的需求选择。

#1 楼 @hz_qiuyuanxin 非常感谢,看来还是得从基础做起了,熟悉了之后,以后再用这些插件了。自己 IOS 开发 3 年多了,想着扩充自己知识面,业余接触 ruby 也有差不多一年了,接触 rails 不久,顺便弱弱的问问,rails 大概学多久能稍微顺畅的开发网站啊?

#4 楼 @chengkai1853 这个我也不知道,看个人能力

需要 登录 后方可回复, 如果你还没有账号请 注册新账号