layer ----- 弹层

Posted 2020-08-31

模块加载名称：layer，layer独立组件官网：layer.layui.com

layer可以独立使用，也可以通过Layui模块化使用。按照实际需求来选择。只使用layer，你可以去layer独立组件官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。如果你使用的是Layui，那么你直接在官网下载layui框架即可，无需引入jQuery和layer.js，但需要引入layui.css和layui.js

,解压后可放在extend下，

，

layer提供了5种层类型(type)。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。

-----------我是分割线-----------
一：layer.open(options) 原始核心方法。按钮btn：
layer.open({
          type:0,                        //默认为0
          content:‘<b>你确定？</b>‘,
              btn:[‘我确定‘,‘取消‘,‘不确定‘],
              closeBtn:‘1‘,                     //两种关闭按钮的风格 1,2  不显示：0
              btnAlign: ‘l‘,                    //按钮对齐方式‘l,r,c’
              yes:function(index,layero){alert(‘你确定‘);layer.close(index)},//如果设定了yes回调，需进行手工关闭,
              btn2:function(index,layero){alert(‘你拒绝‘);return false},  //默认关闭，如果不想关闭，return false;
              btn3:function(index,layero){alert(‘你不确定‘)},
              cancel:function(index){                              //右上角关闭按钮
                  if (confirm(‘确定要关闭吗？‘)){
                      layer.close(index);
                  }
                  return false;
              },
             end:function(){alert(‘弹窗没有啦~‘)}         //无论是确认还是取消，只要层被销毁了，end都会执行，
  });
信息框弹层下，btn默认是一个确定按钮，你可以自定义多个按钮，和这些按钮的回调，按钮一和按钮二默认为yes和cancle；


---------------我是分割线----------------------------------------
二：layer.confirm(content,options,yes,cancel)  询问框

layer.confirm(‘是真的吗？‘, {
          icon:5,                  //图标。信息框和加载层的私有参数 信息框0-6，加载层0-2
          title:‘请你看清楚‘,        //层标题
          btn:[‘当然‘,‘骗你的‘,‘你猜‘],
          btnAlign:‘r‘,   
          btn3:function(index,layero){alert(‘我不猜‘)}
        },
       function(index,layero){        //按钮一的回调
          layer.style(index,{    //layer.style(index,cssStyle)参数index为层的索引，重新定义层的样式
              width:‘100px‘,
              top:‘10px‘
          });
          layer.title(‘好吧我改变了标题‘,index);   //layer.title(‘title....‘,index) 改变层的标题
          alert(‘我相信你‘);
          layer.close(index);   //手动关闭
       },  
      function(index){alert(‘你是骗子‘)}          //按钮二的回调
  );
你需要把交互的语句放在回调体中，它的参数是自动补齐的。

--------------------我是分割线-----------------------
三：layer.prompt(option,yes) 输入层  

layer.prompt({
    formType:2,    
    value:‘我喜欢‘,    //初始值
    title:‘你喜欢吗？‘, //标题
    area:[‘150px‘,‘50px‘],
    maxlength:140       //可输入文本的最大长度，默认500
},function(value,index,elem){       //参数自动补齐，value表单值，index索引，elem表单元素
    alert("你的答案是"+value);
    layer.close(index);
});

------------我是分割线-----------------------------
四：layer.tab(options)    tab层

layer.tab({
     area:[‘500px‘,‘300px‘],
     tab:[{
         title:‘标题一‘,
         content:‘内容一不拉不拉‘
     },{
         title:‘标题二‘,
         content:‘内容二不拉不拉‘
     },{
         title:‘标题三‘,
         content:‘内容三不拉不拉‘
     }]
 });

------------------分割线----------------------------------------------------------------------
五：layer.tips(content,follow,options)    tips层

