搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

弹层组件文档 - layui.layer

layer 至今仍作为 layui 的代表作,它的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。目前,layer 已然成为网页弹出层的首选交互方案,几乎随处可见。
模块加载名称:layer,独立版本:layer.layui.com

由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景 用前准备 调用方式
1. 作为独立组件使用 如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js 通过script标签引入layer.js后,直接用即可。 参考:快速上手
2. layui 模块化使用 如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.csslayui.js 通过layui.use('layer', callback)加载模块

作为独立组件使用 layercode

  1. 引入好layer.js后,直接用即可
  2. <script src="layer.js"></script>
  3. <script>
  4. layer.msg('hello');
  5. </script>

在 layui 中使用 layercode

  1. layui.use('layer', function(){
  2. var layer = layui.layer;
  3. layer.msg('hello');
  4. });

除了上面有所不同,其它都完全一致。

我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意,从2.3开始,无需通过layer.config来加载拓展模块

type - 基本层类型

类型:Number,默认:0

layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

title - 标题

类型:String/Array/Boolean,默认:'信息'

title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

content - 内容

类型:String/DOM/Array,默认:''

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:

</>code

  1. /!*
  2. 如果是页面层
  3. */
  4. layer.open({
  5. type: 1,
  6. content: '传入任意的文本或html' //这里content是一个普通的String
  7. });
  8. layer.open({
  9. type: 1,
  10. content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
  11. });
  12. //Ajax获取
  13. $.post('url', {}, function(str){
  14. layer.open({
  15. type: 1,
  16. content: str //注意,如果str是object,那么需要字符拼接。
  17. });
  18. });
  19. /!*
  20. 如果是iframe层
  21. */
  22. layer.open({
  23. type: 2,
  24. content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
  25. });
  26. /!*
  27. 如果是用layer.open执行tips层
  28. */
  29. layer.open({
  30. type: 4,
  31. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
  32. });
skin - 样式类名

类型:String,默认:''

skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lanlayui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子

</>code

  1. //单个使用
  2. layer.open({
  3. skin: 'demo-class'
  4. });
  5. //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
  6. layer.config({
  7. skin: 'demo-class'
  8. })
  9. //CSS
  10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
  11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  12. body .demo-class .layui-layer-btn a{background:#333;}
  13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
  14. 加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。

你也可以去查看layer皮肤制作说明

area - 宽高

类型:String/Array,默认:'auto'

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']

offset - 坐标

类型:String/Array,默认:垂直水平居中

offset默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:

备注
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' 快捷设置右下角
icon - 图标。信息框和加载层的私有参数

类型:Number,默认:-1(信息框)/0(加载层)

信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2。如:

</>code

  1. //eg1
  2. layer.alert('酷毙了', {icon: 1});
  3. //eg2
  4. layer.msg('不开心。。', {icon: 5});
  5. //eg3
  6. layer.load(1); //风格1的加载
btn - 按钮

类型:String/Array,默认:'确认'

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:

</>code

  1. //eg1
  2. layer.confirm('纳尼?', {
  3. btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  4. ,btn3: function(index, layero){
  5. //按钮【按钮三】的回调
  6. }
  7. }, function(index, layero){
  8. //按钮【按钮一】的回调
  9. }, function(index){
  10. //按钮【按钮二】的回调
  11. });
  12. //eg2
  13. layer.open({
  14. content: 'test'
  15. ,btn: ['按钮一', '按钮二', '按钮三']
  16. ,yes: function(index, layero){
  17. //按钮【按钮一】的回调
  18. }
  19. ,btn2: function(index, layero){
  20. //按钮【按钮二】的回调
  21. //return false 开启该代码可禁止点击该按钮关闭
  22. }
  23. ,btn3: function(index, layero){
  24. //按钮【按钮三】的回调
  25. //return false 开启该代码可禁止点击该按钮关闭
  26. }
  27. ,cancel: function(){
  28. //右上角关闭回调
  29. //return false 开启该代码可禁止点击该按钮关闭
  30. }
  31. });
btnAlign - 按钮排列

类型:String,默认:r

你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。该参数可支持的赋值如下:

备注
btnAlign: 'l' 按钮左对齐
btnAlign: 'c' 按钮居中对齐
btnAlign: 'r' 按钮右对齐。默认值,不用设置
closeBtn - 关闭按钮

类型:String/Boolean,默认:1

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

shade - 遮罩

类型:String/Array/Boolean,默认:0.3

即弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0

shadeClose - 是否点击遮罩关闭

类型:Boolean,默认:false

如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。

time - 自动关闭所需毫秒

类型:Number,默认:0

默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)

