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

news/2024/11/28 7:40:24/

  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


http://www.ppmy.cn/news/109800.html

相关文章

2023年9月数学建模:网络流问题:最大流与最小费用最大流

2023年9月数学建模国赛期间提供ABCDE题思路加Matlab代码,专栏链接(赛前一个月恢复源码199,欢迎大家订阅):http://t.csdn.cn/Um9Zd 目录 介绍 最大流问题 概念与原理 Ford-Fulkerson算法与Edmonds-Karp算法 最小费用最大流问题 概念与原理 网络单纯形法与最短增广路径法 …

智能管理PoE交换机

在这个万物互联的时代,数据与数据之间的相互传输交流,显得尤为重要。那么要怎样才能使计算机与传统的物联设备相连接呢?这时,串口服务器这一媒介的作用就凸显出来了。那么,你知道什么是串口服务器吗?串口服…

Vue3-devtools开发者工具正确安装方法

目录 前言:1、下载安装2、添加扩展 前言: 最近在学习Vue3,学习Vue3自然离不开调试工具Vue3-Devtools,所以我们需要来下载这个调试工具并放入谷歌浏览器里的扩展程序里面。帮助我们更好的调试vue3里的程序。 1、下载安装 Github下…

02- python进程中的数据交互(Windows系统)

要点: multiprocessing 进程间信息交互 一 方法汇总 在 Python 进程中,有几种方法可以实现数据交互: 共享内存:这是一种用于进程间通信的高效方式。多个进程可以访问同一个共享内存区域,并在其中读取和写入数据。 管…

价值5000元以上的某马大数据全套视频【强烈推荐】

某马大数据 01、阶段一 Python大数据开发基础 01、第一章大数据介绍及开发环境 02、第二章 linux命令 03、第三章 MySQL数据库 04、第四章 excel的使用 05、第五章 kettle的使用 06、第六章 数据分析及可视化 07、第七章 大数据框架与数仓基础 08、第八章 数仓实战项目 …

函数(C语言程序设计)

目录 一、函数定义 二、函数调用 三、递归函数 四、局部变量和全局变量 一、函数定义 1、无参函数的定义 类型名 函数名() /*函数首部*/ { 函数体 } 或 类型名 函数名(void) /*函数首部*/ { 函数体 } void类型的函数不…

2023年数学建模:支持向量机在数学建模中的应用

2023年9月数学建模国赛期间提供ABCDE题思路加Matlab代码,专栏链接(赛前一个月恢复源码199,欢迎大家订阅):http://t.csdn.cn/Um9Zd 目录 引言 支持向量机原理 1. 数学原理 2. 核函数 MATLAB实现 数学建模案例 总结 引言 支持向量机(Support Vector Machine&a…

Linux 上安装 PostgreSQL——Ubuntu

打开 PostgreSQL 官网 PostgreSQL: The worlds most advanced open source database,点击菜单栏上的 Download ,可以看到这里包含了很多平台的安装包,包括 Linux、Windows、Mac OS等 。 Linux 我们可以看到支持 Ubuntu 和 Red Hat 等各个平台…