layer弹出框插件参数及⽅法介绍
Layui 是⼀款采⽤⾃⾝模块规范编写的情怀型前端UI框架，遵循原⽣HTML/CSS/JS的书写与组织形式，门槛极低，拿来即⽤。其外在极简，却⼜不失饱满的内在，体积轻盈，组件丰盈，从核⼼代码到API的每⼀处细节都经过精⼼雕琢，⾮常适合界⾯的快速开发
1.引⼊js 和css
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="layui.all.js"></script>
<link rel="stylesheet" href="css/layui.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="layui.all.js"></script>
<link rel="stylesheet" href="css/layui.css">
</head>
<body>
<div id="one">
<input type="button" value="确定">
<input id="b3" type="button" value="确定">
</div>
<script>
/
/ layer.msg('hello');
// layer.msg('不开⼼。。', {icon: 5});
什么面膜美白效果好// firm('纳尼？', {//⾃定义弹出框
// btn: ['按钮⼀', '按钮⼆', '按钮三'] //可以⽆限个按钮
// , btn3: function (index, layero) {
// //按钮【按钮三】的回调
// alert(333)
// }
// }, function (index, layero) {
// //按钮【按钮⼀】的回调
// alert(111)
/
/ }, function (index) {
// //按钮【按钮⼆】的回调
// alert(222)
// });
$('input').click(function () {
layer.open({
id:0,//⽤于控制弹层唯⼀标识
area: ['600px', '400px'],
// offset: 'lt',//设置弹出框的位置
type:2,//layer提供了5种层类型。可传⼊的值有：0（信息框，默认）1（页⾯层）2（iframe层）3（加载层）4（tips层）。若你采⽤layer.open({type: 1})⽅式调⽤，则type为必填项（信息框除外）
closeBtn:1,//设置关闭按钮默认1 可设置参数0 1 2
shade:0.3,//遮罩：0.3
shadeClose:false,//是否点击遮罩关闭 ，默认false
// time:5000,//⾃动关闭所需毫秒默认：0 默认不会⾃动关闭。当你想⾃动关闭时，可以time: 5000，即代表5秒后⾃动关闭，
anim:0,//弹出动画⽬前anim可⽀持的动画类型有0-6 如果不想显⽰动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本⽤的是 shift 参数
isOutAnim:true,//关闭动画（layer 3.0.3新增）默认情况下，关闭层时会有⼀个过度动画。如果你不想开启，设置 isOutAnim: false 即可
maxmin:false,//该参数值对type:1和type:2有效。默认不显⽰最⼤⼩化按钮。需要显⽰配置maxmin: true即可
fixed:true,//即⿏标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
resize:false,//默认情况下，你可以在弹层右下⾓拖动来拉伸尺⼨。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层⽆效
scrollbar:true,//是否允许浏览器出现滚动条默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
maxWidth:500,//默认：360 请注意：只有当area: 'auto'时，maxWidth的设定才有效。
maxHeight:800,// 默认：⽆请注意：只有当⾼度⾃适应时，maxHeight的设定才有效。
zIndex:19891014,//默认：19891014 ⼀般⽤于解决和其它组件的层叠冲突。
move:'.layui-layer-title',// 触发拖动的元素默认：'.layui-layer-title' 默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁⽌拖拽// yes:function (index, layero) {//确定按钮回调⽅法该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：
// alert("确定后要做的事情");
// layer.close(index); //如果设定了yes回调，需进⾏⼿⼯关闭
// },
cancel:function (index, layero) {//右上⾓关闭按钮触发的回调该回调携带两个参数，分别为：当前层索
引参数（index）、当前层的DOM对象（layero），默认会⾃动触发关闭。如果不想关闭，return false即可 if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭设置 type:2 closeBtn:2,
layer.close(index)
}
return false;
},
resizing:function () {
alert(111111)
},
title: "查看⽂章",
content: 'user.html',//这⾥content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content:
// success:function () {//层弹出后的成功回调⽅法
// alert("窗⼝弹出成功了！");
// }
});
});
//⽅法⼤全
//layer.open(options) - 原始核⼼⽅法
//-----------------------------------------------------------------------------------------------------
//1.layer.alert(content, options, yes) - 普通信息框它的弹出似乎显得有些⾼调，⼀般⽤于对⽤户造成⽐较强烈的关注，类似系统alert，
// 但却⽐alert更灵便。它的参数是⾃动向左补齐的。通过第⼆个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可
// layer.alert('有了回调', function(index){
// //do something
// alert(1111);
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//firm(content, options, yes, cancel) - 询问框类似系统confirm，但却远胜confirm，
// 另外它不是和系统的confirm⼀样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是⾃动补齐的。
// firm('is not?', {icon: 3, title:'提⽰'}, function(index){
// //do something
//
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------怎么申请
//3. layer.msg(content, options, end) - 提⽰框我们在源码中⽤了相对较⼤的篇幅来定制了这个msg，
// ⽬的是想将其打造成露脸率最⾼的提⽰框。⽽事实上我的确也在⼤量地使⽤它。
// 因为它简单，⽽且⾜够得⾃觉，它不仅占据很少的⾯积，⽽且默认还会3秒后⾃动消失所有这⼀切都决定了我对msg的爱。
// 因此我赋予了它许多可能在外形⽅⾯，它坚持简陋的变化，在作⽤⽅⾯，它坚持零⽤户操作。⽽且它的参数也是⾃动补齐的。
//eg1
// layer.msg('只想弱弱提⽰');
//eg2
// layer.msg('有表情地提⽰', {icon: 6});
//eg3
// layer.msg('关闭后想做些什么', function(){
// //do something
// });
//eg
所得税分录// layer.msg('同上', {
// icon: 1,
// time: 2000 //2秒关闭（如果不配置，默认是3秒）
// }, function(){
// //do something
/
/ });
//-----------------------------------------------------------------------------------------------------
//4.layer.load(icon, options) - 加载层 type:3的深度定制。load并不需要你传太多的参数，但如果你不喜欢默认的加载风格，
// 你还有选择空间。icon⽀持传⼊0-2如果是0，⽆需传。另外特别注意⼀点：load默认是不会⾃动关闭的，因为你⼀般会在ajax回调体中关闭它。
//eg1
// var index = layer.load();
//eg2
// var index = layer.load(1); //换了种风格
//eg3
// var index = layer.load(2, {time: 10*1000}); //⼜换了种风格，并且设定最长等待10秒
重庆住房公积金
//关闭
// layer.close(index);
//-----------------------------------------------------------------------------------------------------
//layer.tips(content, follow, options) - tips层 type:4的深度定制。也是我本⼈⽐较喜欢的⼀个层类型，
// 因为它拥有和msg⼀样的低调和⾃觉，⽽且会智能定位，即灵活地判断它应该出现在哪边。默认是在元素右边弹出
//eg1
// layer.tips('只想提⽰地精准些', '#b3');
//eg 2
// $('#b3').on('click', function(){
// var that = this;
// layer.tips('只想提⽰地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
// });
//eg 3
// layer.tips('在上⾯', '#b3', {
// tips: 1
// });
//-----------------------------------------------------------------------------------------------------
//layer.prompt(options, yes) - 输⼊层 prompt的参数也是向前补齐的。options不仅可⽀持传⼊基础参数，还可以传⼊prompt专⽤的属性。当然，
// 也可以不传。yes携带value 表单值index 索引elem 表单元素
// layer.prompt(function(value, index, elem){
// alert(value); //得到value
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//layer.tab(options) - tab层 tab层只单独定制了⼀个成员，即tab: []，例⼦
// layer.tab({
// area: ['600px', '300px'],
// tab: [{
// title: 'TAB1',
// content: '内容1'
// }, {
// title: 'TAB2',
// content: '内容2'
/
/ }, {
// title: 'TAB3',
// content: '内容3'谐音古诗大全
// }]
// });
//-----------------------------------------------------------------------------------------------------
//layer.setTop(layero) -置顶当前窗⼝⾮常强⼤的⼀个⽅法，虽然⼀般很少⽤。但是当你的页⾯有很多很多layer窗⼝，
// 你需要像Window窗体那样，点击某个窗⼝，该窗体就置顶在上⾯，那么setTop可以来轻松实现。它采⽤巧妙的逻辑，以使这种置顶的性能达到最优// layer.open({
企业口号// type: 2,
// shade: false,
// area: '500px',
// maxmin: true,
// content: 'www.layui',
// zIndex: layer.zIndex, //重点1
// success: function(layero){
// layer.setTop(layero); //重点2
// }
// });
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论