<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 工具集文檔 - layui.util

      我們將一些工具性元素放入 util 模塊中,以供選擇性使用。其內部由多個小工具組件組成,他們也許不是必須的,但很多時候卻能為你的頁面提供良好的輔助作用。
      模塊加載名稱:util
      固定塊

      看到頁面右下角的那個包含top的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
      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)

      參數 說明
      endTime 結束時間戳或Date對象,如:4073558400000,或:new Date(2099,1,1).
      serverTime 當前服務器時間戳或Date對象
      callback 回調函數。如果倒計時尚在運行,則每一秒都會執行一次。并且返回三個參數: date(包含天/時/分/秒的對象)、 serverTime(當前服務器時間戳或Date對象), timer(計時器返回的ID值,用于clearTimeout)
      <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>
            
      其它方法
      方法 說明
      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="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 - 用心與你溝通

      亚洲图色