WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
表单 - 页面元素

在一个容器中设定 class="wui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。
依赖加载模块:element 模块 (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能)
辅助文字
通过上述的小小演示,你已经大致了解了一波 wui 的表单模块,你可能会觉得她还算不错,但并不太过瘾?譬如你希望看到日期选择、图片上传等等。然而你必须认识到,本篇文档核心介绍的是表单元素,对于日期、上传等更多丰富的元素,其实也是可以很方便地穿插在内的。
下述是【小睹为快】的HTML结构:
<form class="wui-form" action="">
    <div class="wui-form-item">
        <label class="wui-form-label">输入框</label>
        <div class="wui-input-block">
            <input type="text" name="title" required  w-verify="required" placeholder="请输入标题" autocomplete="off" class="wui-input">
        </div>
    </div>
    <div class="wui-form-item">
        <label class="wui-form-label">密码框</label>
        <div class="wui-input-inline">
            <input type="password" name="password" required w-verify="required" placeholder="请输入密码" autocomplete="off" class="wui-input">
        </div>
        <div class="wui-form-mid wui-word-aux">辅助文字</div>
    </div>
    <div class="wui-form-item">
        <label class="wui-form-label">选择框</label>
        <div class="wui-input-block">
            <select name="city" w-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
    </div>
    <div class="wui-form-item">
        <label class="wui-form-label">复选框</label>
        <div class="wui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <input type="checkbox" name="like[dai]" title="发呆">
        </div>
    </div>
    <div class="wui-form-item">
        <label class="wui-form-label">开关</label>
        <div class="wui-input-block">
            <input type="checkbox" name="switch" skin="switch">
        </div>
    </div>
    <div class="wui-form-item">
        <label class="wui-form-label">单选框</label>
        <div class="wui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
    <div class="wui-form-item wui-form-text">
        <label class="wui-form-label">文本域</label>
        <div class="wui-input-block">
            <textarea name="desc" placeholder="请输入内容" class="wui-textarea"></textarea>
        </div>
    </div>
    <div class="wui-form-item">
        <div class="wui-input-block">
            <button class="wui-btn" w-submit w-filter="formDemo">立即提交</button>
            <button type="reset" class="wui-btn wui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
//Demo
wui.use('form', function(){
  var form = wui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>
UI的最终呈现得益于 Form 模块 的全自动渲染,她将原本普通的诸如select、checkbox、radio等元素重置为你所看到的模样。或许你可以移步左侧导航的 内置模块 中的 表单 对其进行详细的了解。
而本篇介绍的是表单元素本身,譬如规定的区块、CSS类、原始控件等。他们共同组成了一个表单体系。
下述是基本的行区块结构,它提供了响应式的支持。但如果你不大喜欢,你可以换成你的结构,但必须要在外层容器中定义class="wui-form",form模块才能正常工作。
<div class="wui-form-item">
  <label class="wui-form-label">标签区域</label>
  <div class="wui-input-block">
    原始表单元素区域
  </div>
</div>
<input type="text" name="title" required w-verify="required" placeholder="请输入标题" autocomplete="off" class="wui-input">
required:注册浏览器所规定的必填字段
w-verify:注册 form 模块需要验证的类型
class="wui-input":wui.css 提供的通用CSS类
这些在下文都不再做重复介绍
<select name="city" w-verify="">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>
上述 option 的第一项主要是占个坑,让 form 模块预留“请选择”的提示空间,否则将会把第一项(存在 value 值)作为默认选中项。你可以在 option 的空值项中自定义文本,如:请选择分类。

你可以通过设定 selected 来设定默认选中项:
<select name="city" w-verify="">
  <option value="010">北京</option>
  <option value="021" disabled>上海(禁用效果)</option>
  <option value="0571" selected>杭州</option>
</select>
你还可以通过 optgroup 标签给select分组:
<select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市?</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号?</option>
    <option value="你最喜欢的老师">你最喜欢的老师?</option>
  </optgroup>
</select>
以及通过设定属性 w-search 来开启搜索匹配功能
<select name="city" w-verify="" w-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
  ……
</select>
属性 selected 可设定默认项
属性 disabled 开启禁用,select 和 option 标签都支持
默认风格:
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>

原始风格:
<input type="checkbox" name="" title="写作" skin="primary" checked>
<input type="checkbox" name="" title="发呆" skin="primary">
<input type="checkbox" name="" title="禁用" skin="primary" disabled>
属性 title 可自定义文本(温馨提示:如果只想显示复选框,可以不用设置 title )
属性 checked 可设定默认选中
属性 skin 可设置复选框的风格
设置 value="1" 可自定义值,否则选中时返回的就是默认的on
其实就是checkbox复选框的“变种”,通过设定 skin="switch" 形成了开关风格
<input type="checkbox" name="xxx" skin="switch">
<input type="checkbox" name="yyy" skin="switch" w-text="ON|OFF" checked>
<input type="checkbox" name="zzz" skin="switch" w-text="开启|关闭">
<input type="checkbox" name="aaa" skin="switch" disabled>
属性 checked 可设定默认开
属性 disabled 开启禁用
属性 w-text 可自定义开关两种状态的文本
设置 value="1" 可自定义值,否则选中时返回的就是默认的on
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
属性 title 可自定义文本
属性 disabled 开启禁用
设置 value="xxx" 可自定义值,否则选中时返回的就是默认的on
<textarea name="" required w-verify="required" placeholder="请输入" class="wui-textarea"></textarea>
class="wui-textarea":wui.css提供的通用CSS类
-
<div class="wui-form-item">

  <div class="wui-inline">
    <label class="wui-form-label">范围</label>
    <div class="wui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="¥" autocomplete="off" class="wui-input">
    </div>
    <div class="wui-form-mid">-</div>
    <div class="wui-input-inline" style="width: 100px;">
      <input type="text" name="price_max" placeholder="¥" autocomplete="off" class="wui-input">
    </div>
  </div>

  <div class="wui-inline">
    <label class="wui-form-label">密码</label>
    <div class="wui-input-inline" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="wui-input">
    </div>
  </div>

</div>
class="wui-inline":定义外层行内
class="wui-input-inline":定义内层行内
你可以对表单元素增加属性 w-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格,比如:
<select w-ignore>
  <option>…</option>
</select>
一般不推荐这样做。事实上 form 组件所提供的接口,对其渲染过的元素,足以应付几乎所有的业务需求。如果忽略渲染,可能会让UI风格不和谐
辅助文字
通过追加 wui-form-pane 的 class,来设定表单的方框风格,内部结构不变。
<form class="wui-form wui-form-pane" action="">
  内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane 属性(否则会看起来比较别扭),如:
  <div class="wui-form-item" pane>
    <label class="wui-form-label">单选框</label>
    <div class="wui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile