-
添加
gem# Gemfile中 gem 'bootstrap-sass' gem 'simple_form' -
配置
bootstrap# assets/stylesheets/application.css.scss中增加 @import "bootstrap-sprockets"; @import "bootstrap"; # assets/javascripts/application.js中增加(建议添加上jquery_ujs后） //= require bootstrap -
安装
simple_formrails g simple_form:install --bootstrap -
修改一下
layouts/application.html.erb<body class="controller_name"> <div class="container master-container"> <% if notice %> <div class="alert alert-success fade in" data-alert="alert"> <a class="close" data-dismiss='alert' href="#">×</a> <p><%= notice %></p> </div> <% end %> <%= yield %> </div> </body> -
rails g scaffold Blog title content:text，然后查看views/blogs/_form.html.erb的内容。 -
稍微修改一下：
<%= simple_form_for(@blog) do |f| %> <%= f.error_notification %> <div class="form-inputs"> <%= f.input :title, label: '标题', placeholder: "请输入标题", error: "标题不能为空", input_html: { maxlength: 20 }, hint: '标题最多20个字' %> <%= f.input :content, label: '内容', hint: '腹有诗书气自华', error: "内容不能为空" %> </div> <div class="form-actions"> <%= f.button :submit %> </div> <% end %>
simple_form
一些用法
-
collection_radio_buttons：
<%= f.collection_radio_buttons :is_open, [[1, '所有人都能看'] ,[0, '只能自己看']], :first, :last,
checked: (@blog.is_open.nil? ? 0 : @blog.is_open) %>
其中`[[1, '所有人都能看'] ,[0, '只能自己看']]`表示radio的value和text。`:first`表示`value`的值， `:last`表示`text`的值，`checked`表示默认哪一个`radio`被选中。
还可以这样写：
<%= f.collection_radio_buttons :is_open, @blog.all, :id, :title %>
类似的还有`collection_check_boxes`
- `input_html: {value: value}`可以指定`input`中的值
<%= f.input :tag_list, input_html: { value: @blog.tag_list.join(",") }, label: 'tags', placeholder: "输入tags，用‘，’分开." %>
- 预先选择checkbox，使用`checked: ["check001", true]`参数，当然也可以预先选择多个选项。
<%= f.collection_check_boxes :tags, current_user.blogs.tag_counts.all, :name, :name, checked: @blog.tag_list.to_a << true %>
其中`@blog.tag_list.to_a << true`是一个数组，并且最后一个元素为`true`，这样表示`@blog.tag_list.to_a`数组中的所有元素都会被预先选择上
- 不显示`label`，使用`label: false`参数，如果不写`label`参数，会默认生成。
网友评论