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. 效果图