id - 用于控制弹层唯一标识

类型:String,默认:空字符

设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式

anim - 弹出动画

类型:Number,默认:0

我们的出场动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。另外需要注意的是,3.0之前的版本用的是 shift 参数

备注
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:1type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

fixed - 固定

类型:Boolean,默认:true

即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可

resize - 是否允许拉伸

类型:Boolean,默认:true

默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效

resizing - 监听窗口拉伸动作

类型:Function,默认:null

当你拖拽弹层右下角对窗体进行尺寸调整时,如果你设定了该回调,则会执行。回调返回一个参数:当前层的DOM对象

</>code

  1. resizing: function(layero){
  2. console.log(layero);
  3. }
scrollbar - 是否允许浏览器出现滚动条

类型:Boolean,默认:true

默认允许浏览器滚动,如果设定scrollbar: false,则屏蔽

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: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, '#c00']

tipsMore - 是否允许多个tips

类型:Boolean,默认:false

允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启

success - 层弹出后的成功回调方法

类型:Function,默认:null

当你需要在层创建完毕时即执行一些语句,可以通过该回调。success会携带两个参数,分别是当前层DOM当前层索引。如:

</>code

  1. layer.open({
  2. content: '测试回调',
  3. success: function(layero, index){
  4. console.log(layero, index);
  5. }
  6. });
yes - 确定按钮回调方法

类型:Function,默认:null

该回调携带两个参数,分别为当前层索引、当前层DOM对象。如:

</>code

  1. layer.open({
  2. content: '测试回调',
  3. yes: function(index, layero){
  4. //do something
  5. layer.close(index); //如果设定了yes回调,需进行手工关闭
  6. }
  7. });
cancel - 右上角关闭按钮触发的回调

类型:Function,默认:null

该回调携带两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero),默认会自动触发关闭。如果不想关闭,return false即可,如;

</>code

  1. cancel: function(index, layero){
  2. if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
  3. layer.close(index)
  4. }
  5. return false;
  6. }
end - 层销毁后触发的回调

类型:Function,默认:null

无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

full/min/restore -分别代表最大化、最小化、还原 后触发的回调

类型:Function,默认:null

携带两个参数,即当前层 DOM、当前层索引

</>code

  1. min: function(layero, index){ //index 参数为 layui 2.6.6 或独立版 layer 3.5.0 开始新增
  2. //当层最小化时触发
  3. //自定义操作,并阻止默认最小化
  4. //layer.min(index); //单独执行最小化
  5. //return false; //阻止默认最小化
  6. }
minStack - 是否默认堆叠在左下角

类型:Boolean,默认:true

layui 2.6.6 或独立版 layer 3.5.0 开始新增

layer.config(options) - 初始化全局配置

这是一个可以重要也可以不重要的方法,重要的是,它的权利真的很大,尤其是在模块化加载layer时,你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块,甚至还可以决定整个弹层的默认参数。而说它不重要,是因为多数情况下,你会发现,你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。

如果您是采用seajs或者requirejs加载layer,你需要执行该方法来完成初始化的配置。比如:

</>code

  1. layer.config({
  2. path: '/res/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
  3. });
  4. //这样的话,layer就会去加载一些它所需要的配件,比如 css 等。
  5. //当然,你即便不用seajs或者requirejs,也可以通过上述方式设定路径

