mirror of
https://github.com/layui/layui.git
synced 2026-02-09 02:09:18 +08:00
298 lines
8.8 KiB
HTML
298 lines
8.8 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||
/>
|
||
<title>layer 弹层 - layui</title>
|
||
<link rel="stylesheet" href="./assets/dist/css/layui.css" />
|
||
<style>
|
||
body {
|
||
padding: 100px;
|
||
}
|
||
#photos li {
|
||
float: left;
|
||
margin: 0 1px 1px;
|
||
}
|
||
#photos img {
|
||
max-height: 38px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layui-btn-container">
|
||
<button class="layui-btn layui-btn-primary" lay-on="test">Alert</button>
|
||
<button class="layui-btn" lay-on="test2">Confirm</button>
|
||
<button class="layui-btn" lay-on="test3">Msg</button>
|
||
<button class="layui-btn" lay-on="test5">Page</button>
|
||
<button class="layui-btn" lay-on="test6">Iframe</button>
|
||
<button class="layui-btn" lay-on="testLoading">Loading</button>
|
||
<button class="layui-btn" lay-on="test4">Tips</button>
|
||
<button class="layui-btn" lay-on="test7">Prompt</button>
|
||
<button class="layui-btn" lay-on="test8">Tab</button>
|
||
<button class="layui-btn" lay-on="test9">Photo</button>
|
||
<button class="layui-btn" lay-on="test10">Drawer</button>
|
||
<button class="layui-btn" lay-on="testTime">自动关闭</button>
|
||
<a
|
||
href="https://layui.dev/docs/2/layer/"
|
||
target="_blank"
|
||
class="layui-btn"
|
||
>更多例子</a
|
||
>
|
||
</div>
|
||
|
||
<div id="test11111" style="display: none; padding: 16px">
|
||
content 指向放置在页面的一段隐藏元素
|
||
</div>
|
||
|
||
<hr />
|
||
<br />
|
||
|
||
<div class="layui-list">
|
||
<ul class="layui-row" id="photos">
|
||
<li class="list">
|
||
<img src="https://unpkg.com/outeres/demo/1.jpg" alt="123" />
|
||
</li>
|
||
<li class="list"><img src="https://unpkg.com/outeres/demo/2.jpg" /></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<script>
|
||
var LAYUI_GLOBAL = {
|
||
// path: '../src/',
|
||
// layerPath: '../release/layer/src/'
|
||
};
|
||
</script>
|
||
|
||
<script src="./assets/dist/layui.js"></script>
|
||
|
||
<!-- layer 独立版调试 -->
|
||
<script
|
||
src1="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"
|
||
></script>
|
||
<script src1="../release/layer/src/layer.js"></script>
|
||
|
||
<script>
|
||
var runTest = (run, $, layer) => {
|
||
if (!run) return;
|
||
|
||
var timer = setInterval(() => {
|
||
//location.reload();
|
||
}, 1000);
|
||
|
||
layer.alert(123);
|
||
|
||
$.ajax({
|
||
url: './all.html',
|
||
beforeSend: () => {
|
||
//layer.ready(function(){
|
||
//layer.load();
|
||
//});
|
||
},
|
||
success: () => {
|
||
return;
|
||
layer.closeAll('loading', () => {
|
||
setTimeout(() => {
|
||
if ($('.layui-layer-loading').length) {
|
||
console.error('layer close 异常');
|
||
clearInterval(timer);
|
||
}
|
||
}, 200);
|
||
});
|
||
},
|
||
});
|
||
};
|
||
window.jQuery && runTest(1, window.jQuery, window.layer);
|
||
|
||
layui.use(['layer', 'util'], (layer, util) => {
|
||
var $ = layui.jquery;
|
||
var util = layui.util;
|
||
//return
|
||
|
||
var index = layer.msg('Hello World');
|
||
//layer.close(index);
|
||
//runTest(1, $, layer);
|
||
|
||
// 触发事件
|
||
util.on('lay-on', {
|
||
test: () => {
|
||
var icon = -1;
|
||
(function changeIcon() {
|
||
var index = layer.alert(
|
||
'Hi，你好！ 点击确认更换图标',
|
||
{
|
||
icon: icon,
|
||
shadeClose: true,
|
||
title: icon === -1 ? 'Alert' : 'icon: ' + icon,
|
||
},
|
||
changeIcon,
|
||
);
|
||
if (icon++ > 6) {
|
||
layer.close(index);
|
||
icon = -1;
|
||
}
|
||
})();
|
||
},
|
||
test2: () => {
|
||
layer.confirm(
|
||
'一个询问层的测试示例？',
|
||
{
|
||
btn: ['确定', '关闭'], //按钮
|
||
},
|
||
() => {
|
||
layer.msg('第一个回调', { icon: 1 });
|
||
},
|
||
() => {
|
||
layer.msg('第二个回调', {
|
||
time: 20000, //20s后自动关闭
|
||
btn: ['明白了', '知道了'],
|
||
});
|
||
},
|
||
);
|
||
},
|
||
test3: () => {
|
||
!0
|
||
? layer.msg('一个常用消息框')
|
||
: layer.msg('一个常用消息框', { closeBtn: 0, time: 0, icon: 16 });
|
||
},
|
||
test4: function () {
|
||
layer.tips('Hi，我是一个小提示', this, { tips: 1 });
|
||
},
|
||
test5: () => {
|
||
layer.open({
|
||
title: '自定义页面层',
|
||
type: 1,
|
||
skin: 'layui-layer-border',
|
||
area: ['1000px', '580px'],
|
||
content: $('#test11111'),
|
||
maxmin: true,
|
||
shade: false,
|
||
minStack: false, // 最小化不堆叠在左下角
|
||
id: 'page-1', // 定义 ID，防止重复弹出
|
||
min: (layero, index) => {
|
||
layer.msg('阻止了默认的最小化');
|
||
layer.style(index, { top: 'auto', bottom: 0 });
|
||
return false;
|
||
},
|
||
});
|
||
},
|
||
test6: () => {
|
||
layer.open({
|
||
type: 2,
|
||
content: 'https://www.aliyun.com/activity?userCode=ap0255is',
|
||
area: ['375px', '500px'],
|
||
id: 'iframe-1',
|
||
hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层
|
||
maxmin: true,
|
||
});
|
||
},
|
||
testLoading: () => {
|
||
layer.load(0, {
|
||
time: 5 * 1000,
|
||
//content: '123'
|
||
});
|
||
},
|
||
test7: () => {
|
||
layer.prompt(
|
||
{ title: '输入任何口令，并确认', formType: 1 },
|
||
(pass, index) => {
|
||
layer.close(index);
|
||
layer.prompt(
|
||
{ title: '随便写点啥，并确认', formType: 2 },
|
||
(text, index) => {
|
||
layer.close(index);
|
||
layer.msg(
|
||
'演示完毕！您的口令：' +
|
||
util.escape(pass) +
|
||
'<br>您最后写下了：' +
|
||
util.escape(text),
|
||
);
|
||
},
|
||
);
|
||
},
|
||
);
|
||
},
|
||
test8: () => {
|
||
layer.tab({
|
||
area: ['600px', '300px'],
|
||
tab: [
|
||
{
|
||
title: 'TAB1',
|
||
content: '内容1',
|
||
},
|
||
{
|
||
title: 'TAB2',
|
||
content: '内容2',
|
||
},
|
||
{
|
||
title: 'TAB3',
|
||
content: '内容3',
|
||
},
|
||
],
|
||
});
|
||
},
|
||
test9: () => {
|
||
layer.photos({
|
||
photos: {
|
||
data: [
|
||
{
|
||
src: 'https://unpkg.com/outeres/demo/layer.png',
|
||
},
|
||
],
|
||
},
|
||
hideFooter: true, // 是否隐藏图片底部栏（v2.8.0 新增）
|
||
});
|
||
},
|
||
testTime: () => {
|
||
layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
|
||
time: 5 * 1000,
|
||
success: function (layero, index) {
|
||
var timeNum = this.time / 1000,
|
||
setText = (start) => {
|
||
layer.title(
|
||
(start ? timeNum : --timeNum) + ' 秒后关闭',
|
||
index,
|
||
);
|
||
};
|
||
setText(!0);
|
||
this.timer = setInterval(setText, 1000);
|
||
if (timeNum <= 0) clearInterval(this.timer);
|
||
},
|
||
end: function () {
|
||
clearInterval(this.timer);
|
||
},
|
||
});
|
||
},
|
||
test10: () => {
|
||
layer.open({
|
||
title: 'drawer',
|
||
type: 1,
|
||
offset: 'b',
|
||
anim: 'slideUp', // 从下往上
|
||
area: ['100%', '160px'],
|
||
shade: 0.1,
|
||
shadeClose: true,
|
||
content: $('#test11111'),
|
||
maxmin: true,
|
||
});
|
||
},
|
||
});
|
||
|
||
// 相册层
|
||
layer.photos({
|
||
photos: '#photos', // $('#photos')
|
||
// toolbar: false,
|
||
// footer: false
|
||
});
|
||
|
||
//动态追加
|
||
$('#photos').append(
|
||
'<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>',
|
||
);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|