layer 弹窗

简介

layer 是layui的一个弹出层组件，但是可以作为独立组件使用。单独使用去layer官网下载独立组件包，并且需引入jQuery1.8以上版本。

引入好layer.js后，直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

基础参数

• type：类型Number，0（信息框，默认），1（页面层），2（iframe层），3（加载层），4（tips层）

• title：类型String/Array/Boolean，普通字符串改变文本，数组形式的第二个参数是css样式，布尔值是不显示标题

  title: '我是标题'
  title: ['文本', 'font-size:18px;']
  title: false
  

• content：类型String/DOM/Array，content的内容需要根据type类型变化。

  /!* 如果是页面层 */
  layer.open({
    type: 1, 
    content: '传入任意的文本或html' //这里content是一个普通的String
  });
  layer.open({
    type: 1,
    content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
  });
  //Ajax获取
  $.post('url', {}, function(str){
    layer.open({
      type: 1,
      content: str //注意，如果str是object，那么需要字符拼接。
    });
  });
  
  /!* 如果是iframe层 */
  layer.open({
    type: 2, 
    content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
  });
  
  /!* 如果是用layer.open执行tips层 */
  layer.open({
    type: 4,
    content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
  });        
  

• skin：类型String，不仅可以传入内置的样式class名，还可以传入自定的class，目前layer内置的skin有：layui-layer-lanlayui-layer-molv。

• area：类型String/Array，默认情况下宽高是自适应的，想改变宽可以area: '500px'，宽高都要时area: ['500px','300px']。

• offset：类型String/Array，默认垂直水平居中

  值	备注
  offset: ‘auto’	默认坐标，即垂直水平居中
  offset: ‘100px’	只定义top坐标，水平保持居中
  offset: [‘100px’, ‘50px’]	同时定义top、left坐标
  offset: ‘t’	快捷设置顶部坐标

• icon：类型Number，信息框和加载层的私有参数。-1（信息框），0（加载层）。信息框有默认图标0-6，加载层有0-2。

• bth：类型String/Array，默认’确认’。定义多个按钮可以btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，按钮2开始是btn2: function(){}

  //eg2
  layer.open({
    content: 'test'
    ,btn: ['按钮一', '按钮二', '按钮三']
    ,yes: function(index, layero){
      //按钮【按钮一】的回调
    }
    ,btn2: function(index, layero){
      //按钮【按钮二】的回调
      
      //return false 开启该代码可禁止点击该按钮关闭
    }
    ,btn3: function(index, layero){
      //按钮【按钮三】的回调
      
      //return false 开启该代码可禁止点击该按钮关闭
    }
    ,cancel: function(){ 
      //右上角关闭回调
      
      //return false 开启该代码可禁止点击该按钮关闭
    }
  });
  

• btnAlign：类型String，按钮排列，默认右对齐。有’l’,‘c’,'r’三种，分别是左中右。

• closeBtn：类型String/Boolean，右上角的关闭x按钮，有两种风格1和2，0是个奇怪的东西，可以用false表示不显示。

• shade：类型String/Array/Boolean，默认0.3。即弹出层外的区域变暗，默认是0.3透明度的黑(’#000’)，定义别的颜色可以shade: [0.8, '#393D49']，不显示遮罩可以shade: 0。

• shadeClose：类型Boolean，默认关闭。用于控制能否点击弹窗外关闭弹窗。

• time：类型Number，默认0。自动关闭时间，单位毫秒(ms)。

• id：类型String，设置该值后不管什么类型的弹窗都只允许弹出一个，常用于页面层和iframe层模式。

• anim：类型Number，默认0。弹出动画，采用CSS3，有0-6七种模式，不想显示动画设置为-1。0就挺好的，别的适用于特殊场景。

• isOutAnim：类型Boolean，默认true。关闭弹窗时的过度动画，可以设置false关闭。区别不是很大，本身动画就比较克制。

• maxmin：类型Boolean，默认false。该参数仅对type: 1和type: 2有效，添加最大最小化按钮。

• fixed：类型Boolean，默认true。设定弹出窗口是否固定在屏幕中，不会随着滚轮移动。

• resize：类型Boolean，默认true。是否允许通过右下角拉伸窗口。该参数对loading,tips层无效。

• resizing：类型Function。监听窗口拉伸动作，当拉伸窗口时执行回调函数，函数参数是当前层的DOM对象

  resizing: function(layero){
    console.log(layero);
  }   
  

• scrollBar：类型Boolean，默认true。是否允许背景窗口滚动。

• maxWidth，maxHeight：类型Number。只有当area: 'auto'时才生效。

• zIndex：层叠顺序，用于解决与其他组件的层叠冲突。

• move：类型String/DOM/Boolean，默认’layui-layer-title’。触发拖拽的元素，可以用指定元素选择器或DOM，还可以配置false来禁止拖拽。

• moveOut：类型Boolean，默认false。是否允许拖拽到窗口外。

• moveEnd：类型Function。拖动完毕后的回调方法，使用同上面的resizing。

• tips：类型Number/Array，默认2。tips层的私有方法，从元素的上右下左四个方向出现，还可以定制颜色tips: [1, '#c00']。

• tipsMore：类型Boolean，默认false。是否允许多个tips存在。

• success：类型Function。在层创建完毕后的回调方法。携带参数分别是当前层DOM和当前层索引。

  layer.open({
    content: '测试回调',
    success: function(layero, index){
      console.log(layero, index);
    }
  });  
  

• yes：类型Function。确定按钮的回调方法。携带参数分别是当前层索引和当前层DOM。

  layer.open({
    content: '测试回调',
    yes: function(index, layero){
      //do something
      layer.close(index); //如果设定了yes回调，需进行手工关闭
    }
  });   
  

• cancel：类型Function。右上角关闭按钮的回调方法，携带参数分别是当前层索引和当前层DOM。

  cancel: function(index, layero){ 
    if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
      layer.close(index)
    }
    return false; 
  } 
  

• end：类型Function。层销毁后的回调方法，不管是确定还是关闭都调用。不携带参数。

• full，min，restore：类型Function。最大化、最小化、还原的回调方法。携带一个参数，当前层DOM。

内置方法

• layer.config(options)：初始化全局配置。一个既可以重要也不重要的方法。平常不怎么用，但是很有用。

  layer.config({
    anim: 1, //默认动画风格
    skin: 'layui-layer-molv' //默认皮肤
    …
  });
  

• layer.ready(callback)：在需要页面一打开就出现弹层时，最好将弹层放在ready方法里。毕竟加载总需要时间。

  //页面一打开就执行弹层
  layer.ready(function(){
    layer.msg('很高兴一开场就见到你');
  });      
  

• layer.open(options)：创建层的方法。options就是上面的基本参数。

• layer.alert(content, options, yes)：普通信息框。类似原生的弹窗，但是使用更加灵活，options就是基本参数。并且参数能够自动向左补齐（能跳过一些参数）。

  //eg1
  layer.alert('只想简单的提示');        
  //eg2
  layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
  //eg3
  layer.alert('有了回调', function(index){ //可以跳过第二个参数直接写回调函数
    //do something
    
    layer.close(index);
  });    
  

• layer.confirm(content, options, yes, cancel)：类似系统confirm但远胜confirm。需要把交互语句放在回调体里。同样是参数自动向左补齐。

  //eg2
  layer.confirm('is not?', function(index){
    //do something
    
    layer.close(index);
  });   
  

• layer.msg(content, options, end)：作者用心做的提示框。默认三秒后自动消失。参数自动补齐。

  layer.msg('同上', {
    icon: 1,
    time: 2000 //2秒关闭（如果不配置，默认是3秒）
  }, function(){
    //do something
  });
  

• layer.load(icon, options)：type:3的深度定制。load默认是不关闭的，因为一般在ajax回调体中关闭。

• layer.tips(content, follow, options)：type:4的深度定制。和msg一样低调，能够智能定位，知道该出现在哪里。默认是在元素右边弹出

  //eg 2
  $('#id').on('click', function(){
    var that = this;
    layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
  });
  //eg 3
  layer.tips('在上面', '#id', {
    tips: 1
  });
  

• layer.close(index)：关闭特定层。获取index的方式如下。

  //当你想关闭当前页的某个层时
  var index = layer.open();
  var index = layer.alert();
  var index = layer.load();
  var index = layer.tips();
  //正如你看到的，每一种弹层调用方式，都会返回一个index
  layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可
   
  //如果你想关闭最新弹出的层，直接获取layer.index即可
  layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
   
  //当你在iframe页面关闭自身时
  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  parent.layer.close(index); //再执行关闭
  

• layer.closeAll()：简单粗暴，关闭所有层。可以通过指定类型关闭特定类型。

  layer.closeAll(); //疯狂模式，关闭所有层
  layer.closeAll('dialog'); //关闭信息框
  layer.closeAll('page'); //关闭所有页面层
  layer.closeAll('iframe'); //关闭所有的iframe层
  layer.closeAll('loading'); //关闭加载层
  layer.closeAll('tips'); //关闭所有的tips层   
  

• layer.style(index, cssStyle)：重新定义层的样式，对load层和tips层无效。

• layer.title(title, index)：更改层的标题。

• layer.getChildFrame(selector, index)：在当前页视图获取iframe页的DOM时使用。

• layer.getFrameIndex(windowName)：获取特定iframe层的索引，一般在iframe关闭自身时用到。

• layer.iframeAuto(index)：指定iframe层高度自适应。

• layer.iframeSrc(index, url)：重置特定iframe url。

• layer.setTop(layero)：在多个窗口打开时，通过点击窗体能置顶当前窗口。

• layer.full()、layer.min()、layer.restore()：在自定义元素上触发最大小化

其他内置层

• layer.prompt(options, yes)： 输入层。参数自动向左补齐，yes方法携带参数value 表单值，index 索引，elem 表单元素

  //例子2
  layer.prompt({
    formType: 2,
    value: '初始值',
    title: '请输入值',
    area: ['800px', '350px'] //自定义文本域宽高
  }, function(value, index, elem){
    alert(value); //得到value
    layer.close(index);
  });
  

• layer.tab(options)：tab层。只定义了一个成员tab: []，呈现出一个多标签的弹窗。

  layer.tab({
    area: ['600px', '300px'],
    tab: [{
      title: 'TAB1', 
      content: '内容1'
    }, {
      title: 'TAB2', 
      content: '内容2'
    }, {
      title: 'TAB3', 
      content: '内容3'
    }]
  });        
  

• layer.photos(options)：相册层。支持传入json和直接读取页面图片两种方式。传入json需按照指定格式。photos还有个tab回调方法，切换图片时触发。

  //HTML示例
  <div id="layer-photos-demo" class="layer-photos-demo">
    <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
    <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  </div>
   
  <script>
  //调用示例
  layer.photos({
    photos: '#layer-photos-demo'
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    ,tab: function(pic, layero){
         console.log(pic) //当前图片的一些信息
       }
  }); 
  </script>