用ifram搭建基础框架动态显示内容

金州

已于 2022-11-10 17:19:54 修改

阅读量203

点赞数

文章标签：前端 javascript css html bootstrap

于 2022-11-10 16:47:01 首次发布

本文链接：https://blog.csdn.net/RemindingMe/article/details/127791434

版权

用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;
}