前端笔记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…

k8s概念-污点与容忍

k8s 集群中可能管理着非常庞大的服务器&#xff0c;这些服务器可能是各种各样不同类型的&#xff0c;比如机房、地理位置、配置等&#xff0c;有些是计算型节点&#xff0c;有些是存储型节点&#xff0c;此时我们希望能更好的将 pod 调度到与之需求更匹配的节点上。 此时就需要…

人工智能在心电信号分类中的应用

目录 1 引言 2 传统机器学习中的特征提取与选择 3 深度学习中的特征提取与选择

ROS2学习(五)进程内topic高效通信

对ROS2有一定了解后&#xff0c;我们会发现ROS2中节点和ROS1中节点的概率有很大的区别。在ROS1中节点是最小的进程单元。在ROS2中节点与进程和线程的概念完全区分开了。具体区别可以参考 ROS2学习(四)进程&#xff0c;线程与节点的关系。 在ROS2中同一个进程中可能存在多个节点…

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

根据并查集练习 —岛屿数量的问题再次扩展&#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接…

SQL-方法论

写SQL时可以考虑的手段&#xff1a; 行转列 先分为多个临时表&#xff0c;然后JOIN到一起 select uid,t1.name YuWen,t2.name ShuXue from (select uid,namefrom tableAwhere naem 语文) t1join (select uid,namefrom tableAwhere naem 数学) t2on t1.uid t2.uid; 用sum(if…

数据结构 10-排序6 Sort with Swap(0, i)(C语言)

10-排序6 Sort with Swap(0, i) Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order. But what if Swap(0, *) is the ONLY operation that is allowed to use? For example, to sort {4, 0, 2, 1, 3} we may apply the…

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…

注解 @JsonFormat 与 @DateTimeFormat 的使用

文章目录 JsonFormat (双端互传)DateTimeFormat &#xff08;前端传后端日期格式转化&#xff09;情况一 前端是时间组件 <el-date-picker 或其他情况二 前端未设置组件 JsonFormat (双端互传) com.fasterxml.jackson.annotation.JsonFormat; 将字符串的时间转换成Date类型…

webSocket 与传统的 http 有什么优势

webSocket 与传统的 http 有什么优势 当页面中需要观察实时数据的变化&#xff08;比如聊天、k 线图&#xff09;时&#xff0c;过去我们往往使用两种方式完成 第一种是短轮询&#xff0c;即客户端每隔一段时间就向服务器发送消息&#xff0c;询问有没有新的数据 第二种是长轮询…