layer弹出层详解

layer弹出层详解前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub…

大家好,又见面了,我是你们的朋友全栈君。

前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。 具体请移步layer官网,http://www.layui.com/doc/modules/layer.html

 

这篇博客会引用官网的一些内容,主要是写写layer的一些难点。比如如何用layer打开一个新的网页,content直接为一个网址就可以了,但是在你的项目中,这个网址又是啥??HTML的直接路径? 相对路径??都不是!! layer如何获取父界面的元素,比如我点击新增按钮,在layer框编辑后提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭后根据父界面的form表单向后台发起Ajax请求,,刷新信息。即:layer子界面如何调用父界面的方法。

如果你不想使用Layui,而只是想使用layer,你可以去layer独立组件官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js

复制代码

<script src="jQuery的路径"></script>
<script src="layer.js的路径"></script>
<script>
//弹出一个页面层
$('#test2').on('click', function(){
  layer.open({
  type: 1,
  area: ['600px', '360px'],
  shadeClose: true, //点击遮罩关闭
  content: '\<\div style="padding:20px;">自定义内容\<\/div>'
  });
});
</script>

复制代码

title – 标题

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

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

content – 内容

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

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

复制代码

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  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']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});        
        

复制代码

btn – 按钮

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

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

layer弹出层详解 View Code

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

类型:Function,默认:null

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

layer.open({
    content: '测试回调',
    success: function(layero, index){
        console.log(layero, index);
    }
});

yes – 确定按钮回调方法

类型:Function,默认:null

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

复制代码

layer.open({
    content: '测试回调',
    yes: function(index, layero){
        //do something
        layer.close(index); //如果设定了yes回调,需进行手工关闭
    }
});

复制代码

cancel – 右上角关闭按钮触发的回调

类型:Function,默认:null

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

cancel: function(index, layero){
    if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
        layer.close(index)
    }
    return false;
}

end – 层销毁后触发的回调

类型:Function,默认:null

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

layer.ready(callback) – 初始化就绪

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

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

layer.close(index) – 关闭特定层(比较重要)

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

复制代码

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的,每一种弹层调用方式,都会返回一个index
layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
 
//如果你想关闭最新弹出的层,直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
 
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭  

复制代码

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

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

复制代码

 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 });
11         

复制代码

layer.getFrameIndex(windowName) – 获取特定iframe层的索引

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

1

2

3

//假设这是iframe页

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

parent.layer.close(index); //再执行关闭

 

封装好的Layer弹出框与关闭layer弹出框的方法(代码周一给出, 现在手头没有代码):

链接参考:https://www.cnblogs.com/0zcl/p/7341984.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158452.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 信息论-Turbo码学习

    信息论-Turbo码学习

    2020年11月20日
  • Alex 的 Hadoop 菜鸟教程: 第1课 hadoop体系介绍

    Alex 的 Hadoop 菜鸟教程: 第1课 hadoop体系介绍介绍hadoop的体系,对hadoop庞大的生态圈进行了介绍,并标出了学习的优先级。简单明了的介绍,看了不晕

  • web渗透测试学习路线[通俗易懂]

    web渗透测试学习路线[通俗易懂]web渗透学习路线文章目录*web渗透学习路线*前言一、web渗透测试是什么?二、web渗透步骤1.前期工作2.中期提高后期打牢总结前言本文整理的学习路线,清晰明了,重点分明,能快速上手实践,相信想学的同学们都能轻松学完。都是干货啦,先收藏⭐再看吧。本文偏基础能让萌新们快速摸到渗透测试的门道,少走弯路,也能让正在学习的小伙伴们查漏补缺,也欢迎大佬们在评论区指正错误~这里附上我之前学习的路线图提示:以下是本篇文章正文内容,下面案例可供参考一、web渗透测试是什么?Web渗透测试分为白盒测

  • 3极管npn和pnp_npn开关电路工作原理

    3极管npn和pnp_npn开关电路工作原理===================================================================三极管,全称应为半导体三极管,也称双极型晶体管、晶体三极管,是一种电流控制电流的半导体器件·其作用是把微弱信号放大成幅度值较大的电信号,也用作无触点开关。晶体三极管,是半导体基本元器件之一,具有电流放大作用,是电子电路的核心元件。三极管是在一块半导体基片上制作…

  • HackBar 新手使用教程「建议收藏」

    HackBar 新手使用教程「建议收藏」HackBar新手使用教程

  • 手机看Typora笔记[通俗易懂]

    接触Typora之后感觉还挺好用的,不用上网,不用花钱(白嫖的玩意就是香)。可以写普通的文本,可以添加五个等级的标题,可以插入图片,,还可以插入各种各样的代码块(java,c,html,css等等),简洁而强大。但是当初我以为只能在电脑上看的时候就觉得有点难受,玛德是我S13了,我还去网上搜了半天,看看有没有教程或者手机版的软件,有的还要付费,今天我恍然大悟,尼玛人家开发个软件怎么可能没想到这些东西呢,我真是S13卧槽。看图啥都懂了:别被坑钱和C币吧…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号