H-ui前端框架 H-ui 简单 · 免费 · 适合中国网站 

首页

核心

脚本

扩展

案例

收藏本页代码分享捐赠

1、jquery系列

jQuery.cookie.js

jQuery.form.js

jQuery.lazyload.js

jQuery.validation.js

2、Hui系列

Huihover.js

Huifocusblur.js

Huifold.js

Huispinner.js

Huitab.js

Huitags.js

Huitextarealength.js

HuitogglePassword.js

Huitotop.js

Huipreview.js

HuicheckAll.js

3、bootstrap系列

datetimepicker.js

4、layer系列

layer.js

5、其他插件

datatables.js

 脚本 > layer.js

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) | | 相册层 |

微信扫码打赏

觉得不好，您千万别打赏，退不了费的！

关于H-ui | 软件著作权 | 感谢捐赠

Copyright ©2013-2020 H-ui.net All Rights Reserved.
豫ICP备19019279号-1
未经允许，禁止转载、抄袭、镜像
用心做站，做不一样的站

站长统计

