基本表单
simple_form_for 指定wrapper 为 eop_frontend
rails 代码: <%= simple_form_for "#", wrapper: "eop_frontend" do | f | %> ...... <%= end %>html 及 css 部分说明 :
eop_frontend 模板 提供了两种表单布局: 块级与内联 (form-inputs & form-inputs-inline)
form-inputs 是块级 form-inputs-inline 是内联
单选/多选/文件上传 在内联与块级中显示效果一致
文件上传时如需要把文件显示 出请添加data属性file-url
1. 块级表单
# 以上展示的是块级表单, 此表单特点是lable 与 input 在同一行
代码如下:<div class="form-inputs"> <%= f.input :example_1, label: "基本输入框", hint: "描述文字比较长时使用此类样式", placeholder: "提示输入内容" %> <%= f.input :example_3, label: "单位输入框", unit: "$" %> <%= f.input :example_3, label: "单位输入框", unit: "KG" %> <%= f.input :example_4, label: "按键输入框", btn: "发送验证码", wrapper_html: {class: "button-input"} %> </div># 注意:
带有单位的输入框要加 unit 属性
带有按键的输入框要加 btn 属性,并且需要添加外层样式 wrapper_html: {class: "button-input"}
!!!!请不要给块级表单添加删格 (col-lg 系列)
2. 内联表单
# 以上展示的是内联表单, 此表单特点是lable 与 input 各占一行
内联表单支持栅格系统 ( col-lg )
代码如下:<div class="form-inputs-inline"> <%= f.input :example_2, label: "基本输入框" %> <%= f.input :example_2, label: "文件", as: :file, input_html: {"data-file-url": "文件路径" },hint: "请选择导入的文件。 如果需要模版文件请" %> <%= f.input :example_2, label: "带栅格的输入框", wrapper_html: {class: "col-lg-2"} %> </div># 注意:
内联表单暂不支持带有单位的输入框 如: unit, btn等属性
内联表单适合搜索类布局
表单中插件的使用:
发送验证码需要在页面下文注入以下js
$(selector).verifyCode({ time: 10, //倒计时时间, 默认60,可不填 url: "/v_code", //请求的地址 必填 text: "请等待", // 倒计显示的文本 请等待(time),默认当前标签文本,可不填 params_id: "#phone" // 手机号表单的id或class,如果是class 就是".selector", 必填 request_type: "post", //请求方式, 默认post, 可不填 date_type: "json" // 数据类型, 默认json, 可不填 }, function(a){alert(a) }// 回调,默认无动作 )时间,日期选择
<%= f.input :time, label: "日期+时间", input_html: { class: 'datetimepicker'} %>
<%= f.input :time, label: "日期", input_html: { class: 'datetimepicker_data'} %>
<%= f.input :time, label: "时间", input_html: { class: 'datetimepicker_time'} %>
文件上传
<%= f.input :file, label: "文件", as: :file, input_html: {"data-file-url": "文件路径" } %>