前端笔记html-layer使用

layer.open方法

    layer.open({type:2, //可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)title: title,content:['url?id=' + id,'no'],  // url请求地址返回页面, no->yes显示进度条area:['650px','585px'],btn: ['确定', '取消'],yes: function(index, layero){var iframeWin = window[layero.find('iframe')[0]['name']];// view方法在弹窗中实现// iframeWin.view();// 关闭自身弹窗// layer.close(index);},btnAlign:'c'});

父页面获取layer.open弹窗中的值

1、获取input中的值

content页面

<div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px"><div class="input-group"><input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" /></div>
</div>

父页面

layer.open({type:1,title:"选择时间",content:'    <div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px">\n' +'        <div class="input-group">\n' +'            <input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"\n' +'                   onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" />\n' +'        </div>\n' +'    </div>',area:['250px','200px'],btn: ['确定', '取消'],btnAlign:'c',yes:(index,layero)=>{var kjMonth = $('[name=kjMonth]').val();console.log(kjMonth);},cancel:(index, layero)=>{}
})

2、获取select中选中的值

网上看到的, 顺便记录下

content页面

<select id="groupId" name="groupId" xm-select="group"><span th:each="info : ${groupList}">
<option th:text="${info.name}" th:value="${info.id}"></option></span></select>

父页面

layer.open({type: 2,title: "标题",area: ['600px', '500px'],content: "/page/layerOpen", //请求后端返回页面地址btn: ['提交', '取消'],yes: function(index, layero){//得到iframe页的窗口对象,执行iframe页的方法:var iframeWin = window[layero.find('iframe')[0]['name']];// 获取页面中xm-select属性为group的下拉选择框选中的值var selectGroupData = iframeWin.layui.formSelects.value('group', 'val');console.log(selectGroupData);// 或var kjMonth = $('[name=groupId]').val();}
})

layer设置显示位置

设置显示位置可以通过offset进行设置,

设置代码:

    layer.open({type: 2, content: "content.html",offset:"rb"})

后续待更新..

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

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

相关文章

Python-flask项目入门

一、flask对于简单搭建一个基于python语言-的web项目非常简单 二、项目目录 示例代码 git路径 三、代码介绍 1、安装pip依赖 通过pip插入数据驱动依赖pip install flask-sqlalchemy 和 pip install pymysql 2.配置数据源 config.py DIALECT mysql DRIVER pymysql USERN…

Spring(11) Bean的生命周期

目录 一、简介二、Bean的流程1.BeanDefinition2.Bean 的生命周期 三、代码验证1.User 实体类2.MyBeanPostProcessor 后置处理器3.SpringConfig 扫描包配置4.UserTest 测试类5.测试结果6.模拟AOP增强 一、简介 首先&#xff0c;为什么要学习 Spring 中 Bean 的生命周期呢&#…

反弹shell的N种姿势

预备知识1. 关于反弹shell 就是控制端监听在某TCP/UDP端口&#xff0c;被控端发起请求到该端口&#xff0c;并将其命令行的输入输出转到控制端。reverse shell与telnet&#xff0c;ssh等标准shell对应&#xff0c;本质上是网络概念的客户端与服务端的角色反转。2. 反弹shel…

webpack性能优化

文章目录 1. 性能优化-分包2. 动态导入3. 自定义分包4. Prefetch和Preload5. CDN加载配置6. CSS的提取7. terser压缩7.1 Terser在webpack中配置7.2 css压缩 8. Tree Shaking 消除未使用的代码8.1 usedExports 配置8.2 sideEffects配置8.3 CSS实现Tree Shaking 9. Scope Hoistin…

并查集练习 — 扩展问题(二)

根据并查集练习 —岛屿数量的问题再次扩展&#xff1a; 原题是给定一个二维数组matrix&#xff08;char[][]&#xff09;&#xff0c;里面的值不是1就是0&#xff0c;上、下、左、右相邻的1认为是一片岛。返回matrix中岛的数量。 扩展为&#xff1a;如果是中国的地图&#xff0…

Xposed回发android.os.NetworkOnMainThreadException修复

最近用xposed进行hook回发的时候&#xff0c;又出现了新的问题&#xff1b; android.os.NetworkOnMainThreadException&#xff1b; 在Android4.0以后&#xff0c;写在主线程&#xff08;就是Activity&#xff09;中的HTTP请求&#xff0c;运行时都会报错&#xff0c;这是因为…

移动开发最佳实践:为 Android 和 iOS 构建成功应用的策略

您可以将本文作为指南&#xff0c;确保您的应用程序符合可行的最重要标准。请注意&#xff0c;这份清单远非详尽无遗&#xff1b;您可以加以利用&#xff0c;并添加一些自己的见解。 了解您的目标受众 要制作一个成功的应用程序&#xff0c;你需要了解你是为谁制作的。从创建…

API接口:企业信息核验

企业信息核验是现代企业管理中必不可少的一项业务&#xff0c;它可以帮助企业做出正确的决策。在这篇文章里&#xff0c;我们将会介绍如何使用API接口来对企业信息进行核验&#xff0c;并实现快捷、准确的查询。 一、API接口 在这里我们使用的是挖数据提供的企业信息核验API接…

arm交叉编译lmbench

一、下载lmbench www.bitmover.com/lmbench 官网下载&#xff0c;http://www.bitmover.com/lmbench/lmbench3.tar.gz 我没有下载下来&#xff0c;找的别人的百度云下载 链接: https://pan.baidu.com/s/1tGo1clCqY-jQPN8G1eWSsg 提取码: f6jd 二、修改makefile 修改三个文件…

Last-Mile Embodied Visual Navigation 论文阅读

论文阅读 题目&#xff1a;Last-Mile Embodied Visual Navigation 作者&#xff1a;JustinWasserman, Karmesh Yadav 来源&#xff1a;CoRL 时间&#xff1a;2023 代码地址&#xff1a;https://jbwasse2.github.io/portfolio/SLING Abstract 现实的长期任务&#xff08;例如…

W5500-EVB-PICO做DNS Client进行域名解析(四)

前言 在上一章节中我们用W5500-EVB-PICO通过dhcp获取ip地址&#xff08;网关&#xff0c;子网掩码&#xff0c;dns服务器&#xff09;等信息&#xff0c;给我们的开发板配置网络信息&#xff0c;成功的接入网络中&#xff0c;那么本章将教大家如何让我们的开发板进行DNS域名解析…

小程序 view下拉滑动导致scrollview滑动事件失效

小程序页面需要滑动功能 下拉时滑动&#xff0c;展示整个会员卡内容&#xff0c; 下拉view里包含了最近播放&#xff1a;有scrollview&#xff0c;加了下拉功能后&#xff0c;scrollview滑动失败了。 <view class"cover-section" catchtouchstart"handletou…

CS 144 Lab Four 收尾 -- 网络交互全流程解析

CS 144 Lab Four 收尾 -- 网络交互全流程解析 引言Tun/Tap简介tcp_ipv4.cc文件配置信息初始化cs144实现的fd家族体系基于自定义fd体系进行数据读写的adapter适配器体系自定义socket体系自定义事件循环EventLoop模板类TCPSpongeSocket详解listen_and_accept方法_tcp_main方法_in…

[整合]无root权限的服务器上安装screen

安装ncurses 命令行输入以下指令安装ncurses&#xff0c;这个是安装screen的前置依赖包。 wget http://ftp.gnu.org/gnu/ncurses/ncurses-6.0.tar.gz #下载所需的ncurses版本tar zxvf ncurses-6.0.tar.gz #解压到当前目录cd ncurses-6.0 #打开ncurses-6.0文件夹mkdi…

---------------- 部署 Zookeeper 集群 ----------------

部署 Zookeeper 集群 1.安装前准备2.安装 Zookeeper修改配置文件在每个节点上创建数据目录和日志目录在每个节点的dataDir指定的目录下创建一个 myid 的文件配置 Zookeeper 启动脚本 //准备 3 台服务器做 Zookeeper 集群 192.168.109.1 192.168.109.2 192.168.109.3 1.安装前准…

实现vscode上用gdb调试stm32

实现vscode上用gdb调试stm32 这周负责编写设备的某个模块&#xff0c;其中遇到了一些变量地址不正确的错误&#xff0c;按理这种底层变量错误用gdb一类的调试器就能很快查到&#xff0c;可是初入嵌入式一行&#xff0c;此C语言非彼C语言&#xff0c;对于gdb怎么对接到项目上根…

ffmpeg-ffplay代码架构简述

全局变量 /* Minimum SDL audio buffer size, in samples. */ // 最小音频缓冲 #define SDL_AUDIO_MIN_BUFFER_SIZE 512 /* Calculate actual buffer size keeping in mind not cause too frequent audio callbacks */ // 计算实际音频缓冲大小&#xff0c;并不需要太频繁…

浅谈React中的ref和useRef

目录 什么是useRef&#xff1f; 使用 ref 访问 DOM 元素 Ref和useRef之间的区别 Ref和useRef的使用案例 善用工具 结论 在各种 JavaScript 库和框架中&#xff0c;React 因其开发人员友好性和支持性而得到认可。 大多数开发人员发现 React 非常舒适且可扩展&#xff0c;…

51单片机(普中HC6800-EM3 V3.0)实验例程软件分析 实验三 LED流水灯

目录 前言 一、原理图及知识点介绍 二、代码分析 知识点五&#xff1a;#include 中的库函数解析 _crol_&#xff0c;_irol_&#xff0c;_lrol_ _cror_&#xff0c;_iror_&#xff0c;_lror_ _nop_ _testbit_ 前言 第一个实验:51单片机&#xff08;普中HC6800-EM3 V3.0…

深度学习——注意力机制、自注意力机制

什么是注意力机制&#xff1f; 1.注意力机制的概念&#xff1a; 我们在听到一句话的时候&#xff0c;会不自觉的捕获关键信息&#xff0c;这种能力叫做注意力。 比如&#xff1a;“我吃了100个包子” 有的人会注意“我”&#xff0c;有的人会注意“100个”。 那么对于机器来说…