前端笔记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"
            })

后续待更新..

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

postgis mvt矢量切片 django drf mapboxgl

postgis mvt矢量切片 django drf mapboxgl 目录 0.前提 1.sql代码 2.django drf后端服务代码 3.具体的应用&#xff08;整体代码&#xff09; 4.参考 0.前提 [1] 静态的矢量切片可以采用 tippecanoe 生成&#xff0c;nginx代理&#xff0c;这种数据是不更新的&#xff1b…

Element的Dialog+Form使用问题

在Element的Dialog中使用表单时&#xff0c;可能会出现以下问题 无法清空表单校验 <el-dialog title"新建资产" :visible.sync"addAssetsFormVisible" close"resetForm(addAssets)">resetForm (formName) {this.$refs[formName].resetFie…

LeetCode724. 寻找数组的中心下标

题干 给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#xff0c;那么左侧数之和视为 0 &#xff0c;因为在下标的左侧不存在元素。…

高德地图实现点聚合功能的详细步骤

目录 介绍准备工作1.注册并登录高德地图开放平台&#xff0c;申请密钥2.在Vue项目中安装高德地图的相关库/插件。 一、点聚合1.引入高德地图API<font color purple>initializeMap()<font color purple>loadData()<font color purple>createMarkerClustere…

K8S系列文章之 自动化运维利器 Fabric

Fabric 主要用在应用部署与系统管理等任务的自动化&#xff0c;简单轻量级&#xff0c;提供有丰富的 SSH 扩展接口。在 Fabric 1.x 版本中&#xff0c;它混杂了本地及远程两类功能&#xff1b;但自 Fabric 2.x 版本起&#xff0c;它分离出了独立的 Invoke 库&#xff0c;来处理…

SpringBoot第30讲:SpringBoot集成MySQL - MyBatis-Plus基于字段隔离的多租户

SpringBoot第30讲&#xff1a;SpringBoot集成MySQL - MyBatis-Plus基于字段隔离的多租户 本文是SpringBoot第30讲&#xff0c;主要介绍 MyBatis-Plus的基于字段隔离的多租户实现&#xff0c;以及MyBatis-Plus的基于字段的隔离方式实践和原理。 文章目录 SpringBoot第30讲&#…

Qt5.13引入QtWebApp的模块后报错: error C2440: “reinterpret_cast”: 无法从“int”转换为“quintptr”

1、开发环境 Win10-64 qt5.13 msvc2015-64bit-release 2、报错 新建一个demo工程。 引入QtWebApp的httpserver、logging、templateengine三个模块后。 直接运行&#xff0c;&#xff0c;此时报错如下&#xff1a; E:\Qt5.13.1\install\5.13.1\msvc2015_64\include\QtCore…

k8s-服务发现service和ingress

回到目录 service用于集群内部应用的网络调用&#xff0c;处理东西流量 ingress用于集群外部用户访问内部服务&#xff0c;处理南北流量 一 kube-proxy三种代理模式 kubernetes集群中有三层网络&#xff0c;一类是真实存在的&#xff0c;例如Node Network、Pod Network,提供真…

高级web前端开发工程师工作的岗位职责(合集)

高级web前端开发工程师工作的岗位职责1 职责&#xff1a; 1、负责产品web端界面设计与用户体验&#xff0c;包括界面操作、用户交互设计; 2、负责基于Html5的web网页前端开发&#xff0c;要求适配主流浏览器; 3、与后端开发工程师合作&#xff0c;高效完成产品模型的展现及交…

命令模式 Command Pattern 《游戏设计模式》学习笔记

对于一般的按键输入&#xff0c;我们通常这么做&#xff0c;直接if按了什么键&#xff0c;就执行相应的操作 在这里我们是将用户的输入和程序行为硬编码在一起&#xff0c;这是我们很自然就想到的最快的做法。 但是如果这是一个大型游戏&#xff0c;往往我们需要实现一个按键…

Java转换流

文章目录 转换流的理解**InputStreamReader****OutputStreamWriter**练习 引入情况1&#xff1a; 使用FileReader 读取项目中的文本文件。由于IDEA设置中针对项目设置了UTF-8编码&#xff0c;当读取Windows系统中创建的文本文件时&#xff0c;如果Windows系统默认的是GBK编码&a…

Spring Boot3.0(一):入门篇

什么是 Spring Boot Spring Boot 是由 Pivotal 团队提供的全新框架&#xff0c;其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 用我的话来理解&#xff0c;就是 Spring…

深入浅出 Typescript

TypeScript 是 JavaScript 的一个超集&#xff0c;支持 ECMAScript 6 标准&#xff08;ES6 教程&#xff09;。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 设计目标是开发大型应用&#xff0c;它可以编译成纯 JavaScript&#xff0c;编译出来的 JavaScript …

C# OpenCvSharp 去水印 图像修复

效果 项目 VS2010.net4.0OpenCvSharp3 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.IO; using System…

【解放ipad生产力】如何在平板上使用免费IDE工具完成项目开发

我的博客即将同步至腾讯云开发者社区&#xff0c;邀请大家一同入驻&#xff1a;https://cloud.tencent.com/developer/support-plan?invite_code3o19zyy2pneoo 前言 很多人应该会像我一样吧&#xff0c;有时候身边没电脑突然要写项目&#xff0c;发现自己的平板没有一点作用&…

《HeadFirst设计模式(第二版)》第五章代码——单例模式

代码文件目录&#xff1a; 初始版本&#xff1a; package Chapter5_SingletonPattern.origin;/*** Author 竹心* Date 2023/8/5**/public class Singleton {private static Singleton uniqueInstance;private Singleton(){}public static Singleton getInstance(){if(uniqueIn…

C++ 派生类成员的标识与访问——作用域分辨符

在派生类中&#xff0c;成员可以按访问属性分为以下四种&#xff1a; &#xff08;1&#xff09;不可访问成员。这是从基类私有成员继承下来的&#xff0c;派生类或是建立派生类对象的模块都无法访问到它们&#xff0c;如果从派生类继续派生新类&#xff0c;也是无法访问的。 &…

京东开源的、高效的企业级表格可视化搭建解决方案:DripTable

DripTable 是京东零售推出的一款用于企业级中后台的动态列表解决方案&#xff0c;项目基于 React 和 JSON Schema&#xff0c;旨在通过简单配置快速生成页面动态列表来降低列表开发难度、提高工作效率。 DripTable 目前包含以下子项目&#xff1a;drip-table、drip-table-gene…

Qt下开发基于QGIS的应用程序

Qt下开发基于QGIS的应用程序 目的版本说明1、Qt的安装2、MSVC套件与Windows 10 SDK的下载3、QGIS开发有关的库文件下载4、环境搭建5、QGIS开发环境搭建6、展示网页地图 目的 由于有在背景地图上进行动态轨迹&#xff08;曲线&#xff09;显示的需要&#xff0c;故采用QtQGIS的…

MySQL 与MongoDB区别

一、什么是MongoDB呢 ? MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数据存储为一…