手记 / 后台框架作业总结

后台框架作业总结

3天前7浏览0评论

作业总结:这次作业没什么问题,主要是练习了layui,

作业如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
         <title>后台登录</title>
        <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
        <script type="text/javascript" src="/static/layui/layui.js"></script>
        <style type="text/css">
            body{margin:0px;}
           /* .header{width:100%;height:50px;background-color:#01AAED;padding:20px;color:#ffffff;line-height:50px;}
            .title{margin-left:20px;}
            .userinfo{float:right;margin-right:20px;}*/
        .header{width: 100%;height: 50px;line-height: 50px;background: #01AAED;color:#ffffff;}
        .title{margin-left: 50px;font-size: 20px;}
        .userinfo{float: right;margin-right: 50px;}
        .userinfo a{color:#ffffff;text-decoration:none;}

        .menu{width:200px;background-color:#333744;position:absolute;}

        .layui-collapse{border: none;overflow:hidden;}
        .layui-colla-item{border-top: none;}
        .layui-colla-title{background: #42485b;color: #ffffff;}
        .layui-colla-content{border-top: none;}
        </style>
    </head>
    <body>
    <!-- 头部 -->
    <div>
        <span>后台管理系统</span>
        <span>admin【系统管理员】<a href="javascript:;" onclick="logout()">退出</a></span>
    </div>
    <!-- menu -->
    <div id="menu">
        <div lay-accordion>
            <div>
                <h2>管理员目录</h2>
                <div>
                    <ul class="layui-nav layui-nav-tree">
                        <li>
                            <a href="javascript:;">管理员列表</a>
                        </li>
                        <li>
                            <a href="javascript:;">添加管理员</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <h2>管理员目录</h2>
                <div>
                    <ul class="layui-nav layui-nav-tree">
                        <li>
                            <a href="javascript:;">管理员列表</a>
                        </li>
                        <li>
                            <a href="javascript:;">添加管理员</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <h2>管理员目录</h2>
                <div>
                    <ul class="layui-nav layui-nav-tree">
                        <li>
                            <a href="javascript:;">管理员列表</a>
                        </li>
                        <li>
                            <a href="javascript:;">添加管理员</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- main -->
    <div>
        <iframe src="" style="width: 100%;height: 100%;" frameborder="0" scrolling="0" onload="resetMainHeight(this)"></iframe>

    </div>
    </body>
</html>
<script type="text/javascript">
    layui.use(['element','layer'],function(){
            var element = layui.element;
            $ = layui.jquery;
            layer=layui.layer;

            resetMenuHeight();
    });

    // 重新设置页面高度
        function resetMenuHeight(){
            var height = document.documentElement.clientHeight - 50;
            $('#menu').height(height);
        }

        // 重新设置主操作区高度
        function resetMainHeight(obj){
            var height = parent.document.documentElement.clientHeight - 53;
            $(obj).parent('div').height(height);
        }

        //退出登录
        function logout(){
            layer.confirm('确定要删除吗',{icon:2,btn:['确定','取消']},function(){
                $.get('{:url(\'account/logout\')}',function(res){
                    if(res.data>0)
                    {
                        layer.msg(res.msg,{'icon':2})
                    }else{
                        layer.msg(res.msg,{'icon':1})
                        setTimeout(function(){
                            window.location.href="{:url('account/login')}"
                        },1000);
                    }
                },'json');
            });
        }
</script>


相关标签:HTMLJavaScriptjQuery
    0推荐

      Levin

      PHP开发工程师

      作者的热门手记

      PHP中文网

      未登录