當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

019-工具集

發布時間：2025/4/17 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 019-工具集小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

2. 模塊加載名稱: util。

3. 固定塊

3.1. 頁面右下角的那個包含top的bar, 它通常會出現在那個固定位置, 由兩個可選的bar和一個默認必選的TopBar組成。

3.2. 語法: util.fixbar(options)。

3.3. 其中參數options是一個對象, 可支持的key如下表:

4. 倒計時

4.1. 這是一個精致的封裝, 它并不負責UI元素的呈現, 而僅僅只是返回倒計時的數據, 這意味著你可以將它應用在任何倒計時相關的業務中。

4.2. 語法: util.countdown(endTime, serverTime, callback)。

5. 其它方法

5.1. 當分頁被切換時觸發, 函數返回兩個參數: obj(當前分頁的所有選項值)、first(是否首次, 一般用于初始加載的判斷):

6. 例子

6.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>工具集 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script><style type="text/css">div { width: 500px; height: 60px; line-height: 60px; }</style></head><body><div style="background: pink;" id="test1"></div><div style="background: yellow;" id="test2"></div><div style="background: green;" id="test3"></div><div style="background: #5FB878;" id="test4"></div><div style="background: #FFB800;" id="test5"></div><div style="background: #1E9FFF;" id="test6"></div><div style="background: #FF5722;" id="test7"></div> <br /><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><script type="text/javascript">layui.use(['util', 'layer'], function() {var layer = layui.layer,util = layui.util;util.fixbar({bar1: '<i class="layui-icon" style="font-size:30px;"></i>',bar2: true,bgcolor: '#000000',css: { right: 20, bottom: 20 },showHeight: 0,click: function(type){if(type === 'bar1'){layer.msg('點擊了bar1')}}});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.$('#test1').html('距離2099年1月1日還有: '+ str);});var now = new Date().getTime();layui.$('#test2').html(util.toDateString(now - 60000, 'yyyy-MM-dd HH:mm:ss') + '距離現在是: ' + util.timeAgo(now - 60000));layui.$('#test3').html(util.toDateString(now - 86400000*3, 'yyyy-MM-dd HH:mm:ss') + '距離現在是: ' + util.timeAgo(now - 86400000*3));layui.$('#test4').html(util.toDateString(now - 86400000*32, 'yyyy-MM-dd HH:mm:ss') + '距離現在是: ' + util.timeAgo(now - 86400000*32));layui.$('#test5').html(util.toDateString(now - 86400000*300, 'yyyy-MM-dd HH:mm:ss') + '距離現在是: ' + util.timeAgo(now - 86400000*300, true));layui.$('#test6').html(util.digit(5, 2));layui.$('#test7').html(util.escape('<h1>你還好吧</h1>'));// 處理屬性為lay-active的所有元素事件util.event('lay-active', {e1: function(){alert('觸發了事件1');},e2: function(){alert('觸發了事件2');},e3: function(){alert('觸發了事件3');}});}); </script></body> </html>

6.2. 效果圖

總結

以上是生活随笔為你收集整理的019-工具集的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

工具