详解Layer弹出层样式


Posted in Javascript onAugust 21, 2017

前言:学习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(){},以此类推。如:

//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 开启该代码可禁止点击该按钮关闭
 }
});

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页的选择器   

layer.open({
  type: 2,
  content: 'test/iframe.html',
  success: 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弹出层样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
纯js实现手风琴效果
Apr 17 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
JS数组操作之增删改查的简单实现
Aug 21 #Javascript
JS实现评价的星星功能
Aug 20 #Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 #Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 #Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 #Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 #Javascript
ES6扩展运算符的用途实例详解
Aug 20 #Javascript
You might like
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Python虚拟环境项目实例
2017/11/20 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
中学生检讨书1000字
2014/10/28 职场文书
学籍证明模板
2014/11/21 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记