layui自定义admin页面简单实现-练手

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>管理界面</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="lib/layui/css/layui.css" rel="stylesheet"/>
    <style>
        .layui-layout-admin .layui-side {
            transition-property: all;
            transition-duration: 500ms;
            transition-timing-function: linear;
        }

        .layui-layout-admin .layui-body {
            transition-property: all;
            transition-duration: 500ms;
            transition-timing-function: linear;
        }

        .layui-layout-admin .layui-footer {
            transition-property: all;
            transition-duration: 500ms;
            transition-timing-function: linear;
        }

        .layui-layout-admin .layui-body {
            height: calc(100% - 60px);
        }

        #tab-main {
            position: relative;
            height: 100%;
        }

        #tab-page {
            margin: 0;
            overflow: hidden;
            height: 100% !important;
        }

        #tab-page .layui-tab-content {
            height: calc(100% - 42px) !important;
        }

        #tab-page .layui-tab-content .layui-tab-item {
            overflow-y: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">Admin</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" lay-filter="header-left-nav">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="#" class="layui-icon layui-icon-shrink-right" id="menu-left-shrick"></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="#" class="layui-icon layui-icon-refresh-1" id="menu-left-refresh"></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="header-right-nav">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img alt="" src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"/>
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人中心</a></dd>
                    <dd><a href="javascript:;">设置</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="side-left-nav">
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>group</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"><span>1</span></a></dd>
                        <dd><a href="javascript:;"><span>2</span></a></dd>
                        <dd><a href="javascript:;"><span>3</span></a></dd>
                        <dd><a href="javascript:;"><span>4</span></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div id="tab-main layui-panel">
            <div class="layui-tab layui-tab-brief" id="tab-page" lay-filter="tab-page" lay-allowclose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="11">标签1</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>你还真滑到了底部呀
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>

<script src="lib/layui/layui.js"></script>
<script>
    //JS
    layui.use(["element", "layer", "util"], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        //头部事件
        util.event("lay-header-event", {
            menuLeft: function (othis) {
                // 左侧菜单事件
                layer.msg("展开左侧菜单的操作", {icon: 0});
            },
            menuRight: function () {
                // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: "更多",
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ["260px", "100%"],
                    offset: "rt", // 右上角
                    anim: "slideLeft", // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false,
                });
            },
        });
        $('#menu-left-shrick').click(function () {
            const $menuLeftAside = $('.layui-side');
            if ($menuLeftAside.width() >= 200) {
                $menuLeftAside.css('width', '60px');
                setTimeout(function () {
                    $('.layui-side .layui-nav .layui-nav-item span').addClass('layui-anim').removeClass('layui-anim-fadein').addClass('layui-anim-fadeout');
                }, 200);
                $('.layui-body').css('left', '60px');
                $('.layui-footer').css('left', '60px');
            } else {
                $menuLeftAside.css('width', '200px');
                setTimeout(function () {
                    $('.layui-side .layui-nav .layui-nav-item span').addClass('layui-anim').removeClass('layui-anim-fadeout').addClass('layui-anim-fadein');
                }, 200);
                $('.layui-body').css('left', '200px');
                $('.layui-footer').css('left', '200px');
            }
        });
        $('#menu-left-refresh').click(function () {
            $('#menu-left-refresh').removeClass('layui-anim').removeClass('layui-anim-rotate');
            setTimeout(function () {
                $('#menu-left-refresh').addClass('layui-anim').addClass('layui-anim-rotate');
            }, 100);
        });
        $('.layui-tab-title').on('contextmenu', 'li', 1, function (event) {
            event.preventDefault();
            const layId = $(this).attr('lay-id');
            layer.open({
                type: 1,
                title: '关闭标签',
                content: false,
                time: 5000,
                success: function (layero, index) {
                    let timeNum = this.time / 1000, setText = function (start) {
                        layer.title('弹窗<span class="layui-font-red">' + (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
                    };
                    setText(!0);
                    this.timer = setInterval(setText, 1000);
                    if (timeNum <= 0) clearInterval(this.timer);
                },
                end: function () {
                    clearInterval(this.timer);
                },
                btn: ['关闭当前', '关闭其他', '关闭全部'],
                btn1: function (index, layero, that) {
                    element.tabDelete('tab-page', layId);
                    layer.close(index);
                },
                btn2: function (index, layero, that) {
                    $('.layui-tab-title li').each(function (index, elem) {
                        let liLayId = $(this).attr('lay-id');
                        if (liLayId !== layId) {
                            element.tabDelete('tab-page', liLayId);
                        }
                    });
                    layer.close(index);
                },
                btn3: function (index, layero, that) {
                    $('.layui-tab-title li').each(function (index, elem) {
                        let liLayId = $(this).attr('lay-id');
                        element.tabDelete('tab-page', liLayId);
                    });
                    layer.close(index);
                }
            });
        });
        element.on('nav(header-left-nav)', function (elem) {
            console.log(elem);
        });
        element.on('nav(header-right-nav)', function (elem) {
            console.log(elem);
        });
        element.on('nav(side-left-nav)', function (elem) {
            console.log(elem);
        });

        // 自定义固定条
        util.fixbar({
            bars: [
                { // 定义可显示的 bar 列表信息 -- v2.8.0 新增
                    type: 'share',
                    icon: 'layui-icon-share'
                },
                {
                    type: 'help',
                    icon: 'layui-icon-help'
                },
                {
                    type: 'cart',
                    icon: 'layui-icon-cart',
                    style: 'background-color: #FF5722;'
                },
                {
                    type: 'groups',
                    content: '群',
                    style: 'font-size: 21px;'
                }
            ],
            // bar1: true,
            // bar2: true,
            // default: false, // 是否显示默认的 bar 列表 --  v2.8.0 新增
            // bgcolor: '#393D52', // bar 的默认背景色
            // css: {right: 100, bottom: 100},
            // target: '#target-test', // 插入 fixbar 节点的目标元素选择器
            // duration: 300, // top bar 等动画时长（毫秒）
            on: { // 任意事件 --  v2.8.0 新增
                mouseenter: function (type) {
                    layer.tips(type, this, {
                        tips: 4,
                        fixed: true
                    });
                },
                mouseleave: function (type) {
                    layer.closeAll('tips');
                }
            },
            // 点击事件
            click: function (type) {
                console.log(this, type);
                // layer.msg(type);
            }
        });
    });
</script>
</body>
</html>