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;">&#xe68f;</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. 效果图

猜你喜欢