【前端】Layui小功能收集整理

news2024/12/22 19:26:02

目录

1、layui 鼠标悬浮提示文字

2、关闭当前窗口并刷新父页面

3、子iframe关闭/传值/刷新父页面


1、layui 鼠标悬浮提示文字

鼠标放在图标上悬浮显示提示信息,效果图如下

<div style="float:left; line-height:40px">道试题 <i class="layui-icon layui-icon-tips" lay-tips="不超过3题" ></i></div>
// 悬浮提示
	$('*[lay-tips]').on('mouseenter', function(){
		var content = $(this).attr('lay-tips');
		this.index = layer.tips('<div style="padding: 0px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
			time: -1
			,maxWidth: 280
			,tips: [3, '#3A3D49']
		});
	}).on('mouseleave', function(){
		layer.close(this.index);
	});

2、关闭当前窗口并刷新父页面

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.location.reload();//刷新父页面,注意一定要在关闭当前iframe层之前执行刷新
parent.layer.close(index); //再执行关闭

3、子iframe关闭/传值/刷新父页面

整体逻辑:1.在父层添加隐藏域用于接收子窗口的要传的值;2.在子窗口把要传的值赋给父层的隐藏域输入框;3.在父层的end函数里去获取隐藏域的值

父层 HTML。添加隐藏域用于接收,用来接收关闭子窗口后传回的值

<input id="new_shijuan_id" value="" hidden="hidden">

<button class="layui-btn layui-btn-normal make_btn" ><i class="fa fa-plus" aria-hidden="true"></i> 去组卷</button>

 父层 js。 打开一个子窗口,执行完毕后调用end方法,通过end获取隐藏域的值,就可以对接收的值进行后续操作

//组卷弹窗
	$(".make_btn").click(function () {

		layer.open({
			type: 2,
			title: '设置组卷参数',
			shadeClose: true,
			shade: false,
		  	maxmin: true, //开启最大化最小化按钮
		  	area: ['70%', '90%'],
		  	content: 'makerule?shijuan_id={$info.id}',
		  	end:function () {
		  		var new_shijuan_id = $("#new_shijuan_id").val();
		  		console.log(new_shijuan_id)
		  		$(".shijuan").empty();
		  		$.ajax({
		  			url:'getShiJuan',
		  			type:'POST',
		  			dataType:'JSON',
		  			data:{new_shijuan_id:new_shijuan_id},
		  			success:function (res) {
		  				console.log(res)
		  				var html = ''
		  				if (res.code == 200) {
		  					html += '<div style="flex:0.7;text-align: left; padding:0 10px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">\
										'+res.data.filename+'\
									</div>\
									<div style="flex:0.3; text-align: center;">\
										<a href="javascript:look('+res.data.id+')" style="padding-right: 10px;"><i class="fa fa-eye" aria-hidden="true"></i> 预览</a>\
										<a href="javascript:del('+res.data.id+')" style="color:#FF5722"><i class="fa fa-trash" aria-hidden="true"></i> 删除</a>\
									</div>'
							$(".shijuan").append(html); 
		  				}
		  			}
		  		})
		  	}
		});
	})

子窗口:这里只展示关键部分,可以是请求后台后,后台返回值,通过parent.$("#new_shijuan_id").val(res.data);给父层的隐藏域赋值,关键在这一步

layer.msg(res.message, {
  time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  // parent.location.reload();//刷新父页面,注意一定要在关闭当前iframe层之前执行刷新
  parent.$("#new_shijuan_id").val(res.data);
  parent.layer.close(index); //再执行关闭
});

未完待续~

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

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

相关文章

【MySQL进阶之路丨第十篇】一文带你精通MySQL排序、分组、连接

引言 在上一篇中我们介绍了MySQL子句&#xff1b;在开发中&#xff0c;掌握数据的排序、分组、连接等操作和语句是十分重要的。 这一篇我们使用命令行方式来帮助读者掌握MySQL中数据的排序、分组与连接。 上一篇链接&#xff1a;MySQL | 一文带你精通MySQL子句 MySQL排序 MySQ…

ChatGPT在测试计划中的应用策略

简介 测试计划是指描述了要进行的测试活动的范围、方法、资源和进度的文档。它主要包括测试项、被测特性、测试任务和风险控制等。 所以在使用ChatGPT输出结果之前&#xff0c;我们需要先将文档的内容框架梳理好&#xff0c;以及将内容范围划定好&#xff0c;必要的时候&…

学生学徒作品分享——金融大模型-房屋租金价格影响因素分析与预测

金融大模型-房屋租金价格影响因素分析与预测项目背景 广州作为中国最发达的城市之一&#xff0c;每年都吸引大量务工人员前来就业&#xff0c;而租房是他们需要解决的最大问题之一&#xff0c;各地区租房需求日益增长。在租房过程&#xff0c;价格、交通是重要的考虑因素&a…

vue3同时引入多个iconfont图标库

vue3同时引入多个iconfont图标库 本文目录 vue3同时引入多个iconfont图标库下载iconfont库创建项目库图标加入项目库下载到本地 vue3引入文件存放位置main.ts设置组件中使用 分别引入多个iconfont 下载iconfont库 创建项目库 iconfont官网&#xff1a;https://www.iconfont.c…

物联网_01_物理设备的网络接入

设备的网络接入及物理层使用到的传输协议 现在物理设备有两种接入方式,一种是直接接入另一种是网关接入 直接接入 给物理设备添加NB-IOT通信模组等设备使之具有直接接入网络的能力 网关接入 物理设备在本地组网后通过统一的网关接入到网络(ZigBee无线组网网关).网关是处在本地…

