mirror of https://github.com/layui/layui
更新 layer 示例
贤心
parent
5ec579f2dc
commit
215f230d79
|
|
@ -19,15 +19,17 @@ body{padding: 100px;}
|
|||
<body>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
|
||||
<button class="layui-btn demo" data-type="test2">Confirm</button>
|
||||
<button class="layui-btn demo" data-type="test3">Msg</button>
|
||||
<button class="layui-btn demo" data-type="test4">Tips</button>
|
||||
<button class="layui-btn demo" data-type="test5">Page</button>
|
||||
<button class="layui-btn demo" data-type="test6">Iframe</button>
|
||||
<button class="layui-btn demo" data-type="test7">Prompt</button>
|
||||
<button class="layui-btn demo" data-type="test8">Tab</button>
|
||||
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
|
||||
<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="testTime">自动关闭</button>
|
||||
<a href="https://layui.gitee.io/v2/demo/layer.html" target="_blank" class="layui-btn">更多例子</a>
|
||||
</div>
|
||||
|
||||
<div id="test11111" style="display: none; padding: 20px;">
|
||||
|
|
@ -38,12 +40,11 @@ body{padding: 100px;}
|
|||
|
||||
<div class="layui-list">
|
||||
<ul class="layui-row" id="photos">
|
||||
<li class="list"><img src="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png"></li>
|
||||
<li class="list"><img src="https://res.layui.com/static/images/fly/fly.jpg"></li>
|
||||
<li class="list"><img src="https://unpkg.com/outeres/demo/1.jpg"></li>
|
||||
<li class="list"><img src="https://unpkg.com/outeres/demo/2.jpg"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var LAYUI_GLOBAL = {
|
||||
//path: '../src/'
|
||||
|
|
@ -91,64 +92,63 @@ 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');
|
||||
var index = layer.msg('Hello World');
|
||||
//layer.close(index);
|
||||
//runTest(1, $, layer);
|
||||
|
||||
|
||||
//触发事件
|
||||
var active = {
|
||||
// 触发事件
|
||||
util.on('lay-on', {
|
||||
test: 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);
|
||||
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;
|
||||
}
|
||||
,end: function(){
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
});
|
||||
}());
|
||||
}
|
||||
,test2: function(){
|
||||
layer.confirm('您是如何看待前端开发？', {
|
||||
btn: ['重要','奇葩'] //按钮
|
||||
layer.confirm('一个询问层的测试示例？', {
|
||||
btn: ['确定','关闭'] //按钮
|
||||
}, function(){
|
||||
layer.msg('的确很重要', {icon: 1});
|
||||
layer.msg('第一个回调', {icon: 1});
|
||||
}, function(){
|
||||
layer.msg('也可以这样', {
|
||||
layer.msg('第二个回调', {
|
||||
time: 20000, //20s后自动关闭
|
||||
btn: ['明白了', '知道了']
|
||||
});
|
||||
});
|
||||
}
|
||||
,test3: function(){
|
||||
layer.msg('提示中');
|
||||
!1 ? layer.msg('一个常用消息框')
|
||||
: layer.msg('一个常用消息框',{closeBtn: 0,time: 0, icon: 16});
|
||||
}
|
||||
,test4: function(){
|
||||
layer.tips('Hi，我是一个小提示', this, {tips: 1});
|
||||
}
|
||||
,test5: function(){
|
||||
layer.open({
|
||||
layer.open({
|
||||
title:'自定义页面层',
|
||||
type: 1,
|
||||
skin: 'layui-layer-rim',
|
||||
skin: 'layui-layer-border',
|
||||
area: ['1000px', '580px'],
|
||||
content: $('#test11111'),
|
||||
maxmin: true,
|
||||
shade: false,
|
||||
minStack: false, //最小化不堆叠在左下角
|
||||
id: 'page1', //定义 ID，防止重复弹出
|
||||
min: function(layero, index){
|
||||
|
||||
layer.msg('阻止了默认的最小化');
|
||||
layer.style(index, {top: 'auto', bottom: 0});
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -161,6 +161,12 @@ layui.use(['layer', 'util'], function(layer, util){
|
|||
,maxmin: true
|
||||
});
|
||||
}
|
||||
,testLoading: function(){
|
||||
layer.load(2, {
|
||||
//time: 5*1000
|
||||
//content: '123'
|
||||
});
|
||||
}
|
||||
,test7: function(){
|
||||
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
|
||||
layer.close(index);
|
||||
|
|
@ -185,8 +191,23 @@ layui.use(['layer', 'util'], function(layer, util){
|
|||
}]
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
,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.photos({
|
||||
|
|
@ -201,16 +222,8 @@ layui.use(['layer', 'util'], function(layer, util){
|
|||
|
||||
|
||||
//动态追加
|
||||
$('#photos').append('<li class="list"><img src="https://res.layui.com/static/images/sentsin/night.gif"></li>');
|
||||
|
||||
//{"status":1,"msg":"","title":"JSON请求的相册","id":8,"start":0,"data":[{"alt":"layer","pid":109,"src":"//cdn.layui.com/upload/2017_3/168_1488985841996_23077.png","thumb":""},{"alt":"说好的，一起 Fly","pid":110,"src":"//res.layui.com/static/images/fly/fly.jpg","thumb":""},{"alt":"星空如此深邃","pid":113,"src":"//res.layui.com/static/images/sentsin/night.gif","thumb":""}]}
|
||||
|
||||
|
||||
|
||||
$('.demo').on('click', function(){
|
||||
var type = $(this).data('type');
|
||||
active[type] ? active[type].call(this) : '';
|
||||
});
|
||||
$('#photos').append('<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>');
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue