layUI簡單初始化後臺模板

阿新 • • 發佈：2021-10-02

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理系統</title>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
</head>
<style>
    /*消除導航nav*下來的出現的水平滾動條*/
    body {
        overflow-x: hidden;
    }
    /*改原來head 樣式*/
    .layui-header .layui-nav-bar {
        top: 0 !important;
        height: 2px !important;
    }
    .layui-tab-title {
        padding-left: 41px;
        padding-right: 80px;
    }
    /*改原本nav樣式，可以不用影響*/
    .layui-side .layui-nav > .layui-nav-item span.layui-icon {
        margin-right: 10px;
    }
    .layui-side .layui-nav > .layui-nav-item > a {
        text-overflow: clip !important;
    }
    .layui-side .layui-nav > .layui-nav-item > dl> dd > a {
        padding-left: 30px !important;
    }
    .layui-side .layui-nav .layui-nav-item [level='3'] > dd> a {
        padding-left: 45px !important;
    }
    /*改原本nav樣式，end*/
    /*收縮左側欄樣式 重點*/
    .layui-side:hover {overflow-x: visible!important;}
    .layui-side-hover cite {
        display: none;
    }
    .layui-side-hover .layui-nav-item > a .layui-nav-more {display: none;}
    .layui-side-hover .layui-side-scroll {
        overflow-x: visible !important;
        width: 60px !important;
    }
    .layui-side-hover [lay-filter="side-menu"]{width: 60px !important;}
    .layui-side-hover .layui-nav > .layui-nav-item > .layui-nav-child{
        z-index: 99;
        overflow: hidden;
        background-color: #23262E!important;
        display: none;
        position: absolute!important;
        min-width: 140px;
        margin-left: 60px;
        padding: 4px 0!important;
        border-radius: 2px;
        box-shadow: 0px 0px 2px whitesmoke!important;
    }
    .layui-side-hover .layui-nav > .layui-nav-item:hover > .layui-nav-child { display: block; }
    /*收縮左側欄樣式 end*/
    /*tab title 欄*/
    .layui-tab-control > li {
        position: absolute;
        top: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #fff;
        border-top: whitesmoke 1px solid;
        border-bottom: whitesmoke 1px solid;
    }

    .layui-tab-control .layui-tab-prev {
        left: 0;
        border-right: whitesmoke 1px solid;
    }

    .layui-tab-control .layui-tab-next {
        right: 40px;
        border-left: 1px solid whitesmoke;
    }

    .layui-tab-control .layui-tab-tool {
        right: 0;
        border-left: 1px solid whitesmoke;
    }
    /*tab欄更多操作*/
    .layui-tab-tool .layui-nav {
        position: absolute;
        top: 0;
        width: 100%;
        height: 43px !important;
        padding: 0;
        background: 0 0;
    }

    .layui-tab-tool .layui-nav-item {
        height: 40px;
    }

    .layui-tab-tool .layui-nav-child {
        left: auto;
        top: 45px;
        right: 3px;
        width: 120px;
        border: 1px solid whitesmoke;
    }
    /*重點 iframe*/
    .lay-iframe[lay-frameId] {
        width: 100%;
        height: 99%;
        border: 0;
    }

    .layui-tab-title .layui-icon-home {
        min-width: 30px;
        font-size: 20px;
    }
</style>
<!-- dom基本和文件示例看齊 -->
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">YANG ADMIN</div>
        <!-- 頭部區域（可配合layui 已有的水平導航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移動端顯示 -->
            <li class="layui-nav-item layui-hide-xs" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-shrink-right"></i>
            </li>

            <li class="layui-nav-item refresh layui-hide-xs " lay-unselect><a href="javascript:;">重新整理</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect><a href="">前臺</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide-xs" lay-unselect><a href="javascript:;" data-toggle='fullscreen'>全屏</a></li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    楊十一
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">個人中心</a></dd>
                    <dd><a href="">修改密碼</a></dd>
                    <dd><a href="">登出登入</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">
            <!-- 左側導航區域（可配合layui已有的垂直導航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="side-menu">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;" menu-title="使用者管理" menuid="1"><span class="layui-icon layui-icon-home"></span><cite>使用者管理</cite></a>
                    <dl class="layui-nav-child layui-nav-hover">
                        <dd><a href="javascript:;" menu-title="會員" menuid="5" lay-href="/admin/console">會員</a></dd>
                        <dd><a href="javascript:;" menu-title="管理員" menuid="6" lay-href="/admin/console">管理員</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><cite>系統</cite></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;">許可權</a>
                            <dl class="layui-nav-child" level="3">
                                <dd><a href="javascript:;">list 1</a></dd>
                                <dd><a href="javascript:;">list 2</a></dd>
                            </dl>
                        </dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超連結</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href=""><cite>the links</cite></a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 內容主體區域 -->
        <div class="layui-tab layui-tab-brief" style="margin-top: 2px" lay-allowClose="true" lay-filter="content">
            <ul class="layui-tab-title">
                <li class="layui-icon layui-icon-home layui-this" lay-id="0">
                    <i class="layui-icon layui-hide layui-disabled layui-tab-close"></i>
                </li>
            </ul>
            <div class="layui-tab-control">
                <li class="layui-tab-prev layui-icon layui-icon-left"></li>
                <li class="layui-tab-next layui-icon layui-icon-right"></li>
                <li class="layui-tab-tool layui-icon layui-icon-down">
                    <ul class="layui-nav" lay-filter="">
                        <li class="layui-nav-item">
                            <a href="javascript:;"><i class="layui-icon layui-icon-down layui-nav-more"></i></a>
                            <dl class="layui-nav-child">
                                <dd id="closeThis"><a href="javascript:;">關 閉 當 前</a></dd>
                                <dd id="closeOther"><a href="javascript:;">關 閉 其 他</a></dd>
                                <dd id="closeAll"><a href="javascript:;">關 閉 全 部</a></dd>
                            </dl>
                        </li>
                    </ul>
                </li>
            </div>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe class="lay-iframe" lay-frameid="0" src="/admin/console" lay-iframe="true"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定區域 -->
        底部固定區域
    </div>
