用ifram实现一个后台管理系统的基础框架,包含顶部导航栏,左边菜单栏,右边动态显示。
1.实现效果如下图:
2.目录结构
3.index.html代码,里面有大量注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="layout-box">
<!--顶部导航栏-->
<div class="top-nav">
<div class="top-right">
<div><img src="./img/img1.png" alt="some_text"></div>
<div class="top-title">TJJ-Supervisor-GO V1.00</div>
</div>
<div class="top-tool">
<div>用户</div>
<div>登出</div>
</div>
</div>
<div class="content-box">
<!--左侧菜单栏-->
<div class="sidebar-left">
<div class="nav-name">导航</div>
<div>
<ul id="menu_ul">
<!-- 底下js实现是根据这段代码格式来进行数据处理的。 -->
<!-- <li>
<a href="./page/homePage/homePage.html" target="iframe" data-toggle="collapse"
data-target=".ok1">首页</a>
</li>
<li>
<a>程序(12)</a>
<ul>
<li><a href="./page/progPage/testA.html" target="iframe">运行中(10)</a></li>
<li><a href="./page/progPage/testB.html" target="iframe">未运行(1)</a></li>
<li><a href="./page/progPage/testC.html" target="iframe">异常</a></li>
</ul>
</li> -->
</ul>
</div>
<div class="nav-foot">
<div class="foot-name">服务器状态</div>
<div class="foot-text">cpu:5%</div>
<div class="foot-text">内存:5%</div>
<div class="foot-text">空间:5%</div>
<div style="display: flex;justify-content: flex-start;" class="foot-text">
<div class="foot-up">上传:XX Kb/s</div>
<div>下载:X Kb/s</div>
</div>
<div class="foot-text"><img src="./img/tubiao.png" alt="some_text"></div>
</div>
</div>
<!--右侧内容显示的盒子-->
<div class="content-right">
<iframe src="../html/main.html" width="100%" height="100%" name="iframe" frameborder="1"
scrolling="no"></iframe>
</div>
</div>
</div>
</body>
</html>
<script src="js/router.js"></script>
<script>
$(function() {
//目前只做了二级菜单,暂不支持三级菜单
//这段js是根据上面被注释掉的标签格式利用js各个属性填充标签的方式实现的
//createElement函数是创建标签用的
//innerHTML属性是给标签添加HTML代码片段的
//`${}`是字符串拼接的一种方式${这里放变量值}
//appendChild函数是在标签里添加子标签的
//+=的意思是求出来的值要加上自己,例如1+=2相当于1+2,这种方式比较简洁计算完就赋值给变量了,a+=1就是a=(a+1)的简洁写法。
//获取ul标签
var menu = document.getElementById("menu_ul");
for (let i = 0; i < router.length; i++) {
if (router[i].child === undefined) {
//无子级
let li = document.createElement('li'); //创建li标签
//给li标签添加a标签
li.innerHTML = `<a href="${router[i].path}" target="iframe" data-toggle="collapse" data-target=".ok${i}">${router[i].name}</a>`;
//把填好数据的li标签添加到ul标签
menu.appendChild(li);
} else {
//有子级的菜单
let li = document.createElement('li');//创建li标签
let str = "";//定义一个字符串变量用于存储二级菜单标签
let routerChild=router[i].child;//二级菜单数据
for (let i = 0; i < routerChild.length; i++) {//循环二级菜单,有多少个二级菜单就利用for循环创建多少个li标签
let li_child = document.createElement('li');//创建二级菜单的li标签
li_child.innerHTML = `<a href="${routerChild[i].path}" target="iframe">${routerChild[i].name}</a>`;//给li标签添加a标签
str+=li_child.outerHTML;//将处理好的二级菜单标签叠加起来
}
//把填好数据的二级菜单标签str添加到ul标签
li.innerHTML = `<a data-target=".ok${i}" data-toggle="collapse">${router[i].name}</a><ul class="ok${i} collapse">${str}</ul>`;
//把填好数据的li标签添加到ul标签
menu.appendChild(li);
}
}
})
</script>
菜单栏折叠效果实现:
4. router.js代码,封装了跳转路由
//定义一个数组变量用来管理菜单数据
//数组中一个对象表示一级大菜单{name:'菜单名称',path:'菜单路径',child:[{name:'子菜单名称',path:'子菜单路径',}]}
let router = [{
name: "首页",
path: "./page/homePage/homePage.html"
},
{
name: "程序",
path: "",
child: [{
name: '运行中',
path: './page/progPage/testA.html',
}, {
name: '未运行',
path: './page/progPage/testB.html',
}, {
name: '异常',
path: './page/progPage/testC.html',
}]
},
{
name: "用户",
path: "./page/homePage/homePage.html"
},
{
name: "系统",
path: "",
child: [{
name: '设置',
path: './page/progPage/testA.html',
}, {
name: '日志',
path: './page/progPage/testB.html',
}]
}
]
5.public.css代码
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
ul {
list-style-type: none
}
.layout-box {
width: 100%;
height: 100%;
}
.top-nav {
width: 100%;
height: 5%;
padding: 5px 15px;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-right {
display: flex;
align-items: center;
}
.top-title {
font-size: 24px;
font-weight: 600;
padding: 0px 20px;
}
.top-tool {
width: 5%;
display: flex;
justify-content: space-around;
}
.content-box {
width: 100%;
height: 95%;
/* border: 1px black solid; */
display: flex;
position: relative;
}
.sidebar-left {
width: 12%;
height: 100%;
background-color: white;
}
.content-right {
width: 88%;
}
.nav-name {
border-top: 1px black solid;
border-bottom: 1px black solid;
/* padding: 0px 0px 0px 10px; */
}
.nav-foot {
width: 12%;
position: absolute;
bottom: 0;
}
.foot-name {
border-top: 1px black solid;
border-bottom: 1px black solid;
/* padding: 0px 0px 0px 10px; */
}
.foot-text{
margin: 5px;
}
.foot-up{
margin: 0px 5px 0px 0px;
}