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

  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://xiahunao.cn/news/254135.html

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

相关文章

【SpringCloud——Elasticsearch(上)】

一、什么是Elasticsearch elasticsearch是一款非常强大的开源搜索引擎,可以帮助我们从海量数据中快速找到需要的内容。 二、倒排索引 1、正向索引 2、倒排索引 3、总结 三、ES和MySQL的区别 四、操作索引库 1、基于Kibana(WEB界面) 以下操作…

代码随想录算法训练营第五十七天 | 回文

647. 回文子串 文档讲解:代码随想录 (programmercarl.com) 视频讲解:动态规划,字符串性质决定了DP数组的定义 | LeetCode:647.回文子串_哔哩哔哩_bilibili 状态:不会做。 思路 确定dp数组(dp table&#xf…

驱动LSM6DS3TR-C实现高效运动检测与数据采集(3)----获取ID

概述 一旦传感器被正确初始化,可以通过SPI或I2C接口向传感器发送读取命令,并接收传感器返回的数据。这个读取过程包括获取LSM6DS3TR传感器提供的加速度计和陀螺仪数据,以及传感器对应的温度信息。 获取数据状态 STATUS_REG (1Eh)是该传感器…

chatgpt赋能python:Python中构造方法的介绍与应用

Python中构造方法的介绍与应用 在Python编程语言中,构造方法通常是类中的一个特殊方法,用于在对象创建时初始化其属性。构造方法使用__init__关键字来定义,而且通常会包含self参数,用于引用创建的新对象。在本文中,我…

木工专用计算机,木工做多功能电脑台带书柜架一体图片 自己打造电脑桌用实木还是生态木颗粒板...

黑色十字条纹状的书架,给人带来一种与众不同的感觉,褐色的实木地板铺贴在地面上,褐色的地面与整个橱柜形成了鲜明的对比。褐色给人一种灰溜溜的感觉,但是这种颜色很有古典美,而且褐色的地面又特别的耐脏,这…

python爬虫大众点评字体反爬

字形相同的字体反爬问题解析 问题所在:部分数据加载时使用网站自定义的字体,浏览器访问网页时字体文件会加载到浏览器中,爬虫访问时没有对应的自定义字体,所以就得不到那部分数据,如图1,加密的这部分数据在…

五笔字根语法口决

一、字根助记词 11G   王旁青头戋五一 12F   土士二干十寸雨 13D   大犬三(羊)古石厂 (“羊”指羊字底) 14S   木丁西 15A   工戈草头右框七   (“右框”即“匚”) 21H   目具上止卜虎皮   (“具”指具字的上部) 22J   日早…

字体反爬案例解析:大众点评

文章目录 字体反爬简介发送请求,获取网页源码提取字体信息,并将字体文件下载到本地建立基准字典引例提取需要字体反爬处理的信息提取不需要字体反爬的信息整理提取到的所有信息,并存入excel 字体反爬简介 什么是字体反爬? …

作文 我眼中的计算机1000字,我眼中的自己作文范文1000字(精选6篇)

我眼中的自己作文范文1000字(精选6篇) 在日常生活或是工作学习中,许多人都有过写作文的经历,对作文都不陌生吧,作文根据写作时限的不同可以分为限时作文和非限时作文。还是对作文一筹莫展吗?以下是小编为大家整理的我眼中的自己作…

基于深度学习的高精度家禽猪检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要:基于深度学习的高精度家禽猪检测识别系统可用于日常生活中或野外来检测与定位家禽猪目标,利用深度学习算法可实现图片、视频、摄像头等方式的家禽猪目标检测识别,另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检…

智能管理PoE交换机

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

chatgpt赋能python:Python中构造函数的名称

Python中构造函数的名称 作为一名有10年Python编程经验的工程师,我深知Python语言中构造函数的重要性。在本文中,我将着重介绍Python中构造函数的名称,并阐述其在Python编程中的作用。 什么是构造函数? 构造函数是一种特殊类型…

C++ stack容器介绍

🤔stack容器介绍: 📖 stack是一种数据结构,也可以被称为堆栈。它是一个容器,只允许在最顶层进行插入和删除,并且只能访问最后一个插入的元素。这个元素称为栈顶。所有新插入的元素都被放置在栈顶上面&#…

Mysql source命令报错

Mysql source命令报错 情况一:目录包含中文 放到没有中文的路径再执行 情况二:不小心加了分号 mysql会将分号当做文件名的一部分 固然报错 情况三:没有选择数据库 使用 use加数据库名 选择数据库后再执行 执行成功画面

Linux中的source命令

Linux中的source命令 1、source命令是什么? source命令也称为“点命令”,也就是一个点符号(.),是bash的内部命令。 注意:该命令通常用命令“.”来替代 2、source命令 功能(能干什么&#xff0…

qsort函数排序举例

使用qsort函数快速排序应用举例 这篇博客是用qsort函数来快速排列float型数据,分别按照年龄(int型)、姓名(char型)排列结构体。看懂就看懂,看不懂我也不想解释了。 简略解释一下qsort函数: v…

C语言qsort函数详解

目录 一、qsort函数的使用 二、qsort函数的模拟 一、qsort函数的使用 快排函数qsort是C的库函数&#xff0c;它可以对输入的任何类型的数组排序&#xff0c;通过该函数的函数声明我们可以看出它的使用方法&#xff1a; 举个栗子&#xff1a; #include<stdio.h> #inclu…

C语言 - qsort函数详解

文章目录 一.qsort函数简介1.qsort函数是C标准库<stdlib.h>库中的函数&#xff0c;使用时引入#include <stdlib.h>。**2.它的函数原型是 void qsort(void* base, size_t num, size_t width, int (*compare)(const void*, const void*))3.这些参数都是什么意思&…

qsort函数详解

上篇文章&#xff0c;笔者讲解了冒泡排序的方法&#xff0c;原文链接为&#xff1a;一个典列来带领大家了解冒泡排序思想_念君思宁的博客-CSDN博客&#xff0c;有意者请参考一下&#xff01; 最近笔者又浅学关于qsort函数的排序方法&#xff01;下面且听笔者一一道来&#xff…

C语言函数——qsort函数的使用

目录 一、qsort函数&#xff1a; 1、定义&#xff1a; 2、参数&#xff1a; &#xff08;1&#xff09;.基础 &#xff08;2&#xff09;.数字 &#xff08;3&#xff09;.大小 &#xff08;4&#xff09;.比较 二、总代码&#xff1a; 1、整型比较&#xff1a; 2、浮…