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皮肤
	});

你可能感兴趣的:(前端,layer,弹窗,前端,js)