github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

更新 util 用例

pull/1426/head
贤心 1 year ago
parent
9b4fc5da8e
commit
ed26398451
1 changed files with 51 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 90
      examples/util.html

90
examples/util.html
Unescape View File

@ -13,11 +13,10 @@ body{padding: 50px;}
</head> </head>
<body> <body>
<button class="layui-btn" lay-active="e1">事件1</button> <button class="layui-btn" lay-on="e1">事件1</button>
<button class="layui-btn" lay-active="e2">事件2</button> <button class="layui-btn" lay-on="e2">事件2</button>
<button class="layui-btn" lay-active="e3">事件3</button> <button class="layui-btn" lay-on="e3">事件3</button>
<button class="layui-btn" lay-active="e4">事件4</button>
<button class="layui-btn" lay-active2="e4">事件4</button>
<hr> <hr>
@ -43,10 +42,11 @@ body{padding: 50px;}
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
<script> <script>
layui.use(['util', 'layer'], function(){ layui.use(['lay', 'util', 'layer'], function(){
var $ = layui.$; var $ = layui.$;
var util = layui.util; var util = layui.util;
var layer = layui.layer; var layer = layui.layer;
var lay = layui.lay;
// 固定块 // 固定块
util.fixbar({ util.fixbar({
@ -56,7 +56,7 @@ layui.use(['util', 'layer'], function(){
}, { }, {
type: 'help', type: 'help',
icon: 'layui-icon-help' icon: 'layui-icon-help'
}, { }, {
type: 'cart', type: 'cart',
icon: 'layui-icon-cart', icon: 'layui-icon-cart',
style: 'background-color: #FF5722;' style: 'background-color: #FF5722;'
@ -75,7 +75,7 @@ layui.use(['util', 'layer'], function(){
on: { // 任意事件 -- v2.8.0 新增 on: { // 任意事件 -- v2.8.0 新增
mouseenter: function(type){ mouseenter: function(type){
layer.tips(type, this, { layer.tips(type, this, {
tips: 4, tips: 4,
fixed: true fixed: true
}); });
}, },
@ -89,47 +89,59 @@ layui.use(['util', 'layer'], function(){
// layer.msg(type); // layer.msg(type);
} }
}); });
//倒计时
var endTime = new Date(2099,1,1).getTime() //假设为结束日期 // 批量处理事件
,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的 util.on({
util.countdown(endTime, serverTime, function(date, serverTime, timer){
var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';
$('#test').html('距离2099年1月1日还有：'+ str);
});
//某个时间在当前时间的多久前
var str = util.timeAgo(new Date(2017,7,15,2,58,0));
$('#test1').html('示例写于：'+ str);
//处理属性 为 lay-active 的所有元素事件
util.event('lay-active', {
e1: function(othis){ e1: function(othis){
alert(othis.html()) alert(othis.html())
} },
,e2: function(othis){ e2: function(othis){
alert(othis.html()) alert(othis.html())
} }
,e3: function(othis){ });
// 事件集的替换和增加
util.on({
e1: function(othis){ // 重置事件 e1
alert(othis.html() + ' - replace')
},
e3: function(othis){ // 增加事件 e3
alert(othis.html()) alert(othis.html())
} }
}); });
//测试是否重复绑定 // 自定义触发事件的元素属性名、自定义触发事件的方式
util.event('lay-active', { util.on('lay-active', {
e1: function(othis){ e4: layui.throttle(function(othis) {
alert(othis.html() + '新事件') layer.tips(othis.html(), this);
} }, 3000) // 3s 内不重复执行
}, {
trigger: 'mouseenter'
}); });
//测试绑定新事件
util.event('lay-active2', { // 倒计时
e4: function(othis){ var countdown = util.countdown({
alert(othis.html()) 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);
// 转换日期格式 // 转换日期格式
var timer = null var timer = null
var toDateString = function (format) { var toDateString = function (format) {
@ -139,7 +151,7 @@ layui.use(['util', 'layer'], function(){
timer = setInterval(() => { timer = setInterval(() => {
toDateString($('#test2').val()) toDateString($('#test2').val())
}, 50) }, 50)
}); });
</script> </script>
</body> </body>

Write Preview
Loading…
Cancel
Save