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.util 更多 util 示例

我们将一些工具性元素放入 util 模块中,以供选择性使用。其内部由多个小工具组件组成,他们也许不是必须的,但很多时候却能为你的页面提供良好的辅助作用。
模块加载名称:util

看到页面右下角的那个耳机图标的bar了吗?对,就是她。她通常会出现在那个固定位置,由两个可选的bar和一个默认必选的TopBar组成。

语法:util.fixbar(options)
其中参数 options 是一个对象,可支持的key如下表:

参数 类型 描述
bar1 Boolean/String 默认false。如果值为true,则显示第一个bar,带有一个默认图标。
如果值为图标字符,则显示第一个bar,并覆盖默认图标
bar2 Boolean/String 默认false。如果值为true,则显示第二个bar,带有一个默认图标。
如果值为图标字符,则显示第二个bar,并覆盖默认图标
bgcolor String 自定义区块背景色
showHeight Number 用于控制出现TOP按钮的滚动条高度临界值。默认:200
css Object 你可以通过重置bar的位置,比如 css: {right: 100, bottom: 100}
click Function 点击bar的回调,函数返回一个type参数,用于区分bar类型。
支持的类型有:bar1、bar2、top
wui.use('util', function(){
  var util = wui.util;

  //执行
  util.fixbar({
    bar1: true
    ,click: function(type){
      console.log(type);
      if(type === 'bar1'){
        alert('点击了bar1')
      }
    }
  });
});

这是一个精致的封装,它并不负责 UI 元素的呈现,而仅仅只是返回倒计时的数据,这意味着你可以将它应用在任何倒计时相关的业务中。

语法:util.countdown(endTime, serverTime, callback)

参数 说明
endTime 结束时间戳或Date对象,如:4073558400000,或:new Date(2099,1,1).
serverTime 当前服务器时间戳或Date对象
callback 回调函数。如果倒计时尚在运行,则每一秒都会执行一次。并且返回三个参数: date(包含天/时/分/秒的对象)、 serverTime(当前服务器时间戳或Date对象), timer(计时器返回的ID值,用于clearTimeout)
<div id="test"></div>
 
<script>
wui.use('util', function(){
  var util = wui.util;
  
  //示例
  var endTime = new Date(2099,1,1).getTime() //假设为结束日期
  ,serverTime = new Date().getTime(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
   
  util.countdown(endTime, serverTime, function(date, serverTime, timer){
    var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
    wui.$('#test').html('距离2099年1月1日还有:'+ str);
  });
});
</script>
方法 说明
util.timeAgo(time, onlyDate) 某个时间在当前时间的多久前。
参数 time:即为某个时间的时间戳或日期对象
参数 onlyDate:是否在超过30天后,只返回日期字符,而不返回时分秒

如果在3分钟以内,返回:刚刚
如果在30天以内,返回:若干分钟前若干小时前若干天前,如:5分钟前
如果在30天以上,返回:日期字符,如:2017-01-01
util.toDateString(time, format) 转化时间戳或日期对象为日期格式字符
参数 time:可以是日期对象,也可以是毫秒数
参数 format:日期字符格式(默认:yyyy-MM-dd HH:mm:ss),可随意定义,如:yyyy年MM月dd日
util.digit(num, length) 数字前置补零
参数 num:原始数字
参数 length:数字长度,如果原始数字长度小于 length,则前面补零,如:util.digit(7, 3) //007
util.escape(str) 转义 xss 字符
参数 str:任意字符
util.event(attr, obj, eventType) 用于更好地批量处理事件。
参数 attr:绑定需要监听事件的元素属性
参数 obj:事件回调链
参数 eventType:事件类型(默认 click)

示例:
HTML:
<button class="wui-btn" w-active="e1">事件1</button>
<button class="wui-btn" w-active="e2">事件2</button>
<button class="wui-btn" w-active="e3">事件3</button>
 
JavaScript:
<script>
wui.use('util', function(){
  var util = wui.util;
  
  //处理属性 为 w-active 的所有元素事件
  util.event('w-active', {
    e1: function(){
      alert('触发了事件1');
    }
    ,e2: function(){
      alert('触发了事件2');
    }
    ,e3: function(){
      alert('触发了事件3');
    }
  });
});
</script>
            
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile