LAYUI框架作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css">
<script type="text/javascript" src="../static/plugins/layui/layui.js"></script>
<style type="text/css">
.header{background:#2e6da4;height:60px;width: 100%;}
.use-hl{color:#fff;height:60px;line-height:60px;font-size:20px;padding-left:20px;float:left;}
.use-hr{float:right;padding-right:20px;}
.use-hrl{float:left;color:#fff;height:60px;line-height:60px;font-size:16px;}
.left{width: 200px;background: #333744;position: absolute;}
.layui-collapse,.layui-colla-item,.layui-colla-title,.layui-colla-content{border: none;}
.layui-colla-title{background: #42485b;color: #fff;}
.layui-colla-content{color: #fff;}
.right{position: absolute;left: 200px;right: 0px;}
</style>
</head>
<body>
<div class="header">
<div class="use-hl">JD商城--后台管理系统</div>
<div class="use-hr">
<div class="use-hrl">admin</div>
<div class="use-hrl">【</div>
<div class="use-hrl">系统管理员</div>
<div class="use-hrl">】</div>
<a href="" class="use-hrl" onclick="looo()">退出</a>
</div>
</div>
<div class="left">
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">管理员管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" onclick="htmlgo('adminzy.html')" >管理员列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">权限管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" onclick="htmlgo('menumangezy.html')">菜单管理</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>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">系统设置</a>
<dl class="layui-nav-child">
<dd><a href="">网站管理</a></dd>
</dl>
</li>
</ul>
</div>
<div class='right'>
<iframe src="welcome.html" style="width: 100%;height: 100%;" frameborder="0" scrolling="no" ></iframe>
</div>
<script>
layui.use(['layer','element'], function(){
var layer = layui.layer;
var element = layui.element;
});
function looo(){
layer.confirm('确定要退出么？', {
time: 5000,
icon:3,
btn: ['确定', '取消'] //可以无限个按钮
}, function(index, layero){
console.log('2')
}, function(index){
console.log('1')
});
}
function mh() {
var hhh=document.documentElement.clientHeight;
document.getElementsByClassName("left")[0].style.height=hhh-60+"px";
document.getElementsByClassName("right")[0].style.height=hhh-64+"px";
}
window.onresize = function (){
mh()
}
window.onload=function(){
mh()
}
// function mfh()(
// var hhh=document.documentElement.clientHeight;
// console.log(hhh)
// console.log(document.documentElement.clientWidth)
// document.getElementsByClassName("left")[0].style.height=hhh-60+"px";
// )
function htmlgo(link){
document.getElementsByTagName('iframe')[0].src=link
}
</script>
</body>
</html>