layer.tips("名字只能是中英文","#sName",{tips:[2,‘#FF00FF‘],tipsMore: true});   它能灵活地判断它应该出现在哪边。默认是在元素右边弹出 1--4  ,tipsMore 是否允许出现多个tips

-------------------------------------------------分割线-----------------------
六：layer.load(icon,options)  加载层

  layer.load(2,{time:5*1000});        //load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。设置最长等待时间

七：layer.ready(callback)  初始化就绪     

layer.ready(function(){   //当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：
    layer.msg("欢迎你");
})

-------------------------------------分割线----------------------------------
八： layer.setTop(layero);   置顶当前窗口

layer.open({
    type: 2,    //ifram层
    anim:1,      //动画采用CSS3，0--6种形式  除了ie6-9，其它所有浏览器都是支持的
    shade:[0.6,‘grey‘],   //弹层外区域。如果你不想显示遮罩，可以shade: 0
    shadeClose:true,     //点击弹层外区域可以关闭弹层
    fixed:false,       //鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
    resize:false,      //是否允许右下角拉伸
    move：false,       //默认触发标题区域可拖拽，false不可拖动，也可自定义拖拽地方 ‘#tableone‘
    moveOut:false,     //是否允许拖拽到窗口外
    moveEnd:function(){alert(‘你把我拖到这里了‘)}     //拖动完毕后的回调
    area: ‘500px‘,       //自定义文本域宽高 [‘800px‘, ‘350px‘]
    maxmin: true,       //最大化最小化，对type12有用，默认false
    content: ‘http://www.layui.com‘,
    zIndex: layer.zIndex, 
    success: function(layero){       //层成功弹出后的回调
        layer.setTop(layero);    //当你的页面有很多很多layer窗口，你需要点击某个窗口，该窗体就置顶在上面，那么setTop可以来轻松实现
    },
    full:function(layero){alert("你把我最大化了")},   //最大化后的回调
    min:function(layero){alert("你把我最小化了")},    //最小化后的回调
    restore:function(layero){alert("你把我还原了")}   //还原后的回调
});

-------------------------------------------------分割线--------------------------------------------------------
九：layer.closeAll(type)   关闭所有层

  layer.closeAll();
  layer.closeAll(‘dialog‘);  //关闭所有信息框
  layer.closeAll(‘page‘);
  layer.closeAll(‘iframe‘);
  layer.closeAll(‘loading‘);
  layer.closeAll(‘tips‘);
-----------------------------------------------我是分割线-------------------------------
十：layer.config()  //初始化全局配置    配置层默认的基础参数
layer.config({ 
    anim:3,
    skin:‘layui-layer-lan‘
})
----------------------------------------------------我是分割线--------------------------------
十一：layer.alert()    信息框

layer.alert(‘呵呵，我是个简单的提示‘);
layer.alert(‘我是有图标有回调的提示‘,
            {icon:3},
            function(index){
                     alert(‘需要手动关闭‘);layer.close(index)
              }
          );

---------------------------------------------我是分割线------------------------------------------
十二：layer.msg(content,options,end) 提示框

layer.msg(‘我是个丰富的提示框‘,
          {icon:6,time:2000},
          function(){
                alert(‘我消失了吧‘);
          }
         );

----------------------------------------------我是分割线--------------------------------------------
十三：layer.style(index,cssStyle) 定义层样式

layer.style(index,{    //参数index为层的索引，重新定义层的样式
    width:‘100px‘,
    top:‘10px‘
});
    layer.title(‘好吧我改变了标题‘,index); //重新定义层的标题
    layer.full()、layer.min()、layer.restore() // 一般用于在自定义元素上触发最大化、最小化和全屏
十：skin   样式类名
skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。目前layer内置的skin有：layui-layer-lanlayui-layer-molv。

layer.config({
    skin: ‘demo-class‘
})
//CSS

body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}

body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
十一：其他
maxWidth:360     //默认为360，只有当area:auto 时，该设定才有效
layer.photos()和自定义skin方法下回分解