详解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同比例缩放图片的小例子
Oct 30 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
JS实现简单打字测试
Jun 24 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中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
js实现录音上传功能
2019/11/22 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
pandas带有重复索引操作方法
2018/06/08 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Django缓存Cache使用详解
2020/11/30 Python
PHP面试题集
2016/12/18 面试题
前台文员我鉴定
2014/01/12 职场文书
世博会口号
2014/06/20 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
中班上学期个人总结
2015/02/12 职场文书
化工生产实习心得体会
2016/01/22 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android