Win10使用nginx,注册到服务设置自启与后台运行,解决 Access is denied 问题

安装 nginx 下载 nginx 官网下载页面&#xff1a;https://nginx.org/en/download.html直接选择当前最新 window 版本的或找到自己需要的版本下载即可 安装使用 下载完成后是有一个压缩包文件&#xff0c;直接解压到自己需要的目录下即可。是免安装的&#xff0c;解压即用简…

2023年中国功能型内窥镜市场发展趋势分析:市场渗透潜力空间广阔[图]

4K内窥镜系统对图像算法存在更高的要求。仅采用软件方式处理图像难以符合4K系统对算力的高要求。其次&#xff0c;针对内窥镜图像的亮暗区域不均匀、饱和度低、细节纹理及组织结构需突出的特点&#xff0c;在选择合适的图像增强算法上难度较大。 功能型内窥镜行业壁垒分析 资料…

Vue动态class

注意在自定义组件上绑定class会添加到该组件的根元素上面 1.对象语法 传入class对象v-bind:class 指令也可以与普通的 class attribute 共存可以动态修改class的值可以绑定一个计算数据来实现 1.传入class对象 <script src"./vue.js"></script><di…

强大的虚拟机软件 VMware Fusion Pro 13中文最新 for mac

VMware Fusion Pro是一款虚拟化软件&#xff0c;它允许在Mac电脑上同时运行Windows和其他操作系统&#xff0c;而无需重启电脑&#xff0c;它采用了领先的虚拟化技术&#xff0c;能够保证在Mac电脑在同时运行多个操作系统时表现出极高的效率和稳定性。 VMware Fusion Pro具有以…

@Binds methods must be abstract 报错指南

bindings方法必须是抽象的 Binds使用错误

页面查询多项数据组合的线程池设计 | 京东云技术团队

背景 我们应对并发场景时一般会采用下面方式去预估线程池的线程数量&#xff0c;比如QPS需求是1000&#xff0c;平均每个任务需要执行的时间是t秒&#xff0c;那么我们需要的线程数是t * 1000。 但是在一些情况下&#xff0c;这个t是不好估算的&#xff0c;即便是估算出来了&…

数据仓库分层

原因 用空间换时间&#xff0c;通过大量的预处理来提升应用系统的用户体验&#xff08;效率&#xff09;&#xff0c;因此数据仓库会存在大量冗余的数据。如果不分层的话&#xff0c;如果源业务系统的业务规则发生变化将会影响整个数据清洗过程&#xff0c;工作量巨大。通过数…

C# Onnx Yolov8 Detect 烟雾检测

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace Onnx…

MAX插件CG Magic怎么云渲染?操作方法已整起!

小编这里会收到不少网友的反馈是关于3ds max插件CG Magic怎么云渲染&#xff1f; 3d max的这款插件CG MAGIC的出现就是为了设计师使用过程中&#xff0c;可以省时又省心的完成工作。 同时&#xff0c;大家要了键下&#xff0c;现阶段CG MAGIC有18个板块&#xff0c;118个模块…

安装Git和git命令使用

文章目录 安装Git创建版本库版本回退工作区和暂存区管理修改撤销修改 安装Git 在Windows上安装Git 在Windows上使用Git&#xff0c;可以从Git官网直接下载安装程序&#xff0c;然后按默认选项安装即可。 安装完成后&#xff0c;在开始菜单里找到“Git”->“Git Bash”&…

三星正在开发HBM4,预计2025年推出

近年来&#xff0c;人工智能&#xff08;AI&#xff09;、高性能计算&#xff08;HPC&#xff09;和PC一直在推动高性能DRAM产品的研发&#xff0c;市场对HBM类DRAM的需求也在迅速增长&#xff0c;各大厂商也加大了这方面的投入。目前HBM市场主要由三星、SK海力士和美光三家存储…

海尔智家亮相广交会:用确定的用户思维,战胜不确定的市场

全球家电市场的不确定性越来越强。 尽管家电行业复苏趋势不改&#xff0c;但是新的问题已显现。据中国机电产品进出口商会数据&#xff0c;今年1-8月&#xff0c;中国白色家电出口额同比下降2%。同时&#xff0c;据媒体报道&#xff0c;在近日举办的中国进出口贸易交易会&…

【红日靶场】vulnstack5-完整渗透过程

系列文章目录 【红日靶场】vulnstack1-完整渗透过程 【红日靶场】vulnstack2-完整渗透过程 【红日靶场】vulnstack3-完整渗透过程 【红日靶场】vulnstack4-完整渗透过程 文章目录 系列文章目录描述虚拟机密码红队思路 一、环境初始化二、开始渗透外网打点上线cs权限提升域信息…

重置手机网络虽然麻烦,但效果杠杠的!如何重置安卓手机的网络

在这篇文章中&#xff0c;我们将探讨你可能需要在Android设备上重置网络设置的原因&#xff0c;并将提供如何重置的分步说明。无论你是遇到连接问题&#xff0c;还是只是想重新开始网络设置&#xff0c;本指南都将引导你完成重置过程。 重置网络设置的原因 在Android设备上重置…

电流监测芯片SGM8199A2应用电路设计

SGM8199是一系列具有电压输出功能的双向电流监测芯片&#xff0c;用于监测共模电压范围内分流电阻上的压降&#xff0c;而不受电源电压的影响。该器件具有-0.1V至26V的宽共模电压范围输入。低偏移使得在监测电流时允许分流器上的满量程最大压降为10mV。SGM8199系列提供三种固定…