详解Layer弹出层样式
前言学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。 具体请移步layer官网,
这篇博客会引用官网的一些内容,主要是写写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.' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.', '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(){},以此类推。如
//eg1 layer.confirm('纳尼?', { btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮 ,btn3: function(index, layero){ //按钮【按钮三】的回调 } }, function(index, layero){ //按钮【按钮一】的回调 }, function(index){ //按钮【按钮二】的回调 }); //eg2 layer.open({ content: 'test' ,btn: ['按钮一', '按钮二', '按钮三'] ,yes: function(index, layero){ //按钮【按钮一】的回调 } ,btn2: function(index, layero){ //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,btn3: function(index, layero){ //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,cancel: function(){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } });
suess - 层弹出后的成功回调方法
类型Function,默认null
当你需要在层创建完毕时即执行一些语句,可以通过该回调。suess会携带两个参数,分别是当前层DOM当前层索引。如
layer.open({ content: '测试回调', suess: 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页的选择器
layer.open({ type: 2, content: 'test/iframe.html', suess: function(layero, index){ var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法iframeWin.method(); console.log(body.html()) //得到iframe页的body内容 body.find('input').val('Hi,我是从父页来的') } });
layer.getFrameIndex(windowName) - 获取特定iframe层的索引
此方法一般用于在iframe页关闭自身时用到。
//假设这是iframe页 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭
封装好的Layer弹出框与关闭layer弹出框的方法(代码周一给出, 现在手头没有代码)
以上所述是长沙网络推广给大家介绍的详解Layer弹出层样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程