layui框架学习(25:弹出层模块_加载框&询问框)

文章详细介绍了layui框架的layer模块中layer.open函数的应用,包括加载框和询问框的使用方法。加载框函数layer.load支持不同加载动画效果,询问框函数layer.confirm涉及内容设置、回调函数以及按钮配置。此外,还讲解了参数如icon、btn、btnAlign、closeBtn和shade等在弹出框中的作用,提供了相关示例和效果展示。
摘要由CSDN通过智能技术生成

  layui框架的弹出层模块layer中最重要的函数即layer.open,基于该函数,layer模块封装了很多常用弹出框,上文已介绍了消息框和提示框函数,本文学习加载框和询问框函数的基本用法,同时继续学习layer模块中基础参数的用法。
  加载框函数的形式为layer.load(icon, options) ,icon用于设置加载动画的形式,而options用于设使用ayer模块的各类基础参数对加载框进行设置。icon的取值为0-2,除此之外的赋值默认效果与取值为0时相同。icon取值为0、1、2时的效果如下所示(本人电脑上的测试效果与参考文献5中的加载框不一样,不清楚是不是layui版本不一样造成的)。

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

  询问框函数的形式为layer.confirm(content, options, yes, cancel) ,content用于设置询问框窗口的主要内容,options用于设使用ayer模块的各类基础参数对加载框进行设置,而yes和cancel用于设置确定按钮回调方法和右上角关闭按钮触发的回调方法。使用示例及运行效果如下:

	layer.confirm('今年的端午节是否已经过了?', {title:'询问'}, 
		 function(){
	       layer.alert("端午节已经过了");			       
	     },function(){
		   layer.alert("端午节还没有过");		
		 });

在这里插入图片描述

  参数content用于设置弹出框的显示内容,不同的弹出框对content的使用要求不一样。对本文而言,content参数用于设置询问框中的主体内容。
  参数icon用于设置显示图标,主要用于提示框和加载框,加载框取值范围为0-2,其效果如上面所示,提示框中取值范围为0-6,其效果如下所示:
在这里插入图片描述
  参数btn用于定义弹出框的按钮数量、顺序和名称,默认值为确认,即提示框默认显示的按钮。关于每个函数的处理函数,官网教程是这么介绍的“按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。”。

	layer.msg("提示框图标测试,icon值为1",{icon:1,btn:["当前图标值","下一图标值"],
	   yes:function(){
		   layer.alert("当前图标值:1");			
	   },
	   btn2:function(){
		   layer.alert("下一图标值:2");		
	   }});

在这里插入图片描述

	layer.confirm('今年后续有什么节?', {icon:3,title:'询问',btn:['儿童节','端午节','中秋节']}	);	

在这里插入图片描述

  参数btnAlign设置按钮的对齐方式,取值包括:l(左对齐),c(居中对齐)、r(右对齐),默认右对齐。每个值的效果如下所示:
在这里插入图片描述

  参数closeBtn设置弹出框右上角关闭按钮的样式,默认值为1,还可以设置为0(不显示关闭按钮)和2(另一种关闭按钮样式),这三种值的显示效果如下图所示:
在这里插入图片描述

  参数shade设置弹出框弹出时弹出框之外区域的颜色及透明度,透明度越小,越能看清弹出框的源页面的内容,shade的值为长度为2的数组,第一个值为透明度,第二个值为颜色。如果不想显示遮罩,则设置shade的值为0。设置遮罩的透明度为0.5,颜色为紫色的代码及效果如下所示:

layer.confirm('今年后续有什么节?', {shade: [0.5, '#aa55ff'],icon:3,title:'询问',area:'400px',btn:['儿童节','端午节','中秋节'],btnAlign:'r',closeBtn:2});	

在这里插入图片描述

  参数shadeClose设置点击弹出框之外区域时是否关闭弹出框,默认为false。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://layui.gitee.io/v2/layer/#quickstart

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值