使用Layui搭建后台管理界面

发布时间:2018年08月25日 阅读:546 次

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>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116

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

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

这里写图片描述


Tag:
相关文章

发表评论: