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) 相册层
?
重庆时时开奖官方同步