layer.js

1、、基础参数
  我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ''})layer.msg('', {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块
（1）、type - 基本层类型

  类型：Number，默认：0

  layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

（2）、title - 标题
  类型：String/Array/Boolean，默认：'信息'
  title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
（3）、content - 内容
类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：

/!* 如果是页面层 */layer.open({  type: 1,   content: '传入任意的文本或html' //这里content是一个普通的String});layer.open({  type: 1,  content: $('#id') //这里content是一个DOM});//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});        

（4）、skin - 样式类名
  类型：String，默认：''
  skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lan、layui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。

（5）、area - 宽高
  类型：String/Array，默认：'auto'
  在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
（6）、offset - 坐标
  类型：String/Array，默认：垂直水平居中
  offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：

（7）、icon - 图标。信息框和加载层的私有参数
  类型：Number，默认：-1（信息框）/0（加载层）
  信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6，如果是加载层，可以传入0-2。

（8）、btn - 按钮

  类型：String/Array，默认：'确认'
  信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1和按钮2的回调分别是yes和cancel，而从按钮3开始，则回调为btn3: function(){}，以此类推。

（9）、btnAlign - 按钮排列
  类型：String，默认：r
  你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。btnAlign: 'l'，按钮左对齐；btnAlign: 'c'，按钮居中对齐。

（10）、closeBtn - 关闭按钮
  类型：String/Boolean，默认：1
  layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
（11）、shade - 遮罩
  类型：String/Array/Boolean，默认：0.3
  即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
（12）shadeClose - 是否点击遮罩关闭
  类型：Boolean，默认：false
  如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
（13）、time - 自动关闭所需毫秒
  类型：Number，默认：0
  默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
（14）、id - 用于控制弹层唯一标识
  类型：String，默认：空字符
  设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
（15）anim - 动画
  类型：Number，默认：0
  我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 ，（请注意，3.0之前的版本用的 shift 参数）
（16）maxmin - 最大最小化。
  类型：Boolean，默认：false
  该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
（17）fixed - 固定
  类型：Boolean，默认：true
  即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
（18）、resize - 是否允许拉伸
  类型：Boolean，默认：true
  默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效
（19）、scrollbar - 是否允许浏览器出现滚动条
  类型：Boolean，默认：true
  默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
（20）、maxWidth - 最大宽度
  类型：，默认：360
  请注意：只有当area: 'auto'时，maxWidth的设定才有效。
（21）、zIndex - 层叠顺序
  类型：，默认：19891014（贤心生日 0.0）
  一般用于解决和其它组件的层叠冲突。
（22）、move - 触发拖动的元素
  类型：String/DOM/Boolean，默认：'.layui-layer-title'
  默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽
（23）、moveOut - 是否允许拖拽到窗口外
  类型：Boolean，默认：false
  默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可
（24）、moveEnd - 拖动完毕后的回调方法
  类型：Function，默认：null
  默认不会触发moveEnd，如果你需要，设定moveEnd: function(){}即可。
（25）、tips - tips方向和颜色
  类型：Number/Array，默认：2
  tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
（26）、tipsMore - 是否允许多个tips
  类型：Boolean，默认：false
  允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
（27）、success - 层弹出后的成功回调方法
  类型：Function，默认：null
  当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。

（28）、yes - 确定按钮回调方法
  类型：Function，默认：null
  该回调携带两个参数，分别为当前层索引、当前层DOM对象。

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

（29）、cancel - 右上角关闭按钮触发的回调
  类型：Function，默认：null
  该回调同样只携带当前层索引一个参数，无需进行手工关闭。如果不想关闭，return false即可，

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

（30）、end - 层销毁后触发的回调
  类型：Function，默认：null
  无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
（31）、full/min/restore -分别代表最大化、最小化、还原 后触发的回调
  类型：Function，默认：null

  携带一个参数，即当前层DOM

2、实例

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>layer-更懂你的web弹窗解决方案</title>  <script src="layer/jquery-1.10.2.min.js"></script>  <script src="layer/layer.js"></script>  <link rel="stylesheet" href="layer/skin/default/layer.css" />  <style>  div.conten{  width: 100%;  border: 2px solid #C9C5C5;  margin-bottom: 10px;  box-shadow: 5px 5px #CCCCCC;  text-align: center;  }  button.bt{  width: 100px;  height: 40px;  line-height: 40px;  background-color:#2D93CA;  border-radius: 10px;  color:white;  text-align: center;  font-weight: bold;  font-size: 15px;  }  .layer_notice{  margin-bottom: 10px;  text-align: center;  width:200px;  color: #999999;  margin: 0px auto;  }  .layer-photos-demo{  text-align: center;  width:500px;  color: #999999;  margin: 0px auto;  border: 2px solid #C9C5C5;  margin-bottom: 10px;  box-shadow: 5px 5px #CCCCCC;  }  body .demo-class .layui-layer-demo{background:#333;}  </style></head><body><div class="conten"><button onclick="common(1)" class="bt">普通信息框</button><button onclick="common(2)" class="bt">图标</button><button onclick="common(3)" class="bt">询问框</button><button onclick="common(4)" class="bt">提示层</button><button onclick="common(5)" class="bt">墨绿深蓝风</button></div><div class="conten"><button onclick="common(6)" class="bt">捕获页</button><button onclick="common(7)" class="bt">页面层</button><button onclick="common(8)" class="bt">自定页</button><button onclick="common(9)" class="bt" >tips层</button><button onclick="common(10)" class="bt">iframe层</button></div><div class="conten"><button onclick="common(11)" class="bt">iframe窗</button><button onclick="common(12)" class="bt">加载层</button><button onclick="common(13)" class="bt">loading层</button><button onclick="common(14)" class="bt">小tips</button><button onclick="common(15)" class="bt">prompt层</button></div><div class="conten"><button onclick="common(16)" class="bt">tap层</button><button onclick="common(17)" class="bt">相册层</button></div><div class=" layer_notice">傲不可长，欲不可纵，乐不可极，志不可满。</div><div id="layer-photos-demo" class="layer-photos-demo">  <img layer-pid="图片id，可以不写" layer-src="img/1.jpg" src="img/11.jpg" alt="图片名">  <img layer-pid="图片id，可以不写" layer-src="img/2.jpg" src="img/22.jpg" alt="图片名">  <img layer-pid="图片id，可以不写" layer-src="img/4.jpg" src="img/44.jpg" alt="图片名">  <img layer-pid="图片id，可以不写" layer-src="img/5.jpg" src="img/55.jpg" alt="图片名">  <img layer-pid="图片id，可以不写" layer-src="img/7.jpg" src="img/77.jpg" alt="图片名"></div><script>function common(n){    if(n==1){               //layer.alert(content, options, yes) - 普通信息框layer.alert('有了回调', {title:'提示'},function(index){   layer.alert('加了个图标', {icon: 1},function(index){     layer.alert('只想简单的提示',function(index){     layer.close(index);//没有close就需要手动关闭     });   });});           }else if(n==2){    //图标    layer.alert('图标0', {icon: 0},function(index){layer.alert('图标'+index, {icon: 1},function(index){layer.alert('图标'+index, {icon: 2},function(index){layer.alert('图标'+index, {icon: 3},function(index){layer.alert('图标'+index, {icon: 4},function(index){layer.alert('图标'+index, {icon: 5},function(index){layer.alert('图标'+index, {icon: 6},function(index){layer.close(index);})})})})})})})    }else if(n==3){    //layer.confirm(content, options, yes, cancel) - 询问框layer.confirm('您是如何看待前端开发？', {     btn: ['重要','奇葩'], //按钮     icon: 3,      title:'提示'    }, function(){         layer.msg('的确很重要', {icon: 1});    }, function(){         layer.msg('也可以这样', {             time: 20000, //20s后自动关闭             btn: ['明白了', '知道了']         });});    }else if(n==4){    //layer.msg(content, options, end) - 提示框，3秒后自动消失layer.msg('玩命提示中',{    icon: 1,    time: 2000 //2秒关闭（如果不配置，默认是3秒）   }, function(){     layer.msg('呵呵');});    }else if(n==5){    //墨绿深蓝风layer.alert('墨绿风格，点击确认看深蓝', {   skin: 'layui-layer-molv', //样式类名   closeBtn: 0//layer提供了两种风格的关闭按钮}, function(){  layer.alert('深蓝style', {     skin: 'layui-layer-lan',     closeBtn: 0,//layer提供了两种风格的关闭按钮     anim: 4 //动画类型  });});    }else if(n==6){    //捕获页layer.open({  type: 1,  shade: false,  area: ['420px', '240px'], //宽高  title: false, //不显示标题  content: $('.layer_notice'), //捕获的元素  cancel: function(){    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {        time: 5000,         icon:6    });  }});    }else if(n==7){    //页面层layer.open({  type: 1,  skin: 'layui-layer-rim', //加上边框  area: ['420px', '240px'], //宽高  content: 'html内容'});    }else if(n==8){    //自定页layer.open({  type: 1,  skin: 'layui-layer-demo', //样式类名  closeBtn: 0, //不显示关闭按钮  anim: 2,//anim可支持的动画类型有0-6  shadeClose: true, //开启遮罩关闭  content: '内容'});    }else if(n==9){    //tips层layer.tips('Hi，我是tips', '.layer_notice',{tips:2});    }else if(n==10){    //iframe层layer.open({  type: 2,  title: 'layer mobile页',  shadeClose: true,//是否点击遮罩关闭  shade:[0.8,'#393D49'],//遮罩  area: ['380px', '90%'],  content: 'http://blog.csdn.net/qq_27626333/article/details/53674829' //iframe的url});     }else if(n==11){    //iframe窗layer.open({  type: 2,  title: false,  closeBtn: 0, //不显示关闭按钮  shade: [0],//不显示遮罩  area: ['340px', '215px'],  offset: 'rb', //右下角弹出  time: 2000, //2秒后自动关闭  anim: 2,  content: ['http://blog.csdn.net/qq_27626333/article/details/53674829', 'no'], //iframe的url，no代表不显示滚动条  end: function(){ //此处用于演示layer.open({  type: 2,  title: '很多时候，我们想最大化看，比如像这个页面。',  shadeClose: true,  shade: false,  maxmin: true, //开启最大化最小化按钮  area: ['893px', '600px'],  content: 'http://blog.csdn.net/qq_27626333/article/details/53674829'    });  }});    }else if(n==12){    //layer.load(icon, options) - 加载层var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 //关闭//layer.close(index);       }else if(n==13){    //loading层var index = layer.load(1, {              shade: [0.1,'#fff'],//0.1透明度的白色背景              time:1000            });    }else if(n==14){    //小tipslayer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '.layer_notice', {  tips: [1, '#3595CC'],  time: 4000});    }else if(n==15){    //layer.prompt(options, yes) - 输入层    //formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）  //value: '', //初始时的值，默认空字符  //maxlength: 140, //可输入文本的最大长度，默认500  //yes携带value表单值、index索引、elem表单元素layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){  layer.close(index);  layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){     layer.close(index);     layer.msg('演示完毕！您的口令：'+ pass +'您最后写下了：'+text);  });});    }else if(n==16){    //layer.tab(options) - tab层layer.tab({  area: ['600px', '300px'],  tab: [{    title: 'TAB1',     content: '内容1'  }, {    title: 'TAB2',     content: '内容2'  }, {    title: 'TAB3',     content: '内容3'  }]});    }else if(n==17){    //相册层layer.photos({  photos: '#layer-photos-demo',  anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）});     }}</script></body></html>

                                             
        0        0           
	
				
	
					   
layer.js
	  	   
layer.js
	  	   
layer.js
	  	   
使用layer.js注意事项
	  	   
layer.js源码
	  	   
js layer弹窗
	  	   
layer.js源码分析
	  	   
JS-layer.js基础参数
	  	   
layer   js web弹窗、层
	  	   
loading加载和layer.js
	  	   
jquery layer（js组件）转向
	  	   
cocos2d-js获得其它Layer层对象
	  	   
js：推荐一下layer，生产力组件
	  	   
cocos2d - JS 逐帧动画  (Animation  Layer)
	  	   
express框架layer.js源码解析
	  	   
layer.js之回调销毁对话框
	  	   
tp+layer.js的ajax例子
	  	   
layer.js弹出其他页面源代码
	     		  
	  	   
linux多线程之线程终止pthread_cleanup_push()
	  	   
iOS 面试题（5.）：weak 的内部实现原理
	  	   
SpringMVC与Struts2区别与比较总结
	  	   
android studio编译项目因为V7包版本问题报错的解决办法
	  	   
linux中PATH环境变量的作用和使用方法
	  	   
layer.js
	  	   
myeclipse+maven
	  	   
oracle中的约束
	  	   
移动端如何获得终端是ios或者android
	  	   
SQL Server中查询一个值出现的所有表。
	  	   
单调队列多重背包 SSL2587采药
	  	   
初步探索Facebook程序员开发的POP动画库
	  	   
SpringMVC基础配置(通过注解配置,非xml配置)
	  	   
Adnroid基础（一）  Activity生命周期理论讲解