如果你是采用合并的方式引入 layer,那么您需要在 script 标签上加一个自定义属性 merge="true"。如:

</>code

  1. <script src="?a.js&layer.js" merge="true">
  2. 如此,layer 则不会去自动获取路径,但你需要通过以下方式来完成初始化的配置
  3. layer.config({
  4. path: '/res/layer/' //layer.js 所在的目录,可以是绝对目录,也可以是相对目录
  5. });

除上述之外,如果您采用的是独立的 layer,那么你还可以在动态加载 layer 之前预先定义一个我们约定好的全局对象:

</>code

  1. <script>
  2. var LAYUI_GLOBAL = {
  3. layer_dir: '/res/layer/' //layer 所在目录(layer 3.5 开始新增)
  4. };
  5. </script>
提示 1:上述只针对独立版 layer,其 LAYUI_GLOBAL 设定的 layer_dir 优先级高于 layer.config 设定的 path;
提示 2:如果是 layui 加载的 layer,可以无视上述所有的目录设定。前置工作都会在 layui 内部完成。

另外,layer.config 还可以配置层 默认的基础参数,如:

</>code

  1. layer.config({
  2. anim: 1, //默认动画风格
  3. skin: 'layui-layer-molv' //默认皮肤
  4. //…
  5. });
  6. //除此之外,extend 还允许你加载拓展的 css 皮肤,如:
  7. layer.config({
  8. //如果是独立版的layer,则将 myskin 存放在 ./skin 目录下
  9. //如果是layui中使用layer,则将 myskin 存放在 ./css/modules/layer 目录下
  10. extend: 'myskin/style.css'
  11. });
  12. //具体的皮肤定制,可以参见:skin参数说明
layer.ready(callback) - 初始化就绪

由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如:

</>code

  1. //页面一打开就执行弹层
  2. layer.ready(function(){
  3. layer.msg('很高兴一开场就见到你');
  4. });

我是华丽的酱油:介绍完上面两位引导者,接下来我们真正的主角闪亮登场了。此处应有掌声 ^,^

layer.open(options) - 原始核心方法

基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数,另外,该文档统一采用options作为基础参数的标识例子:

</>code

  1. var index = layer.open({
  2. content: 'test'
  3. });
  4. //拿到的index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数。

噢,请等等,上面这位主角的介绍篇幅怎么看怎么都觉得跟它的地位不符,作者在文档中只给了它如此可怜的一块地??这是因为,它真的已经大众得不能再大众了,你真正需要了解的,是它的内部器官,即上面一大篇幅介绍的各种基础参数。 ←_←

它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。如

</>code

  1. //eg1
  2. layer.alert('只想简单的提示');
  3. //eg2
  4. layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。
  5. //eg3
  6. layer.alert('有了回调', function(index){
  7. //do something
  8. layer.close(index);
  9. });

类似系统confirm,但却远胜confirm,另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。

</>code

  1. //eg1
  2. layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  3. //do something
  4. layer.close(index);
  5. });
  6. //eg2
  7. layer.confirm('is not?', function(index){
  8. //do something
  9. layer.close(index);
  10. });

我们在源码中用了相对较大的篇幅来定制了这个msg,目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面,它坚持简陋的变化,在作用方面,它坚持零用户操作。而且它的参数也是自动补齐的。

</>code

  1. //eg1
  2. layer.msg('只想弱弱提示');
  3. //eg2
  4. layer.msg('有表情地提示', {icon: 6});
  5. //eg3
  6. layer.msg('关闭后想做些什么', function(){
  7. //do something
  8. });
  9. //eg
  10. layer.msg('同上', {
  11. icon: 1,
  12. time: 2000 //2秒关闭(如果不配置,默认是3秒)
  13. }, function(){
  14. //do something
  15. });

type:3的深度定制。load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。

</>code

  1. //eg1
  2. var index = layer.load();
  3. //eg2
  4. var index = layer.load(1); //换了种风格
  5. //eg3
  6. var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒
  7. //关闭
  8. layer.close(index);

