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
常用元素操作 - wui.element

页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、Tab的切换等操作,他们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们统一归类为element组件。跟表单一样,基于元素属性和事件驱动的接口书写方式。
模块加载名称:element
元素功能的开启只需要加载element模块即会自动完成,所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素,如你的页面存在一个 Tab元素块,那么element模块会自动赋予她该有的功能。
<div class="wui-tab" w-filter="demo">
  <ul class="wui-tab-title">
    <li class="wui-this">网站设置</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="wui-tab-content">
    <div class="wui-tab-item wui-show">内容1</div>
    <div class="wui-tab-item">内容2</div>
    <div class="wui-tab-item">内容3</div>
  </div>
</div>
前提是你要加载element模块
wui.use('element', function(){
  var element = wui.element;
  
  //一些事件监听
  element.on('tab(demo)', function(data){
    console.log(data);
  });
});
我们通过自定义元素属性来作为元素的功能参数,他们一般配置在容器外层,如:
<div class="wui-tab" w-allowClose="true" w-filter="demo">…</div>
<span class="wui-breadcrumb" w-separator="|"></span>

 And So On
element 模块支持的元素如下表:
属性名 可选值 说明
w-filter 任意字符 事件过滤器(公用属性),主要用于事件的精确匹配,跟选择器是比较类似的。
w-allowClose true 针对于Tab容器,是否允许选项卡关闭。默认不允许,即不用设置该属性
w-separator 任意分隔符 针对于面包屑容器
基础方法允许你在外部主动对元素发起一起操作,目前 element 模块提供的方法如下:
方法名 描述
var element = wui.element; element模块的实例
返回的element变量为该实例的对象,携带一些用于元素操作的基础方法
element.on(filter, callback); 用于元素的一些事件监听
element.tabAdd(filter, options); 用于新增一个Tab选项
参数filter:tab元素的 w-filter="value" 过滤器的值(value)
参数options:设定可选值的对象,目前支持的选项如下述示例:
element.tabAdd('demo', {
  title: '选项卡的标题'
  ,content: '选项卡的内容' //支持传入html
  ,id: '选项卡标题的w-id属性值'
});
              
element.tabDelete(filter, layid); 用于删除指定的Tab选项
参数filter:tab元素的 w-filter="value" 过滤器的值(value)
参数layid:选项卡标题列表的 属性 w-id 的值
element.tabDelete('demo', 'xxx'); //删除 w-id="xxx" 的这一项
              
element.tabChange(filter, layid); 用于外部切换到指定的Tab项上,参数同上,如:
element.tabChange('demo', 'layid'); //切换到 w-id="yyy" 的这一项
element.tab(options); 用于绑定自定义 Tab 元素(即非 wui 自带的 tab 结构)。
参数options:设定可选值的对象,目前支持的选项如下述示例:
//HTML
<ul id="tabHeader">
  <li>标题1</li>
  <li>标题2</li>
  <li>标题3</li>
</ul>
<div id="tabBody">
  <div class="xxx">内容1</div>
  <div class="xxx">内容2</div>
  <div class="xxx">内容4</div>
</div>

//JavaScript
element.tab({
  headerElem: '#tabHeader>li' //指定tab头元素项
  ,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
});
              
element.progress(filter, percent); 用于动态改变进度条百分比:
element.progress('demo', '30%');
跟表单元素一样,很多时候你的页面元素可能是动态生成的,这时element的相关功能将不会对其有效,你必须手工执行 element.init(type, filter) 方法即可。可以用 element.render(type, filter); 方法替代
第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:
参数(type)值 描述
tab 重新对tab选项卡进行初始化渲染
nav 重新对导航进行渲染
breadcrumb 重新对面包屑进行渲染
progress 重新对进度条进行渲染
collapse 重新对折叠面板进行渲染
element.init(); //更新全部,可用 element.render() 方法替代
element.render('nav'); //重新对导航进行渲染。
//……
第二个参数:filter,为元素的 w-filter="" 的值。你可以借助该参数,完成指定元素的局部更新。
【HTML】
<div class="wui-nav" w-filter="test1">
  …
</div>

<div class="wui-nav" w-filter="test2">
  …
</div>

【JavaScript】
//比如当你对导航动态插入了二级菜单,这时你需要重新去对它进行渲染
element.render('nav', 'test1'); //对 w-filter="test1" 所在导航重新渲染。
//……
语法:element.on('event(过滤器值)', callback);
element 模块在 wui 事件机制中注册了element 模块事件,所以当你使用 wui.onevent() 自定义模块事件时,请勿占用 element 名。目前 element 模块所支持的事件如下表:
event 描述
tab 监听 Tab 选项卡切换事件
tabDelete 监听 Tab 监听选项卡删除事件
nav 监听导航菜单的点击事件
collapse 监听折叠面板展开或收缩事件
默认情况下,事件所监听的是全部的元素,但如果你只想监听某一个元素,使用事件过滤器即可。
如:<div class="wui-tab" w-filter="test"></div>
element.on('tab(test)', function(data){
  console.log(data);
});
Tab选项卡点击切换时触发,回调函数返回一个object参数,携带两个成员:
element.on('tab(filter)', function(data){
  console.log(this); //当前Tab标题所在的原始DOM元素
  console.log(data.index); //得到当前Tab的所在下标
  console.log(data.elem); //得到当前的Tab大容器
});
Tab选项卡被删除时触发,回调函数返回一个object参数,携带两个成员:
element.on('tabDelete(filter)', function(data){
  console.log(this); //当前Tab标题所在的原始DOM元素
  console.log(data.index); //得到当前Tab的所在下标
  console.log(data.elem); //得到当前的Tab大容器
});
当点击导航父级菜单和二级菜单时触发,回调函数返回所点击的菜单DOM对象:
element.on('nav(filter)', function(elem){
  console.log(elem); //得到当前点击的DOM对象
});
当折叠面板点击展开或收缩时触发,回调函数返回一个object参数,携带三个成员:
element.on('collapse(filter)', function(data){
  console.log(data.show); //得到当前面板的展开状态,true或者false
  console.log(data.title); //得到当前点击面板的标题区域DOM对象
  console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
你肯定不仅仅是满足于进度条的初始化显示,通常情况下你需要动态改变它的进度值,element模块提供了这样的基础方法:element.progress(filter, percent);。
<div class="wui-progress wui-progress-big" w-filter="demo" w-showPercent="true">
  <div class="wui-progress-bar" w-percent="0%"></div>
</div>

上述是一个已经设置了过滤器(w-filter="demo")的进度条
现在你只需要在某个事件或者语句中执行方法:element.progress('demo', '50%');
即可改变进度
如果你需要进度条更直观的例子,建议浏览:进度条演示页面
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile