【前端】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/…

【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更换成你的网址 安装完毕 记住系统默认的账号密码 温馨提示:如果默认…

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

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

【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…

《向量数据库》——向量数据库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;推送到远程 直接…

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

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

Andriod学习笔记(二)

页面设计的零碎知识 通用属性设置文本大小设置视图宽高设置视图的对齐方式 页面布局LinearLayoutRelativeLayoutGridLayoutScollView 按钮触控ButtonImageViewImageButton 通用属性 设置文本大小 纯数字的setTextSize方法&#xff0c;内部默认字体单位为sp&#xff0c;sp是An…

YOLOv7-PTQ量化部署

目录 前言一、PTQ量化浅析二、YOLOv7模型训练1. 项目的克隆和必要的环境依赖1.1 项目的克隆1.2 项目代码结构整体介绍1.3 环境安装 2. 数据集和预训练权重的准备2.1 数据集2.2 预训练权重准备 3. 训练模型3.1 修改模型配置文件3.2 修改数据配置文件3.3 训练模型3.4 mAP测试 三、…

[Spring] SpringBoot2 简介(一)—— 基础配置

目录 一、SpringBoot 简介 1、Spring 的缺点 2、SpringBoot 功能 二、SpringBoot 入门案例 1、实现步骤 2、访问服务器 3、入门小结 4、Idea 快速构建 SpringBoot 工程 5、起步依赖无需版本号 6、主启动类的在项目中的位置&#xff08;*重要*&#xff09; 三、Sprin…

【小白专用 已验证】PHP连接SQLServer数据库

PHP是一门强大的服务器端脚本语言&#xff0c;而SQL Server是Microsoft开发的一款关系型数据库管理系统。为了在PHP中直接操纵SQL Server数据库&#xff0c;需要通过安装SQL Server扩展来实现。这篇文章将详细介绍如何在PHP中使用SQL Server扩展来操作数据库。 首先&#xff0…

链表的中间结点-力扣

1、题目描述 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台备战技术面试&#xff1f;力扣提供海…

使用 Rust 和 cURL 库下载程序

以下是一个使用 Rust 和 cURL 库的下载器程序&#xff0c;用于下载 图像。此程序使用了 https://www.duoip.cn/get_proxy 的代码。 extern crate curl; ​ use std::io::{self, Read}; use std::error::Error; ​ fn main() {let url "https://www.baidu.com";let …

USB学习(1):USB基础之接口类型、协议标准、引脚分布、架构、时序和数据格式

连接计算机外围设备最简单的方法是通过USB(通用串行总线)。USB是即插即用接口&#xff0c;可以将扫描仪、打印机、数码相机、闪存驱动器等计算机外围设备连接到计算机上。本篇文章就来介绍一下USB的一些基础知识&#xff0c;包括。 文章目录 1 接口类型和标准规范2 引脚分布3 …

centos如何根据端口号查询程序路径

centos如何根据端口号查询程序路径 如果是半路接受的应用&#xff0c;上个人只给你说了程序的端口号&#xff0c;别的都没&#xff0c;那怎么找程序的路径哪&#xff1f;一是给上上个人要&#xff0c;二是自己找&#xff08;我是自己找的&#xff09; 小白教程&#xff0c;一…