layui使用 - 技术栈

layui使用

太空漫步112024-03-13 15:10

layui是一款采前端 UI 框架，layer 是 layui 的一个弹层模块，广受欢迎。

layui无需安装，只需下载layui压缩包，然后将layui目录下的所有内容拷贝到项目的static文件夹中。

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

父窗口html代码

html 复制代码

<!DOCTYPE html>
<html>

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

<body>

<!-- 你的HTML代码 -->
<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>

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

子窗口html代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>

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

页面

当点击父窗口中"调用子窗口"按钮，调用layer.open弹出子窗口,子窗口中使用parent.say调用父窗口中的say函数。