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

目录

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.rhkb.cn/news/164701.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第一部分:通信协议(3)

本心、输入输出、结果 文章目录 系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第一部分&#xff1a;通信协议&#xff08;3&#xff09;前言TCP/IP 封装步骤说明 为什么Nginx被称为“反向”代理&#xff1f;转发代理通常用于&#xff1a;反向代理适用于&#xff1a; 常见…

光伏三相并网逆变器的控制策略与性能分析(Simulink仿真实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

垃圾回收器

垃圾回收器 问题:为什么分代GC算法要把堆分成年轻代和老年代 系统中有部分对象被创建使用后很快就不再使用了,比如订单数据,返回给用户后就不怎么使用了 老年代中会存放长期存活的对象,比如Spring中的bean对象,在程序启动后就不会被回收了 JVM默认设置中,年轻代的大小要远小…

FPGA的通用FIFO设计verilog,1024*8bit仿真,源码和视频

名称&#xff1a;FIFO存储器设计1024*8bit 软件&#xff1a;Quartus 语言&#xff1a;Verilog 本代码为FIFO通用代码&#xff0c;其他深度和位宽可简单修改以下参数得到 reg [7:0] ram [1023:0];//RAM。深度1024&#xff0c;宽度8 代码功能&#xff1a; 设计一个基于FPGA…

2023.10.20期中考核复现(misc)

杂项题就是2023陇剑杯的题目&#xff0c;可能还是不感兴趣吧&#xff0c;自从打完蓝帽杯之后除了web以外什么都没看 flow analysis 1 题目&#xff1a;What is the backdoor file name that comes with the server?( Including file suffix) 服务器附带的后门文件名是什么&am…

Leetcode 21 合并两个有序链表 (链表)

Leetcode 21 合并两个有序链表 &#xff08;链表&#xff09; 解法1 复杂的第一版本&#xff08;优化大于和等于合并见方法二&#xff09;解法2 注意注意&#xff1a;先添加元素toadd.next list1&#xff0c;添加之后才可以移动指针toadd toadd.next 解法1 复杂的第一版本&a…

C++之this指针

前言 C中对象模型和this指针是面向对象编程中的重要概念。对象模型描述了对象在内存中的布局和行为&#xff0c;包括成员变量、成员函数的存储方式和访问权限。this指针是一个隐含的指针&#xff0c;指向当前对象的地址&#xff0c;用于在成员函数中引用当前对象的成员变量和成…

zabbix-proxy代理服务器配置

下载zabbix源 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm 安装 yum -y install zabbix-proxy-mysql zabbix_get 查看相关文件路径 rpm -ql zabbix-proxy-mysql 创建数据库 mysq -uroot -proot mysql> create database…

分析并实现Android中的MVC、MVP架构模式

架构是什么 架构是为了解决特定的问题而提出来的&#xff0c;而且它还有特定的规则&#xff0c;能够把整个应用的整体进行角色的划分。并且他还能够约定角色之间的联系沟通机制。 所以学习架构要带着以下三个问题去理解&#xff1a; 。架构解决了什么问题&#xff1f; 。架…

Pytorch深度学习 - 学习笔记

文章目录 Pytorch深度学习1. Pytorch加载数据初认识2. TensorBoard3. Transforms常见的transform 4. torchvision中的数据集使用5. DataLoader使用6. 神经网络6.1 神经网络的基本骨架6.2 卷积层6.3 最大池化的使用6.4 非线性激活6.5 线性层及其他层6.6 小实战及Sequential 7. 损…

Python学习笔记——存储容器

食用说明&#xff1a;本笔记适用于有一定编程基础的伙伴们。希望有助于各位&#xff01; 列表 列表类似数组&#xff0c;其中可以包含不同类型的元素&#xff0c;写法如下&#xff1a; list1 [Google, Runoob, 1997, 2000] list2 [1, 2, 3, 4, 5 ] list3 ["a", …

antd的RangePicker设置默认值,默认近七天(andt+react)

import moment from "moment";state {initData:[moment().startOf(day).subtract(6, d), moment().endOf(day)], }<FormItem label"产生时间" {...tailItemLayout}>{getFieldDecorator("produceTime", {initialValue: initData})(<Ran…

VR航天科普主题公园模拟太空舱体验馆vr航天模拟体验设备

VR航天航空体验馆巡展是一项非常受欢迎的展览活动&#xff0c;可以让公众在现场体验到航天飞行的乐趣。 普乐蛙VR展览组织者会设计一个航天航空主题的VR体验馆&#xff0c;并在馆内设置各种航天航空相关的展示内容&#xff0c;如太空舱、火箭发射、星际航行等。 其次&#xff0…

信息检索与数据挖掘|(四)索引构建

目录 &#x1f4da;硬件基础 &#x1f4da;基于块的排序索引方法 &#x1f407;BSBI算法(blocked sort-based indexing) &#x1f4da;内存式单遍扫描索引构建方法 &#x1f407;SPIMI算法(single-pass in-memory indexing) &#x1f4da;分布式索引构建方法 &#x1f4d…

linux常见命令-时间日期类、搜索查找类、压缩和解压类

一、时间日期类 1.date 指令-显示当前日期 基本语法 1) date (功能描述:显示当前时间) 2) date %Y (功能描述:显示当前年份) 3) date %m (功能描述:显示当前月份) 4) date %d (功能描述:显示当前是哪一天) 5) date "%Y-%m-%d %H:%M:%S" (功能描述:显示年月…

《java 桌面软件开发》swing 以鼠标为中心放大缩小移动图片

swing 使用Graphic2D 绘制图片&#xff0c;要实现对图片进行缩放和自由拖动。 1.以鼠标所在的位置为中心&#xff0c;滚轮控制缩放 2.缩放后再支持鼠标拖动。 基本原理&#xff1a; 利用scale() 函数。进行缩放。但是要注意的地方是&#xff0c;如果是在 public void paintCom…

Flutter——最详细(CustomScrollView)使用教程

CustomScrollView简介 创建一个 [ScrollView]&#xff0c;该视图使用薄片创建自定义滚动效果。 [SliverList]&#xff0c;这是一个显示线性子项列表的银子列表。 [SliverFixedExtentList]&#xff0c;这是一种更高效的薄片&#xff0c;它显示沿滚动轴具有相同范围的子级的线性列…

【持续更新】tutorial-Linux-Markdown-etc(Linux、命令、Markdown、md、Tex、LaTex)

1. Linux命令 1.1 常用 查看文件夹下文件数量: ls -l | wc -l7zip: 解压&#xff1a;7z x compressed_file.7z -o/path/to/destination # 注意-o和目标路径是连起来的&#xff0c;没有空格压缩&#xff1a;7z a compressed_file.zip destination_path conda 查看 conda 拥有的…

Cornerstone for Mac:高效SVN管理的黄金标准

在当今的软件开发领域&#xff0c;版本控制系统是不可或缺的一部分。其中&#xff0c;Subversion&#xff08;SVN&#xff09;是一个广泛使用的版本控制系统&#xff0c;有助于团队协同工作&#xff0c;实现代码的版本管理和追踪。对于Mac用户来说&#xff0c;Cornerstone是一款…

服务器数据恢复-linux+raid+VMwave ESX数据恢复案例

服务器数据恢复环境&#xff1a; 一台某品牌x3950 X6型号服务器&#xff0c;linux操作系统&#xff0c;12块硬盘组建了一组raid阵列&#xff0c;上层运行VMwave ESX虚拟化平台。 服务器故障&#xff1a; 在服务器运行过程中&#xff0c;该raid阵列中有硬盘掉线&#xff0c;linu…