layer.js
lib中已收录，下载过H-ui框架，无需单独下载，但页面需要单独引入。单独下载地址 layer_v3.1.1.js
layer.js是由前端大牛贤心编写的web弹窗插件。
使用方法
1、layer.js依赖jquery或者zepto.js。
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
js调用
layer.open({
title: '在线调试'
,content: '可以填写任意的layer代码'
});
demo效果
相关参数
| 属性 | 默认值 | 描述 | 备注 |
|---|---|---|---|
| type | 0 | 类型 | 0 信息框，默认 | 1 页面层 | 2 iframe层 | 3 加载层 | 4 tips层 |
| title | "信息" | 标题 |
支持三种类型的值。 字符串："我是标题"
数组：['文本', 'font-size:18px;'] 布尔值：false |
| content | "" | 内容 | 支持：String、html、DOM、URL、数组 |
| skin | "" | 样式类名 | 可以定制layer皮肤。 |
| area | "auto" | 宽高 | 数组 ['500px', '300px'] |
| offset | 垂直水平居中 | 坐标 | String/Array。['100px', '50px'] |
| icon | -1 | 图标 | -1（信息框）/0（加载层） |
| btn | "确认" | 按钮 |
btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮。 ,yes: function(index, layero){
//按钮【按钮一】的回调
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
//return false 开启该代码可禁止点击该按钮关闭
}
,cancel: function(){
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
|
| btnAlign | r | 按钮排列 | "l" 左对齐 | "c" 居中对齐 | "r" 右对齐 |
| closeBtn | 1 | 关闭按钮 | 两种风格：1 | 2 | 0 不显示 |
| shade | 0.3 透明度的黑色背景（'#000'） | 遮罩 |
String/Array/Boolean [0.8, '#393D49'] 0 不显示遮罩。 |
| shadeClose | false | 是否点击遮罩关闭 | |
| time | 0 不自动关闭 | 自动关闭所需毫秒 | 5000 5秒后自动关闭 |
| id | 用于控制弹层唯一标识 | String | |
| anim | 0 | 弹出动画 | 0 平滑放大 | 1 从上掉落 | 2 从最底部往上滑入 | 3 从左滑入 | 4 从左翻滚 | 5 渐显 | 6 抖动 |
| isOutAnim | true | 关闭动画 | |
| maxmin | false | 最大最小化 | |
| fixed | true | 固定 | |
| resize | true | 是否允许拉伸 | |
| resizing | null | 监听窗口拉伸动作 | 回调函数。 |
| scrollbar | true | 是否允许浏览器出现滚动条 | |
| maxWidth | 360 | 最大宽度 | 只有当area: 'auto'时，maxWidth的设定才有效。 |
| maxHeight | 最大高度 | 只有当高度自适应时，maxHeight的设定才有效。 | |
| zIndex | 19891014 贤心生日 | 层叠顺序 | 用于解决和其它组件的层叠冲突。 |
| move | '.layui-layer-title' | 触发拖动的元素 |
String/DOM/Boolean。 默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false |
| moveOut | false | 是否允许拖拽到窗口外 | 默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可。 |
| moveEnd | null | 拖动完毕后的回调方法 | 回调函数。 |
| tips | 2 | 方向和颜色 | Number/Array。tips层的私有参数。支持上右下左四个方向 |
| tipsMore | false | 是否允许多个tips | 允许多个意味着不会销毁之前的tips层。 |
| success | null | 层弹出后的成功回调方法 | 回调函数 |
| yes | null | 确定按钮回调方法 | 回调函数 |
| cancel | null | 右上角关闭按钮触发的回调 | 回调函数，携带两个参数。当前层索引参数（index）、当前层的DOM对象（layero）。如果不想关闭，return false即可。 |
| end | null | 层销毁后触发的回调 | 回调函数 |
| full/min/restore | null | 分别代表最大化、最小化、还原 后触发的回调 | 回调函数 |
| layer.config(options) | 初始化全局配置 | ||
| layer.open(options) | 核心方法 | ||
| layer.alert(content, options, yes) | 普通信息框 | ||
| layer.confirm(content, options, yes, cancel) | 询问框 | ||
| layer.msg(content, options, end) | 提示框 | ||
| layer.load(icon, options) | 加载层 | ||
| layer.tips(content, follow, options) | tips层 | ||
| layer.close(index) | 关闭特定层 | ||
| layer.closeAll(type) | 关闭所有层 | "dialog" 关闭信息框 | "page" 关闭所有页面层 | "iframe" 关闭所有的iframe层 | "loading" 关闭加载层 | "tips" 关闭所有的tips层 | |
| layer.style(index, cssStyle) | 重新定义层的样式 | ||
| layer.title(title, index) | 改变层的标题 | ||
| layer.getChildFrame(selector, index) | 获取iframe页的DOM | ||
| layer.getFrameIndex(windowName) | 获取特定iframe层的索引 | ||
| layer.iframeAuto(index) | 指定iframe层自适应 | ||
| layer.iframeSrc(index, url) | 重置特定iframe url | ||
| layer.setTop(layero) | 置顶当前窗口 | ||
| layer.full()、layer.min()、layer.restore() | 手工执行最大小化 | ||
| layer.prompt(options, yes) | 输入层 | ||
| layer.tab(options) | tab层 | ||
| layer.photos(options) | 相册层 |