</div>
<script src="/static/js/layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        let element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;
        const winIndex = layer.load(2, {shade: 0, time: 10 * 1000});
        let thisIndexId = 0
        $(function () {
            $('.refresh').on('click',function (){
                const iframe = $("[lay-frameId="+thisIndexId+"]")
                //console.log(iframe);
                iframe.attr('src', iframe.attr('src'));
                const index = layer.load(2, {shade: 0, time: 10 * 1000});
                iframe.load(function () {
                    layer.close(index);
                })
            })
            $(window).load(function () {
                layer.close(winIndex)
            })
        })
        //左側欄選單新增tab視窗
        let index;//tab視窗
        element.on('nav(side-menu)', function (elem) {
            const title = elem.attr('menu-title');
            const url = elem.attr('lay-href');
            let layId = elem.attr('menuid');
            const tabElem = $("[lay-filter='content']").find("[lay-id=" + layId + "]")
            if (tabElem.length < 1) {
                if (elem.attr('lay-href')) {
                    element.tabAdd('content', {//layui 內建新增tab事件
                        title: title,
                        content: '<iframe class="lay-iframe" lay-frameId="' + layId + '" src="' + url + '"></iframe>',
                        id: layId
                    });
                }
            }
            let iframe = $("[lay-frameId=" + layId + " ]");
            //console.log(iframe)
            if (iframe.length > 0) {
                const is = iframe.attr('lay-iframe')
                if (!is) {
                    index = layer.load(2, {shade: 0, time: 8 * 1000});
                    iframe.load(function () {
                        iframe.attr("lay-iframe", true)
                        layer.close(index);
                    });
                }
            }
            //切換Tab layui內建
            element.tabChange('content', layId)
            //console.log(tabElem); //得到當前點選的DOM物件
        });
        //tab刪除監聽
        element.on('tabDelete(content)', function (data) {
            //console.log(this); //當前Tab標題所在的原始DOM元素
            console.log(data.index); //得到當前Tab的所在下標
            layer.close(index);
            const menuId = data.elem.find('[lay-id]').eq(data.index-1).attr('lay-id');
            const menu = $("[lay-filter='side-menu']");
            menu.find("[lay-href]").parent().removeClass('layui-this')
            menu.find('[menuid=' + menuId + ']').parent().addClass('layui-this');
        });
        //tab切換狀態監聽,事件目的切換tab左側欄選單高亮定位
        element.on('tab(content)', function (data) {
            console.log(data.index); //得到當前Tab的所在下標
            const menuId = data.elem.find('[lay-id]').eq(data.index).attr('lay-id');
            const menu = $("[lay-filter='side-menu']");
            menu.find("[lay-href]").parent().removeClass('layui-this')
            menu.find('[menuid=' + menuId + ']').parent().addClass('layui-this');
        });

        $("#closeThis").on('click', function () {
            close.coleThis();
        });
        $("#closeOther").on('click', function () {
            close.coleOther();
        });
        $("#closeAll").on('click', function () {
            close.coleAll();
        })
        //tab欄的右邊nav對tab的三種操作事件
        let close = {
            coleAll: function () {
                $("[lay-filter='content']").find('.layui-tab-title .layui-tab-close').trigger('click');
            },
            coleThis: function () {
                const layid = $("[lay-filter='content']").find('.layui-tab-title .layui-this').attr('lay-id')
                element.tabDelete('content', layid);
            },
            coleOther: function () {
                const el = $("[lay-filter='content']");
                const thisId = el.find('.layui-tab-title .layui-this').attr('lay-id');
                $.each(el.find('.layui-tab-title li[lay-id]'), function () {
                    let layid = $(this).attr('lay-id');
                    if (layid != thisId) {
                        element.tabDelete('content', layid);
                    }
                });
            }
        }
        $("[data-toggle='fullscreen']").on('click', function () {
            let doc = document.documentElement;
            $(document.body).addClass("full-screen");
            doc.requestFullscreen ? doc.requestFullscreen() : doc.mozRequestFullScreen ? doc.mozRequestFullScreen() : doc.webkitRequestFullscreen ? doc.webkitRequestFullscreen() : doc.msRequestFullscreen && doc.msRequestFullscreen();
        });
        util.event('lay-header-event', {// util.event 是layui內建方法，疑問看文件
            //左側選單事件
            menuLeft: function (elem) {
                //console.log(elem)
                let domSideElem = $('.layui-side');
                let domBodyElem = $('.layui-body');
                if (domSideElem.css('width') === '200px') {
                    elem.find('i').removeClass('layui-icon-shrink-right')
                    elem.find('i').addClass('layui-icon-spread-left')
                    domSideElem.addClass('layui-side-hover');
                    domSideElem.animate({ 'width': '60px' }, 300);
                    domBodyElem.animate({ left: '60px' }, 300);
                }
                else {
                    domSideElem.removeClass('layui-side-hover');
                    elem.find('i').removeClass('layui-icon-spread-left');
                    elem.find('i').addClass('layui-icon-shrink-right');
                    domSideElem.animate({ 'width': '200px' }, 300);
                    domBodyElem.animate({ left: '200px' }, 300);
                }
                //layer.msg('展開左側選單的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">處理右側面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });

    });
</script>
</body>
</html>