<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <link rel="stylesheet" href="static/layui/css/layui.css"> <script type="text/javascript" src="static/layui/layui.js"></script> <style type="text/css"> .header{width: 100%;height: 50px;line-height: 50px;background: #2E6DA4;color: #fff;} .title{margin-left: 20px;font-size: 20px;} .userinfo{float: right;margin-right: 10px;} .userinfo a{color:#fff;} .menu{width: 200px;background: #333744;position: absolute;} .main{position: absolute;left:200px;right: 0px;} .layui-collapse{border:none;} .layui-colla-item{border-top:none;} .layui-colla-title{background: #42485b;color: #fff;} .layui-colla-content{border-top: none;padding:0;} </style> </head> <body> <!-- header --> <div> <span>狗东商城----后台管理系统</span> <span>admin [系统管理员] <span><a href="javascript:;" onclick="logout();"> 退出 </a></span></span> </div> <!-- 菜单 --> <div id="menu"> <div> <div> <h2>管理员管理</h2> <div class="layui-colla-content layui-show"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;" onclick="menuGo(this)" src="admin.html">管理员列表</a> </li> <li> <a href="javascript:;" onclick="menuGo(this)" src="menu.html">菜单管理</a> </li> <li><a href="">产品</a></li> <li><a href="">大数据</a></li> </ul> </div> </div> <div> <h2>管理员管理</h2> <div class="layui-colla-content layui-show"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;" onclick="menuGo(this)" src="admin.html">管理员列表</a> </li> <li> <a href="javascript:;" onclick="menuGo(this)" src="menu.html">菜单管理</a> </li> <li><a href="">产品</a></li> <li><a href="">大数据</a></li> </ul> </div> </div> <div> <h2>管理员管理</h2> <div class="layui-colla-content layui-show"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;" onclick="menuGo(this)" src="admin.html">管理员列表</a> </li> <li> <a href="javascript:;" onclick="menuGo(this)" src="menu.html">菜单管理</a> </li> <li><a href="">产品</a></li> <li><a href="">大数据</a></li> </ul> </div> </div> </div> </div> <!-- 主操作页面 --> <div> <iframe src="welcome.html" style="width:100%;height:100%;" frameborder="0" scrolling="0"></iframe> </div> <script> layui.use(['element', 'layer'], function(){ var element = layui.element; layer = layui.layer; $= layui.jquery resetMenuHeight() }); function logout(){ layer.confirm('确定要退出么?', { icon:3, btn: ['确定', '取消'] //可以无限个按钮 }, function(index, layero){ //按钮【按钮一】的回调 }, function(index){ //按钮【按钮二】的回调 }); } // 重新设置菜单容器高度 function resetMenuHeight(){ var height=document.documentElement.clientHeight-50; $('#menu').height(height) } //菜单点击 function menuGo(obj){ //获取url var src=$(obj).attr('src') //改变框架内的页面地址 $('iframe').attr('src',src) } // 设置主操作页面高度 function resetMainHeight(obj){ var height = parent.document.documentElement.clientHeight-53; $(obj).parent('div').height(height) } </script> </body> </html>
觉得layui就是模块加载然后使用设置参数,根据layui设定的类名的样式走,还是挺简单的