layui使用

layui是一款采前端 UI 框架，layer 是 layui 的一个弹层模块，广受欢迎。
layui无需安装，只需下载layui压缩包，然后将layui目录下的所有内容拷贝到项目的static文件夹中。
在这里插入图片描述

Layer可以弹出iframe层，在content属性中设置html文件地址即可。

父窗口html代码

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layuititle>
    <link rel="stylesheet" href="${ctxPath}/css/layui.css">
head>

<body>


<button>弹出子窗口button>
<script src="${ctxPath}/layui.js">script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'jquery'], function() {
        var layer = layui.layer,
            form = layui.form;
        var $ = layui.jquery;
        $('button').click(function() {
            console.log('hello');
            layer.open({
                type: 2,
                content: 'http://localhost:8082/blog/login' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://localhost:8082/blog/login', 'no']
            });
        });
        return;

    });

    function say() {
        console.log('test');
    }
script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

引入layui.css和layui.js。content后面的字符串是一个url，返回子窗口html网页。

子窗口html代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<a href="${ctxPath}/blog/index">首页a>
<form action="${ctxPath}/blog/login" method="get">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" value="登录">
form>
<script>
    console.log(parent)
    parent.say();
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中parent.say()中的parent代表父窗口，是一个window对象。该对象调用父窗口html中定义的say()函数。

页面

在这里插入图片描述
当点击父窗口中“调用子窗口”按钮，调用layer.open弹出子窗口,子窗口中使用parent.say调用父窗口中的say函数。

相关阅读:
【Rust日报】2022-08-07 专注于开发人员生产力的 R3BL TUI 库和应用程序
如何实现PLC点对点、点对多点组网通信？
mybatis_plus条件构造器
计算机网络——计算机网络体系结构（3/4）-计算机网络体系结构分层思想举例
Netty源码研究笔记（4）——EventLoop系列
【转】常用的隧道技术
如何通过console线登录交换机
R语言中ARMA，ARIMA（Box-Jenkins），SARIMA和ARIMAX模型用于预测时间序列数据
基本计算器 [括号匹配的变形]
软件开发遵循的一些原则

原文地址：https://blog.csdn.net/zhourongxiang1/article/details/136657583