layui框架学习(26:弹出层模块_tips框输入框)

news2024/11/24 3:32:30

  弹出层模块layer中的tips框和输入框函数也是其底层核心函数open的特定应用实现,其中tips框是可以将弹出层与具体元素绑定,能出现在指定元素周围,而输入框则是弹出信息框获取用户的输入,这两类弹出框的说明如下:
  tips框的函数原型为ayer.tips(content, follow, options) ,content属性设置提示内容,follow属性设置待关联的元素选择器或者DOM,options则为layer模块的基础参数设置。tips函数的使用示例及效果如下所示:

$('.layui-btn').on('click', function(){
     layer.tips('城市字段不能为空!', '.input_city');			
    });

在这里插入图片描述

  输入框的函数原型为layer.prompt(options, yes) ,options中除了设置layer模块的基础参数之外,还支持设置formType(取值范围为0-文本,1-密码,2-多行文本,默认为1)、 value(输入框的默认显示值,默认为空)、 maxlength(可输入文本的最大长度,默认500),第二个参数为确定按钮回调函数。prompt函数的使用示例及效果如下所示:

	layer.prompt({formType:0,title:"今年端午节是什么时候?",value:'2023-06-20'},
		 function(value, index){
			 layer.alert(value);
			 layer.close(index);
		 });			

在这里插入图片描述

  formType=1和2时的输入框样式如下所示,注意在options设置参数时不要设置content属性值,否则输入框中的文本框就不会出现了。
在这里插入图片描述

  参数anim用于控制弹出框的动画样式。取值范围为0-6,默认为0,各数值对应的动画效果包括:0(平滑放大)、1(从上掉落)、2(从最底部往上滑入)、3(从左滑入)、4(从左翻滚)、5( 渐显)、6(抖动)。由于动画录屏不好录,本文就没有提供各种值的gif动画效果截图。
  参数isOutAnim用于控制是否显示弹出框关闭时的关闭动画。默认为true,即显示动画,测试时仔细看了一下,关闭弹出框时,确实有一个特别短暂的动画效果(几乎都看不出来),isOutAnim为false时,关闭弹出框时就直接关闭了,什么效果都没有。
  参数maxmin用于控制弹出框显示时是否最大化按钮。但该值主要针对页面层和iframe层,这两类弹出框还没有学到,后续学习open函数时会详细介绍这两类弹出框。
  参数fixed用于控制弹出框所属页面上下移动时弹出框是否跟随移动。默认值为true,即不随页面移动,始终保持位置不变(如果又标题栏的话,鼠标还是可以拖拽弹出框),值为false的话,弹出框会随着页面滚动而移动,可能会移出页面可视区域,效果如下图所示:在这里插入图片描述

  参数resize用于控制是否可以用鼠标拉伸弹出框。默认值为true,即鼠标移动到弹出框右下角时可以拉伸弹出框。该属性对加载框和tips框无效,测试时msg函数弹出的窗口也不能拉伸(暂时没有从源码看出来msg函数用的type到低是什么)。还值得一提的是输入框默认不能拉伸窗口,但是当formType=2时,可以拖拽下图红框圈住的位置拉伸窗口。
在这里插入图片描述
  参数resizing用于定义窗口拉伸时的事件响应函数。使用示例及程序运行效果如下所示:

	layer.prompt({isOutAnim:false,anim:1,formType:2,title:"请输入古诗《春晓》",fixed:false,resize:true,
	             resizing:function(){
					 layer.alert("正在拉伸弹出框");	
				 }}, function(value, index){
					 layer.alert(value);
					 layer.close(index);
				 });			