type:4的深度定制。也是我本人比较喜欢的一个层类型,因为它拥有和msg一样的低调和自觉,而且会智能定位,即灵活地判断它应该出现在哪边。默认是在元素右边弹出

</>code

  1. //eg1
  2. layer.tips('只想提示地精准些', '#id');
  3. //eg 2
  4. $('#id').on('click', function(){
  5. var that = this;
  6. layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
  7. });
  8. //eg 3
  9. layer.tips('在上面', '#id', {
  10. tips: 1
  11. });

上面主要是一些弹层的调用方式,而下面介绍的是一些辅助性的方法

layer.close(index) - 关闭指定层

关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。

</>code

  1. //当你想关闭当前页的某个层时
  2. var index = layer.open();
  3. var index = layer.alert();
  4. var index = layer.load();
  5. var index = layer.tips();
  6. //正如你看到的,每一种弹层调用方式,都会返回一个index
  7. layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
  8. //如果你想关闭最新弹出的层,直接获取layer.index即可
  9. layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
  10. //当你在iframe页面关闭自身时
  11. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  12. parent.layer.close(index); //再执行关闭
  13. //关闭后的回调(layui 2.6.5、layer 3.4.0 新增)
  14. layer.close(index, function(){
  15. //do something
  16. });
layer.closeAll(type) - 关闭所有层

如果你很懒,你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话,它会销毁掉当前页所有的layer层。当然,如果你只想关闭某个类型的层,那么你可以

</>code

  1. layer.closeAll(); //疯狂模式,关闭所有层
  2. layer.closeAll('dialog'); //关闭信息框
  3. layer.closeAll('page'); //关闭所有页面层
  4. layer.closeAll('iframe'); //关闭所有的iframe层
  5. layer.closeAll('loading'); //关闭加载层
  6. layer.closeAll('tips'); //关闭所有的tips层
  7. //关闭后的回调(layui 2.6.5、layer 3.4.0 新增)
  8. layer.closeAll('loading', function(){ //关闭 loading 并执行回调
  9. //do something
  10. });
  11. layer.closeAll(function(){ //关闭所有层并执行回调
  12. //do something
  13. });
layer.style(index, cssStyle) - 重新定义层的样式

该方法对loading层和tips层无效。参数index为层的索引,cssStyle允许你传入任意的css属性

</>code

  1. //重新给指定层设定width、top等
  2. layer.style(index, {
  3. width: '1000px',
  4. top: '10px'
  5. });
layer.title(title, index) - 改变层的标题

使用方式:layer.title('标题变了', index)

layer.getChildFrame(selector, index) - 获取iframe页的DOM

当你试图在当前页获取iframe页的DOM元素时,你可以用此方法。selector即iframe页的选择器

</>code

  1. layer.open({
  2. type: 2,
  3. content: 'test/iframe.html',
  4. success: function(layero, index){
  5. var body = layer.getChildFrame('body', index);
  6. var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
  7. console.log(body.html()) //得到iframe页的body内容
  8. body.find('input').val('Hi,我是从父页来的')
  9. }
  10. });
layer.getFrameIndex(windowName) - 获取特定iframe层的索引

此方法一般用于在iframe页关闭自身时用到。

</>code

  1. //假设这是iframe页
  2. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  3. parent.layer.close(index); //再执行关闭
layer.iframeAuto(index) - 指定iframe层自适应

调用该方法时,iframe层的高度会重新进行适应

layer.iframeSrc(index, url) - //重置特定iframe url

似乎不怎么常用的样子。使用方式:layer.iframeSrc(index, 'http://sentsin.com')

layer.setTop(layero) -置顶当前窗口

非常强大的一个方法,虽然一般很少用。但是当你的页面有很多很多layer窗口,你需要像Window窗体那样,点击某个窗口,该窗体就置顶在上面,那么setTop可以来轻松实现。它采用巧妙的逻辑,以使这种置顶的性能达到最优

