基本表单

  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. 块级表单

描述文字比较长时使用此类样式
$
KG
发送验证码
        
# 以上展示的是块级表单, 此表单特点是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": "文件路径" } %>