mirror of https://github.com/layui/layui
79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
<div class="layui-btn-container">
|
|
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert">对话框带图标</button>
|
|
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">询问框</button>
|
|
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-dark">深色提示框</button>
|
|
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-light">浅色提示框</button>
|
|
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert-btn">自定义按钮</button>
|
|
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-count-down">关闭倒计时</button>
|
|
</div>
|
|
|
|
<!-- import layui -->
|
|
<script>
|
|
layui.use(function(){
|
|
var layer = layui.layer;
|
|
var util = layui.util;
|
|
|
|
// 事件
|
|
util.on('lay-on', {
|
|
"test-alert": function(){
|
|
// 示范对话框所有内置图标
|
|
var icon = 0;
|
|
(function changeIcon(){
|
|
layer.alert('点击确定，继续查看图标', {
|
|
icon: icon,
|
|
shadeClose: true,
|
|
title: 'icon: '+ icon
|
|
}, ++icon > 6 ? function(){
|
|
layer.msg('内置图标演示完毕', {icon: 1});
|
|
} : changeIcon);
|
|
}());
|
|
},
|
|
"test-confirm": function(){
|
|
layer.confirm('一个询问框的示例？', {icon: 3}, function(){
|
|
layer.msg('点击确定的回调', {icon: 1});
|
|
}, function(){
|
|
layer.msg('点击取消的回调');
|
|
});
|
|
},
|
|
"test-msg-dark": function(){
|
|
layer.msg('深色提示框的示例');
|
|
},
|
|
"test-msg-light": function(){
|
|
layer.msg('浅色提示框的示例', {icon: 0}, function(){
|
|
// layer.msg('提示框关闭后的回调');
|
|
});
|
|
},
|
|
"test-alert-btn": function(){
|
|
layer.alert('自定义按钮', {
|
|
btn: ['按钮一', '按钮二', '按钮三'],
|
|
btnAlign: 'c', // 按钮居中显示
|
|
btn1: function(){
|
|
layer.msg('按钮一的回调');
|
|
},
|
|
btn2: function(){
|
|
layer.msg('按钮二的回调');
|
|
},
|
|
btn3: function(){
|
|
layer.msg('按钮三的回调');
|
|
}
|
|
});
|
|
},
|
|
"test-count-down": function(){
|
|
layer.alert('在标题栏显示自动关闭倒计秒数', {
|
|
time: 5*1000,
|
|
success: function(layero, index){
|
|
var timeNum = this.time/1000, setText = function(start){
|
|
layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
|
|
};
|
|
setText(!0);
|
|
this.timer = setInterval(setText, 1000);
|
|
if(timeNum <= 0) clearInterval(this.timer);
|
|
},
|
|
end: function(){
|
|
clearInterval(this.timer);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
});
|
|
</script> |