使用Layui搭建后台管理界面

来源：互联网发布：java log日志级别编辑：程序博客网时间：2024/05/16 17:26

Layui是一个样式比较丰富艳丽的UI框架，通过自学了相关api文档，自己手工搭建了一个后台管理页面。页面布局是常用的一套，上面是一个logo，左边区域是一个导航，中间是内容tab页，底部是版权信息，好了，看代码吧！

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>黄宝康个人搭建的后台管理页面</title>    <link rel="stylesheet" href="css/layui.css">    <script src="layui.js"></script></head><body>    <div class="layui-layout-admin">        <!--头部-->        <div class="layui-header">            <div class="layui-logo">Huang BaoKang</div>            <ul class="layui-nav layui-layout-left">                <li class="layui-nav-item"><a href="javascript:void(0)">控制台</a></li>                <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>                <li class="layui-nav-item">                    <a href="javascript:;">其他系统</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>            </ul>            <ul class="layui-nav layui-layout-right">                <li class="layui-nav-item">                    <a href=""><img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img">Huang BaoKang</a>                    <dl class="layui-nav-child">                        <dd><a href="">基本资料</a></dd>                        <dd><a href="">安全设置</a></dd>                    </dl>                </li>            </ul>        </div>        <!--左侧-->        <div class="layui-side layui-bg-black">            <div class="layui-side-scroll">                <ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">                    <li class="layui-nav-item">                        <a href="javascript:;">基本元素</a>                        <dl class="layui-nav-child">                            <dd lay-id="111"><a href="javascript:;" data-options="{url:'test.html',title:'表格'}">表格</a></dd>                            <dd><a href="">表单</a></dd>                            <dd><a href="">导航栏</a></dd>                        </dl>                    </li>                    <li class="layui-nav-item layui-nav-itemed">                        <a href="">组件</a>                        <dl class="layui-nav-child">                            <dd><a href="">Navbar</a></dd>                            <dd><a href="">Tab</a></dd>                            <dd><a href="">OneLevel</a></dd>                            <dd><a href="">app.js主入口</a></dd>                        </dl>                    </li>                    <li class="layui-nav-item">                        <a href="">表格</a>                    </li>                    <li class="layui-nav-item">                        <a href="">表单</a>                    </li>                </ul>            </div>        </div>        <!--中间主体-->        <div class="layui-body" id="container">            <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">                <ul class="layui-tab-title">                    <li class="layui-this">首页</li>                </ul>                <div class="layui-tab-content">                    <div class="layui-tab-item layui-show">首页内容</div>                </div>            </div>        </div>        <!--底部-->        <div class="layui-footer">            <center>黄宝康版权所有&copy;Tel:18679758769</center>        </div>    </div><script>    //JavaScript代码区域    layui.use('element', function(){        var element = layui.element;        element.on('nav(hbkNavbar)',function(elem){            /*使用DOM操作获取超链接的自定义data属性值*/            var options = eval('('+elem.context.children[0].dataset.options+')');            var url = options.url;            var title = options.title;            element.tabAdd('tabs',{                title : title,                content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>',                id : '111'            });        });        /*使用下面的方式需要引用jquery*/       /* $('.layui-nav-child a').click(function () {            var options = eval('('+$(this).data('options')+')');            var url = options.url;            var title = options.title;            element.tabAdd('tabs',{                title : title,                content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>'            });        });*/    });</script></body></html>

代码布局都加入了相关注释，很好理解，需要说明的是，中间增加Tab使用DOM元素获取a标签的data属性，tab页内容主体采用的iframe，真正项目应用中，只需要关注url，比如常用的后台框架Jfinal，只需要render下即可。

页面效果如下：（截图时缩放了浏览器），项目只引入了layui的css和js，没有第三方的，小伙伴们，可以参考哦，觉得不错，记得点赞哦^-^

这里写图片描述

阅读全文

1 0