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

news2024/12/29 10:44:19

  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.coloradmin.cn/o/591345.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Part1:使用 TensorFlow 和 Keras 的 NeRF计算机图形学和深度学习——计算机图形学世界中相机的工作原理

Part1:使用 TensorFlow 和 Keras 的 NeRF计算机图形学和深度学习 1. 效果图2. 原理2.0 前向成像模型2.1 世界坐标系2.2 相机坐标系2.3 坐标变换2.4 投影转换2.5 数据 3. 源码参考 是否有一种方法可以仅从一个场景多张不同视角的照片中捕获整个3D场景? 有…

有奖励!2023陕西省首台(套)重大技术装备产品项目申报条件、认定材料

本文整理了2023陕西省首台(套)重大技术装备产品项目申报条件,认定材料等相关内容,感兴趣的朋友快跟小编一起来看看吧! 一、重点支持方向及领域 重点支持方向及领域:高档工业母机、电力装备、大型矿山和冶金…

【MySQL】MySQL 字段为 NULL 的5大坑

数据准备 建立一张表 数据如下: 1.count 数据丢失 count(*) 会统计值为 NULL 的行,而 count(列名) 不会统计此列为 NULL 值的行。 select count(*),count(name) from person; ----------------------- count(*) | count(name)10 | 8-------…

如何使用Python自动化测试工具Selenium进行网页自动化?

引言 Selenium是一个流行的Web自动化测试框架,它支持多种编程语言和浏览器,并提供了丰富的API和工具来模拟用户在浏览器中的行为。Selenium可以通过代码驱动浏览器自动化测试流程,包括页面导航、元素查找、数据填充、点击操作等。 与PyAuto…

关于linux的ssh(出现的问题以及ubuntu的ssh配置和ssh连接超时问题)

目录 Ubuntu进行ssh连接 关于ssh报错排错 备注:防火墙和selinux可能对ssh连接存在限制,但是我在操作的时候并没对我照成影响 查看selinux状态 ssh_config和sshd_config的区别 Ubuntu进行ssh连接 1.首先需要安装SSH服务器,在ubuntu终端输…

Java学习路线(19)——IO流(下)

一、缓冲流 1、概念: 一种自带缓冲区的字节流、可提高原始字节流、字符流读写数据的性能。 2、缓冲流高性能原理: 磁盘与内存之间有一块存储区域,当磁盘向内存传输数据时,先传输到缓冲区,当缓冲区满了之后&#xff0…

[强网杯 2019]随便注 1【SQL注入】解析过程

1.首先启动并访问靶机,有一个输入框,随便输入1 or 1 1,测试一下是否存在sql注入。 2.提交后提示error 1064 : You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syn…

chatgpt赋能python:Python中的_--了解这个神秘的下划线

Python中的_ – 了解这个神秘的下划线 Python是一种流行的编程语言,它具有简单易学的语法和强大的功能。一些Python的特殊语法经常会让初学者感到困惑。其中,一个神秘的下划线符号在Python中出现的频率非常高,而且它的含义和使用也非常多样化…

chatgpt赋能python:Python中符号的用法

Python中符号的用法 在Python编程中,符号是非常重要的一部分。通过合理使用符号,我们可以轻松地实现许多功能和操作。下面是Python中一些常用的符号的介绍和用法。 赋值符号 斜杠等于号()被用来赋值。例如,如果我们要…

Windows的Powershell终端增强

Ubuntu上一直用的Oh My Zsh强化终端,体验非常nice。最近在Win上做东西比较多,于是也想把Powershell这个简陋的终端加强一下。 说干就干,网上查了一圈,发现大部分人用Oh My Posh来操作,因此试了一下,发现卡…

UFS 1-UFS架构简介1

UFS 1-UFS架构简介 1 UFS是什么?1.1 UFS1.2 一般特征1.2.1 Target performance1.2.2 Target host applications1.2.3 Target device types1.2.4 Topology1.2.5 UFS Layering 1.3 Interface Features1.3.1 Three power supplies1.3.2 Signaling as defined by [MIPI-…

Linux系统下imx6ull QT编程—— C++类和对象(三)

Linux QT编程 文章目录 Linux QT编程一、类和对象 一、类和对象 C 在 C 语言的基础上增加了面向对象编程,C 支持面向对象程序设计。类是 C 的核心特性,通常被称为用户定义的类型。类用于指定对象的形式,它包含了数据表示法和用于处理数据的方…

C++ 函数对象 详解

目录 🤔函数对象: 🤔本质: 🤔特点: 代码示例: 运行结果: 🤔 内置函数对象: 1.算数仿函数 代码示例: 运行结果: 2.关系仿函数 …

四轴姿态解算-imu算法

理论篇 欧拉角四元数方向余弦矩阵 强调三者描述的是坐标系A,A之间的变换关系 欧拉角,四元数,方向余弦矩阵都可以描述四轴的姿态变换 注意这里强调的是变换 三者转换公式 一阶龙格库塔法 核心要点简介: 假设一阶函数随时间关系如: y a * T1b 则,在经…

chatgpt赋能python:Python中-1的用法介绍

Python中-1的用法介绍 什么是-1? 在Python中,-1是一个特殊的索引值,它表示从序列的末尾开始向前数1个元素。这在对于列表、字符串、元组等序列类型进行操作时非常有用。 如何使用-1? 假设我们有一个列表: l [1, …

达梦数据库8安装教程

第一步:双击驱动 注意:如果双击显示没有驱动,则安装WinCDEmu软件。 第二步:双击setup.exe安装包 第三步:选择时区 第四步:验证key文件 因为我们是免费试用,所以没有key文件,直接下一…

14:00面试,14:06就出来了,问的问题有点变态。。。

从小厂出来,没想到在另一家公司又寄了。 到这家公司开始上班,加班是每天必不可少的,看在钱给的比较多的份上,就不太计较了。没想到5月一纸通知,所有人不准加班,加班费不仅没有了,薪资还要降40%,…

【第二节】变量和简单的数据类型

本节将结束python当中的变量和一部分数据类型(字符串和数字),并且介绍一些对应的方法 变量 在上一节的最后我们打印出了hello world print(hello world!)这次我们使用下面的代码实现一样的功能 message = hello world! print(message)可以看到 打印结果一模一样,而我们…

什么是IPAM?如何使用IPAM来管理IP地址和DHCP?

在计算机网络中,IPAM(IP Address Management)是一种用于管理IP地址和DHCP(Dynamic Host Configuration Protocol)的工具或系统。IPAM旨在简化和集中管理IP地址分配、子网划分和DHCP配置等任务。本文将详细介绍IPAM的概…

MVC 接收不到参数? —— 看我如何给你安排得明明白白

文章结构 问题背景:问题处理总结 问题背景: 现有如下代码: PostMapping(value "/payment/create") ResponseBody public CommonResult create(Payment payment) {}乍眼看去是不是很好,至少没啥问题很自然&#xff0c…