zoukankan      html  css  js  c++  java
  • 基于layui的简易后台管理系统,后期会更新

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

    <!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/css/layui.css">
        <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="">产品</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</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"><a href="">社区</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="">控制台<span class="layui-badge">0</span></a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="">个人中心<span class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item">
                        <a href=""><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="">跳转</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">解决方案</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"><a href="">产品</a></li>
                        <li class="layui-nav-item"><a href="">大数据</a></li>
                    </ul>
                </div>
            </div>
    
            <div class="layui-body">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">
                <span class="layui-breadcrumb" lay-separator="|">
                  <a href="">娱乐</a>
                  <a href="">八卦</a>
                  <a href="">体育</a>
                  <a href="">搞笑</a>
                  <a href="">视频</a>
                  <a href="">游戏</a>
                  <a href="">综艺</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/layui.js"></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>
    

    
    

  • 相关阅读:
    【题解】【BT】【Leetcode】Populating Next Right Pointers in Each Node
    【题解】【BT】【Leetcode】Binary Tree Level Order Traversal
    【题解】【BST】【Leetcode】Unique Binary Search Trees
    【题解】【矩阵】【回溯】【Leetcode】Rotate Image
    【题解】【排列组合】【素数】【Leetcode】Unique Paths
    【题解】【矩阵】【回溯】【Leetcode】Unique Paths II
    【题解】【BST】【Leetcode】Validate Binary Search Tree
    【题解】【BST】【Leetcode】Convert Sorted Array to Binary Search Tree
    第 10 章 判断用户是否登录
    第 8 章 动态管理资源结合自定义登录页面
  • 原文地址:https://www.cnblogs.com/hanlei525/p/9613020.html
Copyright © 2011-2022 走看看