layui.layer的简单使用入门
//layui.layer的基本使用
/** //相关属性 title : false, //标题 area : ['700px', '450px'], //弹框大小 area : '516px', //宽 icon : 1 //图标，默认皮肤可以传入0-6如果是加载层，可以传入0-2 ,shade : 0.01 //透明度 ,shadeClose: true, //点击遮罩关闭 ,offset : 't' //位置'auto'-默认居中 '100px'-只定义top坐标 ['100px', '50px']-同时定义top、left 't'-顶部 'r'-右边 'b'-底部 'l'-左边 'lt'-左上角 ,zIndex : 19891014 //默认：19891014（贤心生日 0.0） ,btnAlign: 'c' //'l':按钮左对齐 'c':按钮居中对齐 'r':按钮右对齐。默认值，不用设置 fixed : false, //不固定 maxmin : true, //最大化最小化按钮 maxWidth:100 //最大宽度 最大高度,maxHeight 只有当area: 'auto'时才有效 closeBtn: 0, //可通过配置1和2来展示两种风格，0:不显示 scrollbar: false, //屏蔽浏览器滚动条 resize : true, //是否允许拉伸 skin : 'layui-layer-rim', //加上边框'layui-layer-nobg', //没有背景色 anim : 6, //anim: 0 平滑放大。默认,anim: 1 从上掉落,anim: 2 从最底部往上滑入,anim: 3 从左滑入,anim: 4 从左翻滚,anim: 5 渐显,anim: 6 抖动 end : function(){} // 层销毁后触发的回调,无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。 resizing: function(layero){} //监听窗口拉伸动作 layer.full(index); //full()、min()、layer.restore()最大化、最小化、还原 后 layer.setTop(layero) //置顶当前窗口 layer.tab({ //tab层 area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '内容1' }, { title: 'TAB2', content: '内容2' }, { title: 'TAB3', content: '内容3' }] }); layer.photos({ //相册层 photos: '#layer-photos-demo' ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数） }); */
/******alert测试********/ var icon_type = 0; $("#alert_0").click(function(){ layer.alert("icon: "+ icon_type +'看过太多的人生指南，都快找不着"北"'
, { icon : icon_type ,yes : function(index){ icon_type++; if(icon_type>= 7) icon_type = 0; $("#alert_0").click(); }
,cancel : function(index){ //右上角关闭回调 alert("cancel："+index); } }); });
![]()
/******msg测试********/ $("#msg_0").click(function(){ layer.msg('消息框测试', { time: 0 //0:不自动关闭 ,btn: ['确定', '取消'] ,yes: function(index){ layer.close(index); layer.msg('任何一件事，只要心甘情愿并且坚持不懈，总是会变得简单', { icon: 1 }); } ,btn2:function(index){ layer.msg("我现在没空，忙着优秀。", { icon: 3 }); } }); });
/******tips测试********/ $("#tips_0").click(function(){ layer.tips("tips测试", "#tips_0",{ tips: [1, '#000'], //方位 1:上,2:右,3:右,4:左，颜色" timeout:0, //多久关闭,0为不自动 tipsMore: true, //不销毁之前的 }); }); $("#tips_1").click(function(){ layer.tips("与其抱怨，不如改变。", "#tips_1",{ tips: [1, '#000'], tipsMore: true, }); }); $("#tips_2").click(function(){ layer.tips("人不会苦一辈子，但总会苦一阵子。许多人为了逃避苦一阵子，却苦了一辈子。", "#tips_2", { tips: [2, '#666'] }); }); $("#tips_3").click(function(){ layer.tips("梦想尚未实现，远方尚未抵达，便不要停止奋力奔跑的脚步，努力永远都不晚！", "#tips_3", { tips: 3 }); }); $("#tips_4").click(function(){ layer.tips("别把最好的时光，浪费在无谓的等待与犹豫不决中。", "#tips_4",{ tips: [4] }); });
/******prompt测试********/ $("#prompt_0").click(function(){ layer.prompt(function(val, index){ layer.msg('不要假装很努力，因为结果不会陪你演戏! 得到了'+val); layer.close(index); }); });
/******加载层测试********/ var load_type = 0; $("#load_0").click(function(){ var layer_index = layer.load(load_type); layer.tips("load_type:"+load_type, "#load_0"); load_type++; if(load_type>=3){ load_type = 0; } //此处演示关闭 setTimeout(function(){ //layer.closeAll('loading'); //关闭全部加载层 layer.close(layer_index); //关闭指定 }, 1000); });
/******简单集合测试********/ $("#simple_collect_0").click(function(){ layer.alert('简单集合测试', { time: 0 //0:不自动关闭 ,area: ['500px', '180px'] ,btnAlign: 'c' //按钮居中 ,btn: ['alert','msg','tips','prompt','load'] ,yes:function(index){ layer.alert("一号按钮 alert。很多时候，我们欠缺的不是想法，而是付诸行动的勇气。"); } ,btn2:function(index){ layer.msg("二号按钮 msg。失败是什么?没有什么，只是更走近成功一步;成功是什么? 就是走过了所有通向失败的路，只剩下一条路，那就是成功的路。"); } ,btn3:function(index){ layer.tips("三号按钮 tips。树的方向，风决定。人的方向，自己决定。", "#simple_collect_0"); } ,btn4:function(index){ layer.prompt(function(val, index){ layer.msg('四号按钮得到了【'+val+"】。 你想要的，岁月凭什么给你，所有逆袭，都是有备而来，所有光芒，需要时间才能被看到，所有幸运，都是努力埋下的伏笔"); layer.close(index); }); } ,btn5:function(index){ //加载层测试 var layer_index = layer.load(load_type); layer.tips("加载层-load_type:"+load_type, "#simple_collect_0"); load_type++; if(load_type>=3){ load_type = 0; } setTimeout(function(){ //layer.closeAll('loading'); //关闭全部加载层 layer.close(layer_index); //关闭指定 }, 1000); } }); });
/******************************open*************************/ /******信息框*******/ $("#open_0").click(function(){ layer.open({ type: 0, icon: 0, content: '宠辱不惊，闲庭信步' }); });
/******如果是页面层*******/ $("#open_1").click(function(){ layer.open({ type: 1, icon: 2, area: ['600px', '360px'], content: '何必等以后，梦想就在当下' }); });
/******如果是页面层*******/ $("#open_1").click(function(){ layer.open({ type: 1, icon: 2, area: ['300px', '160px'], content: '<center style="color:#a23">何必等以后，梦想就在当下</center>' }); });
$("#open_2").click(function(){ layer.open({ type: 1, content: $('#refer_outer_open_2') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); });
/******如果是iframe层*******/ $("#open_3").click(function(){ layer.open({ title:'type:2, 打开网页,父子层演示', type: 2, area: ['1200px','500px'], content: ['child.html','yes'] //URL，是否滚动条 }); });
/******如果是tips*******/ $("#open_4").click(function(){ //layer.open执行tips层 layer.open({ type: 4, //tips time: 5000, content: ['type:4, tips提示。', '#open_4'] //数组第二项即吸附元素选择器或者DOM }); });
//4 父子层 child.html //注意：parent 是 JS 自带的全局对象，可用于操作父页面 //父子层演示，file:///访问,console台js报错,需要服务环境运行 var index = parent.layer.getFrameIndex(window.name); //获取当前窗口索引 //让层自适应iframe $('#auto').on('click', function(){ $('body').append('当你认为困难的时候，其实就是最接近成功的时候'); parent.layer.iframeAuto(index); }); //在父层弹出一个层 $('#new').on('click', function(){ parent.layer.msg('Hi, man', {shade: 0.3}) });
//给父页面传值 $('#transmit').on('click', function(){ var val = $('#name').val(); if(val === '' || undefined === val){ parent.layer.msg('请填写值'); return; } var i = RandomNumBoth(100000,999999); parent.$('#parentIframe').text("【"+ val +"】+随机数："+ i); parent.layer.tips('看这里看这里', '#parentIframe', {tips:1,time: 0}); parent.layer.close(index); });![]()
//关闭iframe
$('#closeIframe').click(function(){
parent.layer.msg('关闭了子窗口');
parent.layer.close(index);
});
![]()
![]()
/********************所有代码*************************/
testLayer.html
<!DOCTYPE HTML>
<html>
<head>
<title>test layer</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 修改相应的js路径 -->
<script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/layer-v3.1.1/layer.js"></script>
</head>
<div id="refer_outer_open_2" style="display:none;margin:10px">
<h2> 任何事情，都有一个过程，坚持一下，再坚持一下。播种和收获，本来就不在一个季节!</h2>
</div>
<body>
<style>
.layui-btn {
display: inline-block;
vertical-align: middle;
height: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #009688;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px;
border: none;
border-radius: 2px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<div>
<h1>********************layer演示*********************</h1>
</div>
<div>
<br />
<h2>alert演示</h2>
<button id="alert_0" class="layui-btn">alert_0.alert测试</button>
</div>
<div>
<br />
<h2>msg演示</h2>
<button id="msg_0" class="layui-btn">msg_0.msg测试</button>
</div>
<div>
<br />
<h2>tips演示</h2>
<button id="tips_0" class="layui-btn">tips_0.tips提示测试</button>
<button id="tips_1" class="layui-btn">tips_1.上侧提示</button>
<button id="tips_2" class="layui-btn">tips_2.右侧提示</button>
<button id="tips_3" class="layui-btn">tips_3.下侧提示</button>
<button id="tips_4" class="layui-btn">tips_4.左侧提示</button>
</div>
<div>
<br />
<h2>prompt演示</h2>
<button id="prompt_0" class="layui-btn">prompt_0.prompt提示测试</button>
</div>
<div>
<br />
<h2>load演示</h2>
<button id="load_0" class="layui-btn">load_0.加载层测试</button>
</div>
<div>
<br />
<h2>简单集合演示</h2>
<button id="simple_collect_0" class="layui-btn">simple_collect_0.简单集合测试</button>
</div>
<div>
<br />
<h2>**********************open演示, 信息框*****************************</h2>
<button id="open_0" class="layui-btn">open_0.自定义内容 type:0</button>
</div>
<div>
<br />
<h2>页面层</h2>
<button id="open_1" class="layui-btn">open_1.自定义内容 type:1</button>
</div>
<div>
<br />
<h2>引用dom</h2>
<button id="open_2" class="layui-btn">open_2.引用dom type:1</button>
</div>
<div>
<br />
<h2>iframe层</h2>
<button id="open_3" class="layui-btn">open_3.iframe层 type:2</button>
父子层传值显示：<span id="parentIframe" class="layui-layer-title">值：无</span>
</div>
<div>
<br />
<h2>tips层</h2>
<button id="open_4" class="layui-btn">open_4.iframe层 type:4</button>
</div>
<script type="text/javascript">
/**
//相关属性
title : false, //标题
area : ['700px', '450px'], //弹框大小
area : '516px', //宽
icon : 1 //图标，默认皮肤可以传入0-6如果是加载层，可以传入0-2
,shade : 0.01 //透明度
,shadeClose: true, //点击遮罩关闭
,offset : 't' //位置'auto'-默认居中 '100px'-只定义top坐标 ['100px', '50px']-同时定义top、left 't'-顶部 'r'-右边 'b'-底部 'l'-左边 'lt'-左上角
,zIndex : 19891014 //默认：19891014（贤心生日 0.0）
,btnAlign: 'c' //'l':按钮左对齐 'c':按钮居中对齐 'r':按钮右对齐。默认值，不用设置
fixed : false, //不固定
maxmin : true, //最大化最小化按钮
maxWidth:100 //最大宽度 最大高度,maxHeight 只有当area: 'auto'时才有效
closeBtn: 0, //可通过配置1和2来展示两种风格，0:不显示
scrollbar: false, //屏蔽浏览器滚动条
resize : true, //是否允许拉伸
skin : 'layui-layer-rim', //加上边框'layui-layer-nobg', //没有背景色
anim : 6, //anim: 0 平滑放大。默认,anim: 1 从上掉落,anim: 2 从最底部往上滑入,anim: 3 从左滑入,anim: 4 从左翻滚,anim: 5 渐显,anim: 6 抖动
end : function(){} // 层销毁后触发的回调,无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
resizing: function(layero){} //监听窗口拉伸动作
layer.full(index); //full()、min()、layer.restore()最大化、最小化、还原 后
layer.setTop(layero) //置顶当前窗口
layer.tab({ //tab层
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
layer.photos({ //相册层
photos: '#layer-photos-demo'
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
*/
/******alert测试********/
var icon_type = 0;
$("#alert_0").click(function(){
layer.alert("icon: "+ icon_type +'看过太多的人生指南，都快找不着"北"'
, { icon : icon_type ,yes : function(index){ icon_type++; if(icon_type>= 7) icon_type = 0; $("#alert_0").click(); }
,cancel : function(index){ //右上角关闭回调 alert("cancel："+index); } }); }); /******msg测试********/ $("#msg_0").click(function(){ layer.msg('消息框测试', { time: 0 //0:不自动关闭 ,btn: ['确定', '取消'] ,yes: function(index){ layer.close(index); layer.msg('任何一件事，只要心甘情愿并且坚持不懈，总是会变得简单', { icon: 1 }); } ,btn2:function(index){ layer.msg("我现在没空，忙着优秀。", { icon: 3 }); } }); }); /******tips测试********/ $("#tips_0").click(function(){ layer.tips("tips测试", "#tips_0",{ tips: [1, '#000'], //方位 1:上,2:右,3:右,4:左，颜色" timeout:0, //多久关闭,0为不自动 tipsMore: true, //不销毁之前的 }); }); $("#tips_1").click(function(){ layer.tips("与其抱怨，不如改变。", "#tips_1",{ tips: [1, '#000'], tipsMore: true, }); }); $("#tips_2").click(function(){ layer.tips("人不会苦一辈子，但总会苦一阵子。许多人为了逃避苦一阵子，却苦了一辈子。", "#tips_2", { tips: [2, '#666'] }); }); $("#tips_3").click(function(){ layer.tips("梦想尚未实现，远方尚未抵达，便不要停止奋力奔跑的脚步，努力永远都不晚！", "#tips_3", { tips: 3 }); }); $("#tips_4").click(function(){ layer.tips("别把最好的时光，浪费在无谓的等待与犹豫不决中。", "#tips_4",{ tips: [4] }); }); /******prompt测试********/ $("#prompt_0").click(function(){ layer.prompt(function(val, index){ layer.msg('不要假装很努力，因为结果不会陪你演戏! 得到了'+val); layer.close(index); }); }); /******加载层测试********/ var load_type = 0; $("#load_0").click(function(){ var layer_index = layer.load(load_type); layer.tips("load_type:"+load_type, "#load_0"); load_type++; if(load_type>=3){ load_type = 0; } //此处演示关闭 setTimeout(function(){ //layer.closeAll('loading'); //关闭全部加载层 layer.close(layer_index); //关闭指定 }, 1000); }); /******简单集合测试********/ $("#simple_collect_0").click(function(){ layer.alert('简单集合测试', { time: 0 //0:不自动关闭 ,area: ['500px', '180px'] ,btnAlign: 'c' //按钮居中 ,btn: ['alert','msg','tips','prompt','load'] ,yes:function(index){ layer.alert("一号按钮 alert。很多时候，我们欠缺的不是想法，而是付诸行动的勇气。"); } ,btn2:function(index){ layer.msg("二号按钮 msg。失败是什么?没有什么，只是更走近成功一步;成功是什么? 就是走过了所有通向失败的路，只剩下一条路，那就是成功的路。"); } ,btn3:function(index){ layer.tips("三号按钮 tips。树的方向，风决定。人的方向，自己决定。", "#simple_collect_0"); } ,btn4:function(index){ layer.prompt(function(val, index){ layer.msg('四号按钮得到了【'+val+"】。 你想要的，岁月凭什么给你，所有逆袭，都是有备而来，所有光芒，需要时间才能被看到，所有幸运，都是努力埋下的伏笔"); layer.close(index); }); } ,btn5:function(index){ //加载层测试 var layer_index = layer.load(load_type); layer.tips("加载层-load_type:"+load_type, "#simple_collect_0"); load_type++; if(load_type>=3){ load_type = 0; } setTimeout(function(){ //layer.closeAll('loading'); //关闭全部加载层 layer.close(layer_index); //关闭指定 }, 1000); } }); }); /******************************open*************************/ /******信息框*******/ $("#open_0").click(function(){ layer.open({ type: 0, icon: 0, content: '宠辱不惊，闲庭信步' }); }); /******如果是页面层*******/ $("#open_1").click(function(){ layer.open({ type: 1, icon: 2, area: ['300px', '160px'], content: '<center style="color:#a23">何必等以后，梦想就在当下</center>' }); }); $("#open_2").click(function(){ layer.open({ type: 1, content: $('#refer_outer_open_2') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); }); /******如果是iframe层*******/ $("#open_3").click(function(){ layer.open({ title:'type:2, 打开网页,父子层演示', type: 2, area: ['1200px','500px'], content: ['child.html','yes'] //URL，是否滚动条 }); }); /******如果是tips*******/ $("#open_4").click(function(){ //layer.open执行tips层 layer.open({ type: 4, //tips time: 5000, content: ['type:4, tips提示。', '#open_4'] //数组第二项即吸附元素选择器或者DOM }); }); </script> </body> </html>
child.html
<!DOCTYPE HTML>
<html>
<head>
<title>child</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 修改相应的js路径 -->
<script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/layer-v3.1.1/layer.js"></script>
</head>
<div id="refer_outer_open_2" style="display:none;margin:10px">
<h2> 任何事情，都有一个过程，坚持一下，再坚持一下。播种和收获，本来就不在一个季节!</h2>
</div>
<body>
<style>
.layui-btn {
display: inline-block;
vertical-align: middle;
height: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #009688;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px;
border: none;
border-radius: 2px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<div>
<br />
<h2>父子层演示，file:///访问报错,需要服务环境运行</h2>
<button id="alert_0" class="layui-btn">alert测试</button>
</div>
<div>
<br />
<h2>让层自适应iframe</h2>
<button id="auto" class="layui-btn">让层自适应iframe</button>
</div>
<div>
<br />
<h2>在父层弹出一个层</h2>
<button id="new" class="layui-btn">在父层弹出一个层</button>
</div>
<div>
<br />
<h2>给父页面传值</h2>
<button id="transmit" class="layui-btn">给父页面传值</button> 值：<input class="layui-input" id="name">
</div>
<div>
<br />
<h2>关闭iframe</h2>
<button id="closeIframe" class="layui-btn">关闭iframe</button>
</div>
<!--js-->
<script type="text/javascript">
function RandomNumBoth(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range); //四舍五入
return num;
}
/******alert测试********/
$("#alert_0").click(function(){
layer.alert("提示：父子层演示，file:///访问报错,需要服务环境运行", {
icon: 7
});
});
//4 父子层 child.html
//注意：parent 是 JS 自带的全局对象，可用于操作父页面
//父子层演示，file:///访问,console台js报错,需要服务环境运行
var index = parent.layer.getFrameIndex(window.name); //获取当前窗口索引
//让层自适应iframe
$('#auto').on('click', function(){
$('body').append('当你认为困难的时候，其实就是最接近成功的时候');
parent.layer.iframeAuto(index);
});
//在父层弹出一个层
$('#new').on('click', function(){
parent.layer.msg('Hi, man', {shade: 0.3})
});
//给父页面传值
$('#transmit').on('click', function(){
var val = $('#name').val();
if(val === '' || undefined === val){
parent.layer.msg('请填写值');
return;
}
var i = RandomNumBoth(100000,999999);
parent.$('#parentIframe').text("【"+ val +"】+随机数："+ i);
parent.layer.tips('看这里看这里', '#parentIframe', {tips:1,time: 0});
parent.layer.close(index);
});
//关闭iframe
$('#closeIframe').click(function(){
parent.layer.msg('关闭了子窗口');
parent.layer.close(index);
});
</script>
</body>
</html>
浙公网安备 33010602011771号