lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-06-28 13:34:27 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

更新 util 用例

Browse Source
This commit is contained in:
贤心 2023-11-19 16:37:47 +08:00
parent 9b4fc5da8e
commit ed26398451
1 changed files with 58 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
examples/util.html
View File

@ -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,46 +89,58 @@ 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);
// 批量处理事件
util.on({
e1: function(othis){
alert(othis.html())
},
e2: function(othis){
alert(othis.html())
}
});
//某个时间在当前时间的多久前
// 事件集的替换和增加
util.on({
e1: function(othis){ // 重置事件 e1
alert(othis.html() + ' - replace')
},
e3: function(othis){ // 增加事件 e3
alert(othis.html())
}
});
// 自定义触发事件的元素属性名、自定义触发事件的方式
util.on('lay-active', {
e4: layui.throttle(function(othis) {
layer.tips(othis.html(), this);
}, 3000) // 3s 内不重复执行
}, {
trigger: 'mouseenter'
});
// 倒计时
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);
//处理属性 为 lay-active 的所有元素事件
util.event('lay-active', {
e1: function(othis){
alert(othis.html())
}
,e2: function(othis){
alert(othis.html())
}
,e3: function(othis){
alert(othis.html())
}
});
//测试是否重复绑定
util.event('lay-active', {
e1: function(othis){
alert(othis.html() + '新事件')
}
});
//测试绑定新事件
util.event('lay-active2', {
e4: function(othis){
alert(othis.html())
}
});
// 转换日期格式
var timer = null
@ -139,7 +151,7 @@ layui.use(['util', 'layer'], function(){
timer = setInterval(() => {
toDateString($('#test2').val())
}, 50)
});
</script>
</body>