基于layui的简易后台管理系统,后期会更新

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hl_qianduan/article/details/80808100

直接上代码,效果图在最下面

<!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">
    <link rel="stylesheet" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201809030202">
    <title>hl-qianduan</title>
</head>
<body>
<div class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">hl-qianduan</div>
            <!-- 头部区域(可配合layui已有的水平导航) -->
            <!--左边头部-->
            <ul class="layui-nav layui-layout-left lay-filter="
            ">
            <li class="layui-nav-item layui-this"><a href="javascript:;">产品</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>
            <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
            </ul>
            <!--右边头部-->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
                        <button data-method="notice" class="layui-btn">公告</button>
                    </div>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">控制台<span class="layui-badge">0</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img layui-anim-rotate">我</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>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;">默认展开</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">选项1</a></dd>
                            <dd><a href="javascript:;">选项2</a></dd>
                            <dd><a href="javascript:;">跳转</a></dd>
                        </dl>
                    </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>
                    <li class="layui-nav-item"><a href="javascript:;">产品</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
            <span class="layui-breadcrumb" lay-separator="|">
              <a href="javascript:;">娱乐</a>
              <a href="javascript:;">八卦</a>
              <a href="javascript:;">体育</a>
              <a href="javascript:;">搞笑</a>
              <a href="javascript:;">视频</a>
              <a href="javascript:;">游戏</a>
              <a href="javascript:;">综艺</a>
            </span>
                <br>
                <div class="layui-tab layui-tab-card"  lay-allowclose="true" >
                    <ul class="layui-tab-title">
                        <li class="layui-this">网站设置</li>
                        <li>用户基本管理</li>
                        <li>权限分配</li>
                        <li>商品管理</li>
                        <li>订单管理</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 150px;">
                        <div class="layui-tab-item layui-show">
                            1. 我个人比较喜欢卡片风格的,所以你发现又是以卡片的风格举例
                            2. 删除功能适用于所有风格
                        </div>
                        <div class="layui-tab-item">2</div>
                        <div class="layui-tab-item">3</div>
                        <div class="layui-tab-item">4</div>
                        <div class="layui-tab-item">5</div>
                        <div class="layui-tab-item">6</div>
                    </div>
                </div>

            </div>
        </div>

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

    <script src="//layui.hcwl520.com.cn/layui/layui.js?v=201809030202"></script>
    <script>
        //JavaScript代码区域
        layui.use(['element','layer'], function(){
            var element = layui.element,
                $ = layui.jquery,
                layer=layui.layer;//Tab的切换功能,切换事件监听等,需要依赖element模块

            //触发事件
            var active = {
                tabAdd: function () {
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                        , content: '内容' + (Math.random() * 1000 | 0)
                        , id: new Date().getTime() //实际使用一般是规定好的id,这里以时间戳模拟下
                    })
                }
                , tabDelete: function (othis) {
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除:“商品管理”
                    othis.addClass('layui-btn-disabled');
                }
                , tabChange: function () {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到:用户管理
                }
                , notice: function () {
                    layer.open({
                        type: 1
                        ,
                        title: false //不显示标题栏
                        ,
                        closeBtn: false
                        ,
                        area: '300px;'
                        ,
                        shade: 0.8
                        ,
                        id: 'LAY_layuipro' //设定一个id,防止重复弹出
                        ,
                        btn: ['火速围观', '残忍拒绝']
                        ,
                        btnAlign: 'c'
                        ,
                        moveType: 1 //拖拽模式,0或者1
                        ,
                        content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗?亲!<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块,由于其用户基数较大,所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块,但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
                        ,
                        success: function (layero) {
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: 'http://www.layui.com/'
                                , target: '_blank'
                            });
                        }
                    });
                }
            }

            $('.site-demo-active').on('click', function(){
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            $('#layerDemo .layui-btn').on('click', function(){
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

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

 

展开阅读全文

没有更多推荐了,返回首页