一、基础参数

1layer:open基础参数

layer.open({    	  type: 1//基本层类型:0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）    	 ,title:'新增'//标题:三种类型：（1）title :'我是标题'   （2）title: ['文本', 'font-size:18px;'] （3） title: false    	 ,content: '好' //content:这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响    	 ,skin: ''  //样式类名 :自定义弹出框样式    	 ,area: ['500px', '300px'] //宽高:定义高度和宽度，不定义将自适应，可以只定义一个    	 ,offset: 'rt'  //坐标:默认垂直水平居中         ,btn: ['按钮一', '按钮二', '按钮三']//按钮:可以是多个         ,closeBtn: 1 //关闭按钮：配置1和2来展示，如果不显示，则closeBtn: 0         ,shade: [0.8, '#393D49'] //遮罩：shade: [0.8, '#393D49']；如果不想显示遮罩，可以shade: 0         ,shadeClose:true //是否点击遮罩关闭：true表示点击遮罩关闭，false表示点击遮罩不关闭，默认false         ,time: 5000 //自动关闭所需毫秒:秒后自动关闭,默认不会自动关闭         ,id:'123'//用于控制弹层唯一标识:设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式         ,anim:1 //弹出动画:支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可         ,isOutAnim:false//关闭动画 :关闭层时会有一个过度动画。如果不想开启，设置 isOutAnim: false 即可,默认true         ,maxmin:true //最大最小化:该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可。默认false         ,fixed:true //固定:即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可。默认为true         ,resize:false //是否允许拉伸:默认情况下，可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效。默认为true         ,resizing:function(layero){//监听窗口拉伸动作:当拖拽弹层右下角对窗体进行尺寸调整时，如果设定了该回调，则会执行。回调返回一个参数：当前层的DOM对象。默认为null        	  console.log(layero);         }          ,scrollbar:false//是否允许浏览器出现滚动条:默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽         ,maxWidth:300//最大宽度:设置弹出框最大宽度，只有当area: 'auto'时，maxWidth的设定才有效。         ,maxHeight:300//最大高度:设置弹出框最大高度，只有当高度自适应时，maxHeight的设定才有效         ,zIndex:199999//层叠顺序         ,move:'.mine-move' //触发拖动的元素:如move: '.mine-move',表示可拖拽样式为mine-move的区域。配置设定move: false来禁止拖拽，默认'.layui-layer-title'         ,moveOut:true//是否允许拖拽到窗口外:默认只能在窗口内拖拽，如果想让拖到窗外，那么设定moveOut: true即可         ,moveEnd: function(layero){}//拖动完毕后的回调方法:其中layero为当前层的DOM对象,默认为null         ,tips: [1, '#c00']//方向和颜色:支持上右下左四个方向，通过1-4进行方向设定,定义一些颜色，可以设定tips: [1, '#c00']         ,tipsMore: true//层弹出后的成功回调方法:允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启         ,success: function(layero, index){//层弹出后的成功回调方法:当需要在层创建完毕时即执行一些语句，可以通过该回调,默认：null        	    console.log(layero, index);//layero, index别是当前层DOM当前层索引         }         ,yes: function(index, layero){//确定按钮回调方法:该回调携带两个参数，分别为当前层索引、当前层DOM对象,默认：null        	    //do something        	    layer.close(index); //如果设定了yes回调，需进行手工关闭        }        ,cancel: function(index, layero){ //右上角关闭按钮触发的回调:该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可,默认：null        	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭        		    layer.close(index)          }        }        ,end:function(){//层销毁后触发的回调:无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。默认：null        	        }        ,full:function(layero){//full/min/restore -分别代表最大化、最小化、还原 后触发的回调,携带一个参数，即当前层DOM,默认：null        	        }      });

2、按钮回调方法

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

二、核心函数

1、layer.config(options) - 初始化全局配置

（1）采用seajs或者requirejs加载layer

layer.config({//layer就会去加载一些它所需要的配件，比如css等。    path: '/res/layer/' //layer.js所在的目录，可以是绝对目录，也可以是相对目录});

（2）采用<script src="?a.js&layer.js">这种合并的方式引入layer

layer.config({//layer就不会去自动去获取路径，但你需要通过以下方式来完成初始化的配置  path: '/res/layer/' //layer.js所在的目录，可以是绝对目录，也可以是相对目录});

（3）layer.config(options) 可以配置层默认的基础参数，如：

layer.config({  skin: 'layui-layer-molv' //默认皮肤});

（4）除此之外，extend还允许你加载拓展的css皮肤，如：

layer.config({  //如果是独立版的layer，则将myskin存放在./skin目录下  //如果是layui中使用layer，则将myskin存放在./css/modules/layer目录下  extend: 'myskin/style.css'});

2、layer.ready(callback) - 初始化就绪

3、layer.alert(content, options, yes) - 普通信息框

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

4、layer.confirm(content, options, yes, cancel) - 询问框

//eg1layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){  //do something    layer.close(index);});//eg2layer.confirm('is not?', function(index){  //do something    layer.close(index);});

5、layer.msg(content, options, end) - 提示框

//eg1layer.msg('只想弱弱提示');//eg2layer.msg('有表情地提示', {icon: 6}); //eg3layer.msg('关闭后想做些什么', function(){  //do something}); //eglayer.msg('同上', {  icon: 1,  time: 2000 //2秒关闭（如果不配置，默认是3秒）}, function(){  //do something});

6、layer.load(icon, options) - 加载层

load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它

//eg1var index = layer.load();//eg2var index = layer.load(1); //换了种风格//eg3var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 //关闭layer.close(index);

7、layer.tips(content, follow, options) - tips层

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

8、layer.close(index) - 关闭特定层

（1）当想关闭当前页的某个层时，每一种弹层调用方式，都会返回一个index

var index = layer.open();var index = layer.alert();var index = layer.load();var index = layer.tips();layer.close(index); //此时只需要把获得的index，轻轻地赋予layer.close即可

（2）当在iframe页面关闭自身时

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭

9、layer.closeAll(type) - 关闭所有层

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

10、layer.style(index, cssStyle) - 重新定义层的样式

//重新给指定层设定width、top等layer.style(index, {  width: '1000px',  top: '10px'});

11、layer.title(title, index) - 改变层的标题

12、layer.getChildFrame(selector, index) - 获取iframe页的DOM

layer.open({  type: 2,  content: 'test/iframe.html',  success: function(layero, index){    var body = layer.getChildFrame('body', index);    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();    console.log(body.html()) //得到iframe页的body内容    body.find('input').val('Hi，我是从父页来的')  }});

13、layer.getFrameIndex(windowName) - 获取特定iframe层的索引

//假设这是iframe页var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭

14、layer.iframeAuto(index) - 指定iframe层自适应

15、layer.iframeSrc(index, url) - //重置特定iframe url

16、layer.setTop(layero) -置顶当前窗口

17、layer.full()、layer.min()、layer.restore() - 手工执行最大小化

18、layer.prompt(options, yes) - 输入层

//例子2layer.prompt({  formType: 2,//输入框类型，支持0（文本）默认1（密码）2（多行文本）  value: '初始值',  title: '请输入值',  area: ['800px', '350px'] //自定义文本域宽高}, function(value, index, elem){  alert(value); //得到value  layer.close(index);});

19、layer.tab(options) - tab层

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

20、layer.photos(options) - 相册层 （1）photos为传入json

$.getJSON('/jquery/layer/test/photos.json', function(json){  layer.photos({    photos: json    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）  });});

而返回的json需严格按照如下格式：

{  "title": "", //相册标题  "id": 123, //相册id  "start": 0, //初始显示的图片序号，默认0  "data": [   //相册包含的图片，数组格式    {      "alt": "图片名",      "pid": 666, //图片id      "src": "", //原图地址      "thumb": "" //缩略图地址    }  ]}

（2）直接从页面中获取图片

（3）photos还有个tab回调，切换图片时触发。

layer.photos({  photos: json/选择器,  tab: function(pic, layero){    console.log(pic) //当前图片的一些信息  }});