【前端】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.mzph.cn/news/115085.shtml

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

相关文章

使用WPF模仿Windows记事本界面

本次仅模仿Windows记事本的模样&#xff0c;并未实现其功能。 所有代码如下&#xff1a; <Window x:Class"控件的基础使用.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/…

XML与html解析,区别,如何使用

目录 简介: HTML&#xff08;超文本标记语言&#xff09;&#xff1a; 如何使用HTML&#xff1a; XML&#xff08;可扩展标记语言&#xff09;&#xff1a; 如何使用XML&#xff1a; 区别&#xff1a; 简介: XML&#xff08;可扩展标记语言&#xff09;和 HTML&#xff…

【Godot】【BUG】4.x NavigationAgent 导航不生效

4.2.beta2 试了半天才发现原来默认只对第一个有导航的 TileMap 的第 1 层 生效&#xff0c;而我设置的导航层不是第一层&#xff0c;然后我新建了一个 TileMap 将导航的瓦片设置到这个 TileMap 上了&#xff0c;如图 这样就解决了问题&#xff0c;不用再修改默认设置的东西了&a…

机器学习tip:sklearn中的pipeline

文章目录 1 加载数据集2 构思算法的流程3 Pipeline执行流程的分析ReferenceStatement 一个典型的机器学习构建包含若干个过程 源数据ETL数据预处理特征选取模型训练与验证 一个典型的机器学习构建包含若干个过程 以上四个步骤可以抽象为一个包括多个步骤的流水线式工作&…

四大特性模块(module)

module的动机 C20中新增了四大特性之一的模块(module)&#xff0c;用以解决传统的头文件在编译时间及程序组织上的问题。 modules 试图解决的痛点 能最大的痛点就是编译慢, 头文件的重复替换, 比如你有多个翻译单元, 每一个都调用了 iostream, 就得都处理一遍. 预处理完的源…

三维模型表面积计算方法

【版权声明】 本文为博主原创文章&#xff0c;未经博主允许严禁转载&#xff0c;我们会定期进行侵权检索。 更多算法总结请关注我的博客&#xff1a;https://blog.csdn.net/suiyingy&#xff0c;或”乐乐感知学堂“公众号。 本文章来自于专栏《Python三维模型处理基础》的系列文…

在线存储系统源码 网盘网站源码 云盘系统源码

Cloudreve云盘系统源码-支持本地储存和对象储存,界面美观 云盘系统安装教程 测试环境:PHP7.1 MYSQL5.6 Apache 上传源码到根目录 安装程序: 浏览器数据 http://localhost/CloudreveInstallerlocalhost更换成你的网址 安装完毕 记住系统默认的账号密码 温馨提示:如果默认…

RustDay06------Exercise[81-90]

81.宏函数里面的不同的匹配规则需要使用分号隔开 // macros4.rs // // Execute rustlings hint macros4 or use the hint watch subcommand for a // hint.// I AM NOT DONE#[rustfmt::skip] macro_rules! my_macro {() > {println!("Check out my macro!");};($…

C++ 字面量

在编译之前就已经知道的值。字面量的形式和值决定了它的数据类型。 整型字面量 整型字面值具体的数据类型由它的值和符号决定。默认情况&#xff0c;十进制字面量是带符号数&#xff0c;八进制和十六进制字面值既可能是带符号的也可能是无符号的。十进制字面值的类型是int、l…

【STM32】标准库与HAL库对照学习系列教程大全

【STM32】标准库与HAL库对照学习系列教程大全 一、前言二、准备工作三、基础篇四、进阶篇五、特别篇六、外设篇 一、前言 前言&#xff1a;开始工作后&#xff0c;学习的时间变少了很多&#xff0c;但是今年的1024节&#xff0c;还是打算送个福利给大家&#xff0c;将之前的STM…

[WSL][ubuntu]解决WSL Ubuntu+xfce4 图形界面一段时间后黑屏

问题场景&#xff1a;WLS中Ubuntu安装xdrp进行远程桌面连接一段时间后会黑屏&#xff0c;这是因为锁屏后不能正常唤醒导致&#xff0c;因此很直接方法就是不让锁屏&#xff1a; 1、进入图形界面&#xff0c;点击右上角Applications--->Settings--->Light Locker Setting…

【Hive SQL 每日一题】环比增长率、环比增长率、复合增长率

文章目录 环比增长率同比增长率复合增长率测试数据需求说明需求实现 环比增长率 环比增长率是指两个相邻时段之间某种指标的增长率。通常来说&#xff0c;环比增长率是比较两个连续时间段内某项数据的增长量大小的百分比。 环比增长率反映了两个相邻时间段内某种经济指标的变…

【Java 进阶篇】Java XML快速入门:理解、解析和生成XML

XML&#xff08;可扩展标记语言&#xff09;是一种常用于存储和交换数据的标记语言&#xff0c;而Java是一种强大的编程语言&#xff0c;它具有处理XML的能力。在本篇博客中&#xff0c;我们将探讨XML的基础知识&#xff0c;学习如何在Java中解析和生成XML文档&#xff0c;以及…

springboot 程序设计优雅退出

一 springboot优雅退出 1.1 概述 在springboot2.3版本后&#xff0c;实现了优雅退出功能。当server.shutdowngraceful启用时&#xff0c;在 web 容器关闭时&#xff0c;web 服务器将不再接收新请求&#xff0c;并将剩余活动执行完成给设置一个缓冲期。缓冲期 timeout-per-shu…

LeetCode75——Day13

文章目录 一、题目二、题解 一、题目 1679. Max Number of K-Sum Pairs You are given an integer array nums and an integer k. In one operation, you can pick two numbers from the array whose sum equals k and remove them from the array. Return the maximum num…

《向量数据库》——向量数据库Milvus Cloud 和Dify比较

Zilliz Cloud v.s. Dify Dify 作为开源的 LLMs App 技术栈&#xff0c;在此前已支持丰富多元的大型语言模型的接入&#xff0c;除了 OpenAI、Anthropic、Azure OpenAI、Hugging face、Replicate 等全球顶尖模型及模型托管平台&#xff0c;也完成了国内主流的各大模型支持&#…

pycharm操作git、前后端项目上传到gitee

pycharm操作git 之前用命令做的所有操作&#xff0c;使用pychrm点点就可以完成 克隆代码 上方工具栏Git ⇢ \dashrightarrow ⇢ Clone ⇢ \dashrightarrow ⇢ 填写地址&#xff08;http、ssh&#xff09; 提交到暂存区&#xff0c;提交到版本库&#xff0c;推送到远程 直接…

Qt判断文件夹路径、文件是否存在不存在则创建

Qt判断文件夹路径、文件是否存在不存在则创建 Chapter1 Qt判断文件夹路径、文件是否存在不存在则创建Qt判断文件夹/目录是否存在Qt判断文件是否存在 Chapter2 Qt 判断文件或文件夹是否存在及创建文件夹1. 判断文件夹是不是存在2. 判断文件是不是存在3、判断文件或文件夹是不是存…

C. Medium Design Codeforces Round 904 (Div. 2)

Problem - C - Codeforces 题目大意&#xff1a;有一个长为m的数组初始全为0&#xff0c;有n个区间[li,ri]&#xff0c;每选择一个区间就要令区间内所有数1&#xff0c;要求选择一些区间&#xff0c;使得数组的最大值-最小值最大&#xff0c;求这个差值 1<n<1e5;1<m…

初始Redis 分布式结构的发展演变

目录 Redis的特点和使用场景 分布式系统的引入 单机系统 分布式系统 应用服务器的增多&#xff08;处理更多的请求&#xff09; 数据库读写分离&#xff08;数据服务器的增多) 引入缓存 应对更大的数据量 业务拆分&#xff1a;微服务 Redis的特点和使用场景 我们先来…