智慧云企业开放平台前端文档

基本表单

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": "文件路径" } %>