工具集文档 - layui.util

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

模块加载名称：util

固定块

看到页面右下角的那个包含top的bar了吗？对，就是她。她通常会出现在那个固定位置，由两个可选的bar和一个默认必选的TopBar组成。

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

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

倒计时

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

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

<div id="test"></div>
 
<script>
layui.use('util', function(){
  var util = layui.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] + '秒';
    layui.$('#test').html('距离2099年1月1日还有：'+ str);
  });
});
</script>
      

其它方法

HTML：
<button class=”layui-btn” lay-active=”e1”>事件1</button>
<button class=”layui-btn” lay-active=”e2”>事件2</button>
<button class=”layui-btn” lay-active=”e3”>事件3</button>
 
JavaScript：
<script>
layui.use(‘util’, function(){
  var util = layui.util;
 
  //处理属性 为 lay-active 的所有元素事件
  util.event(‘lay-active’, {
    e1: function(){
      alert(‘触发了事件1’);
    }
    ,e2: function(){
      alert(‘触发了事件2’);
    }
    ,e3: function(){
      alert(‘触发了事件3’);
    }
  });
});
</script>
            

结语

工具模块往往应用在边边角角，将不定期增加。

layui - 用心与你沟通