1. 安装Gem包
gem 'formtastic'
$ rails g formtastic:install
在application.css中添加
*=require formtastic*=require my_formtastic_changes
2. 新建Model
classCreateUsers<ActiveRecord::Migrationdefchangecreate_table:usersdo|t|t.text:namet.string:desct.timestamps null:falseendendend
3. 使用
<%= semantic_form_for @user do |f| %>
<%=f.inputs:name,:desc,:created_at%>
<%= f.actions :submit, :cancel %><%end%>
自动识别类型(时间如下)

shijian.png
4. 更常用
<%= semantic_form_for @user do |f| %>
<%=f.inputs'基本信息',:id=>'basic_info'do%>
<%= f.input :name, :as =>:string%>
<%= f.input :desc %><%= f.input :created_at %>
<% end %>
<%=f.actionsdo%>
<%= f.action :submit, :as =>:button%>
<%= f.action :cancel, :as =>:link%>
<% end %><%end%>
<%=f.inputs:name=>'基本信息',:id=>'basic_info'do%>修改id<%=f.input:name,:label=>'姓名',:as=>:string%>更改label
inputs可以设置一些常用的参数
:name 设置标签
:id 设置html的id
input可以设置一些常用的参数
:as ->(:radio, :string, :select, :check_boxes, :boolean, :datalist)
:label 设置字符串
:hint 设置字符串
:required (false true)
:input_html 设置Hash =>{:size=>10, :class=>'autogrow'}
:wrapper_html 设置Hash=> { :style => "display:none;" },给input一 个<li>标签包围。
action可以设置属性
:button_html 设置Hash
5. 对象嵌套
新建一个Modal,Article。
classCreateArticles<ActiveRecord::Migrationdefchangecreate_table:articlesdo|t|t.string:titlet.text:contentt.integer:user_idt.timestamps null:falseendendend
建立关联
classUser<ActiveRecord::Basehas_many:articlesaccepts_nested_attributes_for:articlesend
classArticle<ActiveRecord::Basebelongs_to:userend
view中显示
<%= semantic_form_for @user do |f| %>
<%=f.inputs:name=>'基本信息',:id=>'basic_info'do%>
<%= f.input :name, :label=>'姓名',:as=>:string%>
<%= f.input :desc, :as =>:string%>
<%= f.input :created_at %><%end%>
###############嵌套属性##########################
<%= f.semantic_fields_for :articles do |article| %><%= article.inputs :title %>
<%=article.inputs:content%>
<!-- <%= article.inputs :title, :content, :name=>'文章'%>--><%end%>
###############嵌套属性##########################
<%= f.actions do %><%= f.action :submit, :as =>:button%>
<%= f.action :cancel, :as =>:link%>
<% end %><%end%>
6. 设置命名空间控制id
<%= semantic_form_for(@post, :namespace =>'cat_form')do|f|%>
<%= f.inputs do %><%= f.input :title %> # id="cat_form_post_title"<%= f.input :body %> # id="cat_form_post_body"<%= f.input :created_at %> # id="cat_form_post_created_at"<%end%>
<%= f.actions %><%end%>
7. 其他嵌套
<%= f.input :articles, :as =>:radio,:collection=>@user.articles.all%>
8. 其他input
:select
:check_boxes
:radio
:time_zone
:password
:text
:date_select
:datetime_select
:time_select
:boolean
:string
:number
:file
:country
:url
:phone
:search
:hidden
:range
:datalist
:image_upload
9. 本地化
使用顺序
:label
Formtastic i18n
Activerecord i18n
label_str_method
10. 小知识
<%=semantic_form_for(@post,:namespace=>'cat_form')do|f|%><%f.object%><!--获取对象--><%end%>
网友评论