更新 util 用例

1 year ago · ed26398451
parent 9b4fc5da8e
commit ed26398451
1 changed files with 51 additions and 39 deletions
--- a/examples/util.html
+++ b/examples/util.html
@ -13,11 +13,10 @@ body{padding: 50px;}
 </head>
 <body>

-<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>
-
-<button class="layui-btn" lay-active2="e4">事件4</button>
+<button class="layui-btn" lay-on="e1">事件1</button>
+<button class="layui-btn" lay-on="e2">事件2</button>
+<button class="layui-btn" lay-on="e3">事件3</button>
+<button class="layui-btn" lay-active="e4">事件4</button>

 <hr>

@ -43,10 +42,11 @@ body{padding: 50px;}

 <script src="../src/layui.js"></script>
 <script>
-layui.use(['util', 'layer'], function(){
+layui.use(['lay', 'util', 'layer'], function(){
  var $ = layui.$;
  var util = layui.util;
  var layer = layui.layer;
+  var lay = layui.lay;

  // 固定块
  util.fixbar({
@ -56,7 +56,7 @@ layui.use(['util', 'layer'], function(){
    }, {
      type: 'help',
      icon: 'layui-icon-help'
-    }, { 
+    }, {
      type: 'cart',
      icon: 'layui-icon-cart',
      style: 'background-color: #FF5722;'
@ -75,7 +75,7 @@ layui.use(['util', 'layer'], function(){
    on: { // 任意事件 --  v2.8.0 新增
      mouseenter: function(type){
        layer.tips(type, this, {
-          tips: 4, 
+          tips: 4,
          fixed: true
        });
      },
@ -89,47 +89,59 @@ layui.use(['util', 'layer'], function(){
      // layer.msg(type);
    }
  });
-  
-  //倒计时
-  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] + '秒';
-    $('#test').html('距离2099年1月1日还有：'+ str);
-  });
-  
-  //某个时间在当前时间的多久前
-  var str = util.timeAgo(new Date(2017,7,15,2,58,0));
-  $('#test1').html('示例写于：'+ str);
-  
-  //处理属性 为 lay-active 的所有元素事件
-  util.event('lay-active', {
+
+
+  // 批量处理事件
+  util.on({
    e1: function(othis){
      alert(othis.html())
-    }
-    ,e2: function(othis){
+    },
+    e2: function(othis){
      alert(othis.html())
    }
-    ,e3: function(othis){
+  });
+
+  // 事件集的替换和增加
+  util.on({
+    e1: function(othis){ // 重置事件 e1
+      alert(othis.html() + ' - replace')
+    },
+    e3: function(othis){ // 增加事件 e3
      alert(othis.html())
    }
  });
-  
-  //测试是否重复绑定
-  util.event('lay-active', {
-    e1: function(othis){
-      alert(othis.html() + '新事件')
-    }
+
+  // 自定义触发事件的元素属性名、自定义触发事件的方式
+  util.on('lay-active', {
+    e4: layui.throttle(function(othis) {
+      layer.tips(othis.html(), this);
+    }, 3000) // 3s 内不重复执行
+  }, {
+    trigger: 'mouseenter'
  });
-  
-  //测试绑定新事件
-  util.event('lay-active2', {
-    e4: function(othis){
-      alert(othis.html())
+
+
+  // 倒计时
+  var countdown = util.countdown({
+    date: '2099-12-31 00:00:00', // 目标时间值
+    now: new Date(), // 当前时间，一般为服务器时间，此处以本地时间为例
+    ready: function(){ // 初始操作
+      clearTimeout(util.countdown.timer); // 清除旧定时器，防止多次渲染时重复执行。实际使用时不常用
+    },
+    clock: function(obj, inst){  // 计时中
+      var str = [obj.d,'天',obj.h,'时',obj.m,'分',obj.s,'秒'].join(' ');
+      lay('#test').html(str);
+      util.countdown.timer = inst.timer; // 记录当前定时器，以便在重复渲染时清除。实际使用时不常用
+    },
+    done: function(obj, inst){ // 计时完成
+      layer.msg('Time is up');
    }
  });

+  // 某个时间在当前时间的多久前
+  var str = util.timeAgo(new Date(2017,7,15,2,58,0));
+  $('#test1').html('示例写于：'+ str);
+
  // 转换日期格式
  var timer = null
  var toDateString = function (format) {
@ -139,7 +151,7 @@ layui.use(['util', 'layer'], function(){
  timer = setInterval(() => {
    toDateString($('#test2').val())
  }, 50)
-  
+
 });
 </script>
 </body>