</>code

  1. //通过这种方式弹出的层,每当它被选择,就会置顶。
  2. layer.open({
  3. type: 2,
  4. shade: false,
  5. area: '500px',
  6. maxmin: true,
  7. content: 'http://www.layui.com',
  8. zIndex: layer.zIndex, //重点1
  9. success: function(layero){
  10. layer.setTop(layero); //重点2
  11. }
  12. });

一般用于在自定义元素上触发最大化、最小化和全屏。

</>code

  1. layer.full(index); //执行最大化
  2. layer.min(index); //执行最小化
  3. layer.restore(index); //执行还原

prompt的参数也是向前补齐的。options不仅可支持传入基础参数,还可以传入prompt专用的属性。当然,也可以不传。yes携带value 表单值index 索引elem 表单元素

</>code

  1. //prompt层新定制的成员如下
  2. {
  3. formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
  4. value: '', //初始时的值,默认空字符
  5. maxlength: 140, //可输入文本的最大长度,默认500
  6. }
  7. //例子1
  8. layer.prompt(function(value, index, elem){
  9. alert(value); //得到value
  10. layer.close(index);
  11. });
  12. //例子2
  13. layer.prompt({
  14. formType: 2,
  15. value: '初始值',
  16. title: '请输入值',
  17. area: ['800px', '350px'] //自定义文本域宽高
  18. }, function(value, index, elem){
  19. alert(value); //得到value
  20. layer.close(index);
  21. });

tab层只单独定制了一个成员,即tab: [],这个好像没有什么可介绍的,简单粗暴看例子

</>code

  1. layer.tab({
  2. area: ['600px', '300px'],
  3. tab: [{
  4. title: 'TAB1',
  5. content: '内容1'
  6. }, {
  7. title: 'TAB2',
  8. content: '内容2'
  9. }, {
  10. title: 'TAB3',
  11. content: '内容3'
  12. }]
  13. });

相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入,如下:

</>code

  1. $.getJSON('/jquery/layer/test/photos.json', function(json){
  2. layer.photos({
  3. photos: json
  4. ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
  5. });
  6. });
  7. //而返回的json需严格按照如下格式:
  8. </>code

    1. {
    2. "title": "", //相册标题
    3. "id": 123, //相册id
    4. "start": 0, //初始显示的图片序号,默认0
    5. "data": [ //相册包含的图片,数组格式
    6. {
    7. "alt": "图片名",
    8. "pid": 666, //图片id
    9. "src": "", //原图地址
    10. "thumb": "" //缩略图地址
    11. }
    12. ]
    13. }

如果是直接从页面中获取图片,那么需要指向图片的父容器,并且你的img可以设定一些规定的属性(但不是必须的)。

</>code

  1. //HTML示例
  2. <div id="layer-photos-demo" class="layer-photos-demo">
  3. <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  4. <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  5. </div>
  6. <script>
  7. //调用示例
  8. layer.photos({
  9. photos: '#layer-photos-demo'
  10. ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
  11. });
  12. </script>

看看一个实例呗:

layer专注弹层100年 说好的,一起Fly 星空如此深邃

第二种方式的图片查看器显然更加简单,因为无需像第一种那样返回规定的json,但是他们还是有各自的应用场景的,你可以按照你的需求进行选择。另外,photos还有个tab回调,切换图片时触发。

</>code

  1. layer.photos({
  2. photos: json/选择器,
  3. tab: function(pic, layero){
  4. console.log(pic) //当前图片的一些信息
  5. }
  6. });
结语

合理地设定基础参数,合理地选择内置方法,合理的心态,合理地阅读,只要一切都在合理的前提下,你才会感知到layer许许多多令人愉悦的地方,她真的是否如你所愿,取决于你对她了解的深远。愿layer能给你的web开发带来一段美妙的旅程。别忘了在线调试。

layui - 在每一个细节中,用心与你沟通

立即运行