在这里插入图片描述

  参数scrollbar用于控制弹出框所属页面是否可以上下移动。官网教程原文是“是否允许浏览器出现滚动条”,没有滚动条也就无法上下滚动,默认为true。
   参数maxWidth/maxHeight用于控制弹出框的最大宽度和最大高度。这两个参数仅在area属性为auto时才有用(实际测试时,在prompt函数中设置了area和maxWidth,但是没有起作用,暂时不知道是怎么回事)。
  参数tips用于控制tips框相对关联元素的位置及背景色。位置的话用1(上)、2(右)、3(下)、4(左)表示,如果还需要指定背景色,则用数组赋值。程序运行效果如下所示。测试时遇到的问题是tips赋值为2时,按照教程示例应该显示在右侧,但是实际执行时却跑到了左侧,暂时不清楚是哪里出了问题。
在这里插入图片描述
  参数tipsMore用于控制是否能同时显示多个tips框。默认同时只能显示一个,值为true时,即可同时显示多个,如下图所示:
在这里插入图片描述

参考文献:
[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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/595110.html

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

相关文章

JAVA开发(如何学习一门IT技术)

无论是初学者还是有经验的专业人士,在学习一门新的IT技术时,都需要采取一种系统性的学习方法。那么作为一名技术er,你是如何系统的学习it技术的呢。 一、it技术介绍 IT技术包含了几个方向,一个是软件工程,一个网络工程…

怎么把老旧图片变清晰?分享三个方法给大家!

老旧照片常常因为时间的流逝而失去清晰度,给人们带来了遗憾。然而,随着图像处理技术的进步,我们现在有多种方法可以提高老旧照片的清晰度。本文将介绍三种常用的方法,帮助您使老旧照片焕然一新。 第一种方法:使用图像…

leetcode--N 皇后 II(java)

N 皇后 II leetcode 52 题 - N 皇后 II (困难)题目描述解题思路代码演示动态规划专题 leetcode 52 题 - N 皇后 II (困难) 原题链接: https://leetcode.cn/problems/n-queens-ii/ 题目描述 n 皇后问题 研究的是如何将 n 个皇后放置在 n n 的棋盘上,并且使皇后彼此之…

C++——菱形继承和虚继承

0.关注博主有更多知识 C知识合集 目录 1.什么是菱形继承和虚继承 2.菱形继承所带来的问题 3.虚继承的解决方案 3.1虚基表 4.继承与组合 菱形继承和虚继承本身就是一个"bug",甚至在C程序员当中有"谁用谁尚阿比"的说法。至于为什么要谈菱…

[bugfix]解决visual studio installer双击后进度条一闪而过之后无反应的问题

问题描述: 源于跑一个神经网络代码,跑着跑着说需要microsoft visual C 14.0版本及其以上,然而我苦于根本下不了microsoft visuall C包的状态啊,而且点它没反应这件事已经持续了1年左右,因为没太耽误我做事我就一直没管…

21 条法则助你“玩转”分库分表

好好的系统,为什么要分库分表? 我们结合具体业务场景,以t_order表为例进行架构优化。由于数据量已经达到亿级别,查询性能严重下降,因此我们采用了分库分表技术来处理这个问题。具体而言,我们将原本的单库分…

java生成随机数

文章目录 java生成随机数导入包生成一个随机数生成一个 [ 0 , b o u n d ) \color{red}{[0,bound)} [0,bound)的随机数生成一个 20 \color{red}{20} 20到 90 \color{red}{90} 90的随机数总结现在尝试生成 − 10 \color{red}{-10} −10到 10 \color{red}{10} 10之间的随机数 ja…

《最新出炉》Python+Playwright自动化测试-2-playwright的API及其他知识

一.简介 上一篇我已经将PythonPlaywright的环境搭建好了,而且也简单的演示了一下三款浏览器的启动和关闭,是不是很简单啊。今天主要是把一篇的中的代码进行一次详细的注释,然后说一下playwright的API和其他相关知识点。那么首先将上一篇中的…

MyBatis——MyBatis注解开发

MyBatis编写SQL除了使用Mapper.xml还可以使用注解完成。当可以使用Auto Mapping时使用注解非常简单,不需要频繁的在接口和mapper.xml两个文件之间进行切换。但是必须配置resultMap时使用注解将会变得很麻烦,这种情况下推荐使用mapper.xml进行配置。 MyB…

问题解决:cmd中创建文件夹被拒绝访问。

问题: 在cmd中准备创建一个B盘node.js文件夹下的一个node_global文件被拒绝访问出错。 Microsoft Windows [版本 10.0.19045.2965] (c) Microsoft Corporation。保留所有权利。C:\Users\SueMagic>md B:\nodejs\node_global 拒绝访问。C:\Users\SueMagic>原因…

Learning C++ No.26 【深入学习位图】

引言: 北京时间:2023/5/30/15:30,刚睡醒,两点的闹钟,硬是睡到了2点40,那种睡不醒的感觉,真的很难受,但是没办法,欠的课越来越多,压的我喘不过气了都&#xf…

华为OD机试真题B卷 Java 实现【整理扑克牌】,附详细解题思路

一、题目描述 给定一组数字,表示扑克牌的牌面数字,忽略扑克牌的花色,请按如下规则对这一组扑克牌进行整理: 步骤1 对扑克牌进行分组,形成组合牌,规则如下: 当牌面数字相同张数大于等于4时&a…

【Python Selenium】零基础也能轻松掌握的学习路线与参考资料

Python Selenium是一种基于Python编程语言的自动化测试框架,用于Web应用程序的测试和自动化。Python Selenium是一个非常流行的工具,它可以通过模拟用户行为来测试Web应用程序,同时还可以通过Python编写脚本实现自动化测试,并且可…

Spring Boot如何实现自定义Starter?

Spring Boot如何实现自定义Starter? 在 Spring Boot 中,Starter 是一种特殊的依赖,它可以帮助我们快速地集成一些常用的功能,例如数据库连接、消息队列、Web 框架等。在本文中,我们将介绍如何使用 Spring Boot 实现自…

python视频图片美化

python视频图片美化 git clone https://github.com/s0md3v/roop.git If you aren’t good with following commands, here’s a video tutorial install python (and pip too if neeed) install git install ffmpeg If you are on Windows, install “Microsoft Visual C 14”…

Cadence OrCAD Capture 搜索的到的元器件无法在图纸中找到的问题

🏡《总目录》 目录 1,概述2,问题现象3,问题原因解决方案4,总结B站关注“硬小二”浏览更多演示视频 1,概述 本文简单介绍在使用Capture绘图时,搜索元器件或其他对象,存在搜索结果,但在图纸中无法找到的原因和解决方案。 2,问题现象 如下图所示搜索U20后,存在搜索结果…

javascript基础十二:JavaScript中的事件模型如何理解?

一、事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等 由于DOM是一个树结构,如果在父子节点绑定事件时候,当触…

浅析Redis集群数据倾斜问题及解决方法

概 述 在服务端系统服务开发中,缓存是一种常用的技术,它可以提高系统对请求的处理效率,而redis又是缓存技术栈中的一个佼佼者,广泛的应用于各种服务系统中。在大型互联网服务中,每天需要处理的请求和存储的缓存数据…

【Java系列】Mybatis-Plus 使用方式介绍

1 Mybatis-Plus简介 Mybatis-Plus 提供了多种方式来执行 SQL,包括使用注解、XML 映射文件和 Lambda 表达式等。其中,使用 Lambda 表达式是 Mybatis-Plus 推荐的方式,因为它更加直观和类型安全。 2 使用方法 1 Lambda 表达式执行 SQL 以下是…

pix2pixHD---loss---损失函数

在Pix2PixHDModel代码中首先定义损失: 首先看第一个:输入的两个参数use_gan_feat_loss, use_vgg_loss默认为false,则前缀有not,所以两个参数都是True。 def init_loss_filter(self, use_gan_feat_loss, use_vgg_loss):flags (Tr…