mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
247 lines
6.8 KiB
247 lines
6.8 KiB
<!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="../src/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="../src/layui.js"></script> |
|
|
|
<!-- layer 独立版调试 --> |
|
<script src1="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script> |
|
<script src1="../release/layer/src/layer.js"></script> |
|
|
|
<script> |
|
var runTest = function(run, $, layer){ |
|
if(!run) return; |
|
|
|
var timer = setInterval(function(){ |
|
//location.reload(); |
|
}, 1000); |
|
|
|
layer.alert(123); |
|
|
|
$.ajax({ |
|
url: './all.html' |
|
,beforeSend: function(){ |
|
//layer.ready(function(){ |
|
//layer.load(); |
|
//}); |
|
} |
|
,success: function(){ |
|
return; |
|
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); |
|
|
|
layui.use(['layer', 'util'], function(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: function(){ |
|
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: function(){ |
|
layer.confirm('一个询问层的测试示例？', { |
|
btn: ['确定','关闭'] //按钮 |
|
}, function(){ |
|
layer.msg('第一个回调', {icon: 1}); |
|
}, function(){ |
|
layer.msg('第二个回调', { |
|
time: 20000, //20s后自动关闭 |
|
btn: ['明白了', '知道了'] |
|
}); |
|
}); |
|
} |
|
,test3: function(){ |
|
!0 ? layer.msg('一个常用消息框') |
|
: layer.msg('一个常用消息框',{closeBtn: 0,time: 0, icon: 16}); |
|
} |
|
,test4: function(){ |
|
layer.tips('Hi，我是一个小提示', this, {tips: 1}); |
|
} |
|
,test5: function(){ |
|
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: function(layero, index){ |
|
layer.msg('阻止了默认的最小化'); |
|
layer.style(index, {top: 'auto', bottom: 0}); |
|
return false; |
|
} |
|
}); |
|
} |
|
,test6: function(){ |
|
layer.open({ |
|
type: 2, |
|
content: 'https://www.aliyun.com/activity?userCode=ap0255is', |
|
area: ['375px', '500px'], |
|
id: 'iframe-1', |
|
hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层 |
|
maxmin: true |
|
}); |
|
} |
|
,testLoading: function(){ |
|
layer.load(0, { |
|
time: 5*1000 |
|
//content: '123' |
|
}); |
|
} |
|
,test7: function(){ |
|
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){ |
|
layer.close(index); |
|
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){ |
|
layer.close(index); |
|
layer.msg('演示完毕！您的口令：'+ util.escape(pass) +'<br>您最后写下了：'+ util.escape(text)); |
|
}); |
|
}); |
|
} |
|
,test8: function(){ |
|
layer.tab({ |
|
area: ['600px', '300px'], |
|
tab: [{ |
|
title: 'TAB1', |
|
content: '内容1' |
|
}, { |
|
title: 'TAB2', |
|
content: '内容2' |
|
}, { |
|
title: 'TAB3', |
|
content: '内容3' |
|
}] |
|
}); |
|
} |
|
,test9: function(){ |
|
layer.photos({ |
|
photos: { |
|
"data": [{ |
|
"src": "https://unpkg.com/outeres/demo/layer.png" |
|
}] |
|
}, |
|
hideFooter: true // 是否隐藏图片底部栏（v2.8.0 新增） |
|
}); |
|
} |
|
,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); |
|
} |
|
}); |
|
} |
|
,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.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>
|
|
|