floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
23fe38280b
layui/examples/layer.html

248 lines
6.8 KiB
HTML
Raw Normal View History

2.0.0
2017-08-21 08:51:13 +08:00
<!DOCTYPE html>
<html>
<head>
优化 `layer.photos` 头部工具栏和底部栏
2023-08-24 10:15:53 +08:00
<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="../src/css/layui.css">
<style>
body{padding: 100px;}
#photos li{float: left; margin: 0 1px 1px;}
#photos img{max-height: 38px;}
</style>
2.0.0
2017-08-21 08:51:13 +08:00
</head>
<body>
update
2021-03-31 14:07:23 +08:00
<div class="layui-btn-container">
更新 layer 示例
2022-08-12 00:57:06 +08:00
<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>
更新 layer 示例
2022-08-19 02:43:44 +08:00
<button class="layui-btn" lay-on="test9">Photo</button>
优化 layer 移动端定位 (#1376) * 优化 layer 移动端定位 * update code
2023-09-19 00:59:22 +08:00
<button class="layui-btn" lay-on="test10">Drawer</button>
更新 layer 示例
2022-08-12 00:57:06 +08:00
<button class="layui-btn" lay-on="testTime">自动关闭</button>
更新 layer 测试用例
2023-08-28 11:02:18 +08:00
<a href="https://layui.dev/docs/2.8/layer/" target="_blank" class="layui-btn">更多例子</a>
update
2021-03-31 14:07:23 +08:00
</div>
2.0.0
2017-08-21 08:51:13 +08:00
更新 layer 测试用例
2023-08-28 11:02:18 +08:00
<div id="test11111" style="display: none; padding: 16px;">
chore: update
2021-05-08 12:30:00 +08:00
content 指向放置在页面的一段隐藏元素
2.0.0
2017-08-21 08:51:13 +08:00
</div>
update
2021-04-22 10:22:45 +08:00
<hr><br>
<div class="layui-list">
<ul class="layui-row" id="photos">
更新 layer 示例
2022-08-19 02:43:44 +08:00
<li class="list"><img src="https://unpkg.com/outeres/demo/1.jpg" alt="123"></li>
更新 layer 示例
2022-08-12 00:57:06 +08:00
<li class="list"><img src="https://unpkg.com/outeres/demo/2.jpg"></li>
update
2021-04-22 10:22:45 +08:00
</ul>
</div>
update
2021-05-08 06:31:19 +08:00
<script>
var LAYUI_GLOBAL = {
更新 layer 测试用例
2023-08-28 11:02:18 +08:00
// path: '../src/',
// layerPath: '../release/layer/src/'
update
2021-05-08 06:31:19 +08:00
};
</script>
2.0.0
2017-08-21 08:51:13 +08:00
<script src="../src/layui.js"></script>
update
2021-04-22 10:22:45 +08:00
<!-- layer 独立版调试 -->
<script src1="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
<script src1="../release/layer/src/layer.js"></script>
2.0.0
2017-08-21 08:51:13 +08:00
<script>
update
2021-04-22 10:22:45 +08:00
var runTest = function(run, $, layer){
if(!run) return;
var timer = setInterval(function(){
update
2021-05-08 06:31:19 +08:00
//location.reload();
update
2021-04-22 10:22:45 +08:00
}, 1000);
2.0.0
2017-08-21 08:51:13 +08:00
update
2021-05-08 06:31:19 +08:00
layer.alert(123);
update
2021-04-22 10:22:45 +08:00
$.ajax({
url: './all.html'
,beforeSend: function(){
update
2021-05-08 06:31:19 +08:00
//layer.ready(function(){
//layer.load();
//});
update
2021-04-22 10:22:45 +08:00
}
,success: function(){
update
2021-05-08 06:31:19 +08:00
return;
update
2021-04-22 10:22:45 +08:00
layer.closeAll('loading', function(){
setTimeout(function(){
if($('.layui-layer-loading').length){
console.error('layer close 异常');
clearInterval(timer);
}
}, 200);
});
}
});
};
window.jQuery && runTest(1, window.jQuery, window.layer);
update
2022-05-27 07:28:25 +08:00
layui.use(['layer', 'util'], function(layer, util){
var $ = layui.jquery;
更新 layer 示例
2022-08-12 00:57:06 +08:00
var util = layui.util;
update
2021-04-22 10:22:45 +08:00
//return
update
2021-03-31 14:07:23 +08:00
更新 layer 示例
2022-08-12 00:57:06 +08:00
var index = layer.msg('Hello World');
update
2021-04-05 23:41:30 +08:00
//layer.close(index);
update
2021-04-22 10:22:45 +08:00
//runTest(1, $, layer);
update
2021-03-31 14:07:23 +08:00
更新 layer 示例
2022-08-12 00:57:06 +08:00
// 触发事件
util.on('lay-on', {
2.0.0
2017-08-21 08:51:13 +08:00
test: function(){
更新 layer 示例
2022-08-12 00:57:06 +08:00
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;
update
2021-04-22 10:22:45 +08:00
}
更新 layer 示例
2022-08-12 00:57:06 +08:00
}());
2.0.0
2017-08-21 08:51:13 +08:00
}
,test2: function(){
更新 layer 示例
2022-08-12 00:57:06 +08:00
layer.confirm('一个询问层的测试示例？', {
btn: ['确定','关闭'] //按钮
2.0.0
2017-08-21 08:51:13 +08:00
}, function(){
更新 layer 示例
2022-08-12 00:57:06 +08:00
layer.msg('第一个回调', {icon: 1});
2.0.0
2017-08-21 08:51:13 +08:00
}, function(){
更新 layer 示例
2022-08-12 00:57:06 +08:00
layer.msg('第二个回调', {
2.0.0
2017-08-21 08:51:13 +08:00
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
}
,test3: function(){
更新 layer 示例
2022-08-19 02:43:44 +08:00
!0 ? layer.msg('一个常用消息框')
更新 layer 示例
2022-08-12 00:57:06 +08:00
: layer.msg('一个常用消息框',{closeBtn: 0,time: 0, icon: 16});
2.0.0
2017-08-21 08:51:13 +08:00
}
,test4: function(){
layer.tips('Hi，我是一个小提示', this, {tips: 1});
}
,test5: function(){
更新 layer 示例
2022-08-12 00:57:06 +08:00
layer.open({
update
2021-05-08 06:31:19 +08:00
title:'自定义页面层',
2.0.0
2017-08-21 08:51:13 +08:00
type: 1,
更新 layer 示例
2022-08-12 00:57:06 +08:00
skin: 'layui-layer-border',
update
2021-03-31 14:07:23 +08:00
area: ['1000px', '580px'],
chore: update
2021-05-08 12:30:00 +08:00
content: $('#test11111'),
update
2021-05-08 06:31:19 +08:00
maxmin: true,
更新 layer 示例
2022-08-12 00:57:06 +08:00
shade: false,
更新 layer 示例
2023-05-14 19:32:06 +08:00
minStack: false, // 最小化不堆叠在左下角
id: 'page-1', // 定义 ID，防止重复弹出
update
2021-05-08 06:31:19 +08:00
min: function(layero, index){
layer.msg('阻止了默认的最小化');
layer.style(index, {top: 'auto', bottom: 0});
return false;
}
2.0.0
2017-08-21 08:51:13 +08:00
});
}
,test6: function(){
layer.open({
更新 layer 示例
2023-05-14 19:32:06 +08:00
type: 2,
content: 'https://www.aliyun.com/activity?userCode=ap0255is',
area: ['375px', '500px'],
id: 'iframe-1',
hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层
maxmin: true
2.0.0
2017-08-21 08:51:13 +08:00
});
}
更新 layer 示例
2022-08-12 00:57:06 +08:00
,testLoading: function(){
更新 layer 示例
2022-08-19 02:43:44 +08:00
layer.load(0, {
time: 5*1000
更新 layer 示例
2022-08-12 00:57:06 +08:00
//content: '123'
});
}
2.0.0
2017-08-21 08:51:13 +08:00
,test7: function(){
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
update
2022-05-27 07:28:25 +08:00
layer.msg('演示完毕！您的口令：'+ util.escape(pass) +'<br>您最后写下了：'+ util.escape(text));
2.0.0
2017-08-21 08:51:13 +08:00
});
});
}
,test8: function(){
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
}
更新 layer 示例
2022-08-19 02:43:44 +08:00
,test9: function(){
layer.photos({
photos: {
"data": [{
"src": "https://unpkg.com/outeres/demo/layer.png"
}]
},
hideFooter: true // 是否隐藏图片底部栏（v2.8.0 新增）
});
}
更新 layer 示例
2022-08-12 00:57:06 +08:00
,testTime: function(){
layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
time: 5*1000
,success: function(layero, index){
var timeNum = this.time/1000, setText = function(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);
}
});
}
优化 layer 移动端定位 (#1376) * 优化 layer 移动端定位 * update code
2023-09-19 00:59:22 +08:00
,test10: function(){
layer.open({
title:'drawer',
type: 1,
offset: 'b',
anim: 'slideUp', // 从下往上
area: ['100%', '160px'],
shade: 0.1,
shadeClose: true,
content: $('#test11111'),
maxmin: true,
});
}
更新 layer 示例
2022-08-12 00:57:06 +08:00
});
update
2021-04-06 16:01:23 +08:00
更新 layer 示例
2022-08-19 02:43:44 +08:00
// 相册层
update
2021-04-22 10:22:45 +08:00
layer.photos({
优化 `layer.photos` 头部工具栏和底部栏
2023-08-24 10:15:53 +08:00
photos: '#photos', // $('#photos')
// toolbar: false,
// footer: false
update
2021-04-22 10:22:45 +08:00
});
update
2021-05-18 21:20:45 +08:00
update
2021-04-22 10:22:45 +08:00
//动态追加
更新 layer 示例
2022-08-12 00:57:06 +08:00
$('#photos').append('<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>');
2.0.0
2017-08-21 08:51:13 +08:00
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink