layer弹窗学习笔记

通过查看官方文档，记录下笔记

仅作为自己学习资料使用
layer弹出层： 作为独立组件使用直接引入js。引入jQuery1.8以上的任意版本。

基础参数
type:
0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。

title - 标题:
类型：String/Array/Boolean，默认：‘信息’
title: [‘文本’, ‘font-size:18px;’] 可以来改变标题样式
不想显示标题栏，可以title: false

content-内容
类型：String/DOM/Array，默认：’’"
layer.open({
type: 1,
content: ‘传入任意的文本或html’ //这里content是一个普通的String
});
…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’]
});
tips层
layer.open({
type: 4,
content: [‘内容’, ‘#id’] //数组第二项即吸附元素选择器或者DOM
});

skin - 样式类名
类型：String，默认：’’
目前layer内置的skin有：layui-layer-lanlayui-layer-molv
//单个使用
layer.open({
skin: ‘demo-class’
});
//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({
skin: ‘demo-class’
})
//CSS
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}

area - 宽高
定义宽度，area: ‘500px’
定义宽高，area: [‘500px’, ‘300px’]

offset - 坐标
类型：String/Array，默认：垂直水平居中
值 备注
offset: ‘auto’ 默认坐标，即垂直水平居中
offset: ‘100px’ 只定义top坐标，水平保持居中
offset: [‘100px’, ‘50px’] 同时定义top、left坐标
offset: ‘t’ 快捷设置顶部坐标
offset: ‘r’ 快捷设置右边缘坐标
offset: ‘b’ 快捷设置底部坐标
offset: ‘l’ 快捷设置左边缘坐标
offset: ‘lt’ 快捷设置左上角
offset: ‘lb’ 快捷设置左下角
offset: ‘rt’ 快捷设置右上角
offset: ‘rb’ 快捷设置右下角

*****************************************//todo
/*问题解决，显示图标0-6，是默认好的几个图标（应该可以去文件里替换图片）
而load，则是另外的一套图标，两个动态图*/

icon - 图标。信息框和加载层的私有参数
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：
//eg1
layer.alert(‘酷毙了’, {icon: 1});
//eg2
layer.msg(‘不开心。。’, {icon: 5});
//eg3
layer.load(1); //风格1的加载

---

btn - 按钮
类型：String/Array，默认：‘确认’
btn: ‘我知道了’
btn: [‘yes’, ‘no’]
btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]
按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}
//eg1 *******************************************todo

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

btnAlign - 按钮排列
类型：String，默认：r
值 备注
btnAlign: ‘l’ 按钮左对齐
btnAlign: ‘c’ 按钮居中对齐
btnAlign: ‘r’ 按钮右对齐。默认值，不用设置

closeBtn - 关闭按钮
类型：String/Boolean，默认：1

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0

shade - 遮罩
类型：String/Array/Boolean，默认：0.3
定义别的颜色，可以shade: [0.8, ‘#393D49’]；
不显示遮罩，可以shade: 0

shadeClose - 是否点击遮罩关闭
类型：Boolean，默认：false

time - 自动关闭所需毫秒
类型：Number，默认：0

id - 用于控制弹层唯一标识
类型：String，默认：空字符
设置该值后，不管是什么类型的层，都只允许同时弹出一个。
一般用于页面层和iframe层模式

anim - 弹出动画
类型：Number，默认：0
不想显示动画，设置 anim: -1
值 备注
anim: 0 平滑放大。默认
anim: 1 从上掉落
anim: 2 从最底部往上滑入
anim: 3 从左滑入
anim: 4 从左翻滚
anim: 5 渐显
anim: 6 抖动

isOutAnim - 关闭动画 （layer 3.0.3新增）
类型：Boolean，默认：true
不想开启 isOutAnim: false

maxmin - 最大最小化。
类型：Boolean，默认：false
该参数值对type:1和type:2有效

fixed - 固定
类型：Boolean，默认：true

resize - 是否允许拉伸
类型：Boolean，默认：true
该参数对loading、tips层无效

resizing - 监听窗口拉伸动作
类型：Function，默认：null
当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。
回调返回一个参数：当前层的DOM对象
codelayui.code
resizing: function(layero){
console.log(layero);
}

scrollbar - 是否允许浏览器出现滚动条
类型：Boolean，默认：true

maxWidth - 最大宽度
类型：Number，默认：360
只有当area: 'auto’时，maxWidth的设定才有效

maxHeight - 最大高度
类型：Number，默认：无
请注意：只有当高度自适应时，maxHeight的设定才有效。

zIndex - 层叠顺序
类型：，默认：19891014（贤心生日 0.0）
一般用于解决和其它组件的层叠冲突。

move - 触发拖动的元素
类型：String/DOM/Boolean，默认：’.layui-layer-title’
默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。
如move: ‘.mine-move’。你还配置设定move: false来禁止拖拽

moveOut - 是否允许拖拽到窗口外
类型：Boolean，默认：false
默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可

moveEnd - 拖动完毕后的回调方法
类型：Function，默认：null
默认不会触发moveEnd，如果你需要，设定moveEnd: function(layero){}即可。
其中layero为当前层的DOM对象

tips - tips方向和颜色
类型：Number/Array，默认：2
tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。
定义颜色，设定tips: [1, ‘#c00’]

tipsMore - 是否允许多个tips
类型：Boolean，默认：false

success - 层弹出后的成功回调方法
类型：Function，默认：null
success会携带两个参数，分别是当前层DOM当前层索引
layer.open({
content: ‘测试回调’,
success: function(layero, index){
console.log(layero, index);
}
});

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

cancel - 右上角关闭按钮触发的回调
类型：Function，默认：null
该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero）
默认会自动触发关闭。如果不想关闭，return false即可
cancel: function(index, layero){
if(confirm(‘确定要关闭么’)){ //只有当点击confirm框的确定时，该层才会关闭
layer.close(index)
}
return false;
}

end - 层销毁后触发的回调
类型：Function，默认：null
无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。

full/min/restore -分别代表最大化、最小化、还原 后触发的回调
类型：Function，默认：null
携带一个参数，即当前层DOM

layer.config(options) - 初始化全局配置
如果你是采用

layer.ready(callback) - 初始化就绪
由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。
当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：
codelayui.code
//页面一打开就执行弹层
layer.ready(function(){
layer.msg(‘很高兴一开场就见到你’);
});

layer.open(options) - 原始核心方法
创建任何类型的弹层都会返回一个当前层索引
var index = layer.open({
content: ‘test’
});

layer.alert(content, options, yes) - 普通信息框
内容，配置参数，回调

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

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

layer.load(icon, options) - 加载层
type:3的深度定制。
load默认是不会自动关闭的
//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层
在元素的事件回调体中，follow直接赋予this即可

layer.close(index) - 关闭特定层
//如果你想关闭最新弹出的层，直接获取layer.index即可
layer.close(layer.index);
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
layer.closeAll(type) - 关闭所有层
layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll(‘dialog’); //关闭信息框
layer.closeAll(‘page’); //关闭所有页面层
layer.closeAll(‘iframe’); //关闭所有的iframe层
layer.closeAll(‘loading’); //关闭加载层
layer.closeAll(‘tips’); //关闭所有的tips层

layer.style(index, cssStyle) - 重新定义层的样式
该方法对loading层和tips层无效。
参数index为层的索引，cssStyle允许你传入任意的css属性
//重新给指定层设定width、top等
layer.style(index, {
width: ‘1000px’,
top: ‘10px’
});

layer.title(title, index) - 改变层的标题
使用方式：layer.title(‘标题变了’, index)

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，我是从父页来的’)
}
});

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

layer.iframeAuto(index) - 指定iframe层自适应
调用该方法时，iframe层的高度会重新进行适应

layer.iframeSrc(index, url) - //重置特定iframe url
似乎不怎么常用的样子。使用方式：layer.iframeSrc(index, ‘http://sentsin.com’)

layer.setTop(layero) -置顶当前窗口
layer.open({
type: 2,
shade: false,
area: ‘500px’,
maxmin: true,
content: ‘http://www.layui.com’,
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
}
});

layer.full()、layer.min()、layer.restore() - 手工执行最大小化
一般用于在自定义元素上触发最大化、最小化和全屏。

layer.prompt(options, yes) - 输入层
formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
value: ‘’, //初始时的值，默认空字符
maxlength: 140, //可输入文本的最大长度，默认500

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.photos(options) - 相册层
相册层，也可以称之为图片查看器。
photos支持传入json和直接读取页面图片两种方式。如果是json传入，如下：

$.getJSON('/jquery/layer/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
  });
}); 
//而返回的json需严格按照如下格式：
{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号，默认0
  "data": [   //相册包含的图片，数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}
如果是直接从页面中获取图片，那么需要指向图片的父容器，
并且你的img可以设定一些规定的属性（但不是必须的）。
codelayui.code
//HTML示例

  
  

皮肤制作手册
【第一步】：命名文件夹
在layer的skin目录建立一个文件夹，假设您将该文件夹命名为：yourskin

【第二步】：创建样式等文件
在yourskin文件夹下建立一个单独的样式文件，务必命名为：style.css。并且你可能用到的图片也要存放在该文件夹下

【第三步】：书写样式
/*  
通过body前缀，是为了确保你皮肤的优先级
你可以通过调试工具重置更多样式 
*/
body .layer-ext-yourskin .layui-layer-title{}
body .layui-ext-yourskin .layui-layer-btn{}
body .layui-ext-yourskin .layui-layer-btn a{}

【第四步】：调试
通过全局配置看看你的皮肤定义的如何：
layer.config({
  extend: 'myskin/style.css', //加载您的扩展样式
  skin: 'layer-ext-yourskin'
});
layer.alert('layer皮肤-Yourskin');

【最后一步】：发布
1. 现在你已经成功制作了一个皮肤了，如果你觉得它很美，你可以共享出更多的人使用。
2. 那么你应该制作一个简单的页面来介绍你的皮肤，提供尽可能简单的使用说明（就像这个：layer.seaning.com）。
3. 然后将你的皮肤主题页网址通过任意渠道发给贤心（比如可以通过邮箱：[email protected]）

1. 全局配置
	layer.config({
	  extend: 'myskin/style.css', //加载新皮肤
	  skin: 'layer-ext-myskin' //一旦设定，所有弹层风格都采用此主题。
	});

2. 局部使用
	layer.config({
	  extend: 'myskin/style.css' //同样需要加载新皮肤
	});

//单个使用
	layer.open({
	  skin: 'layer-ext-myskin' //只对该层采用myskin皮肤
	});