EasyUI+JavaWeb奖助学金管理系统[7]-EasyUI经典后台管理系统布局实现

1. 本章任务

之前已实现登录后进入main.html页面功能,本篇来实现后台管理页面布局。

主要包括:上方标题栏,下方版权栏,左侧菜单栏,右侧点击菜单后对应的内容区域。

2. 引入EasyUI

新建main.html然后引入EasyUI。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>布局和标签页</title>
	<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">

</body>
</html>

注意body使用了easyui-layout样式,所以该页面遵循easyui的布局规范。

3. 顶部标题栏

新增顶部标题栏

	<div data-options="region:'north',border:false"
		style="height: 48px; line-height: 48px; padding-left: 24px; font-size: 1.3em; background: #C3E7F3;">
		汉东大学奖助学金管理系统
	</div>

注意region:'north'将标题栏固定到了顶部,汉东大学是虚构的,此处使用了《人民的名义》中的大学名称,仅仅是为了有趣。

4. 左侧导航栏

新增左侧导航栏

	<div data-options="region:'west',split:true,title:'导航栏'" style="width: 150px; padding: 10px;">
		<ul>
			<li><a href="http://www.qq.com" target="main-frame">腾讯</a></li>
			<li><a href="http://www.baidu.com" target="main-frame">百度</a></li>
		</ul>
	</div>

注意region:'west'将导航栏固定到了左侧。然后此处添加了两个菜单用于演示,后续真实环境下应该从数据库中加载角色对应菜单显示。

注意点击<a>标签后,target="main-frame"表明指向的网页显示到main-frame中。

5. 右侧内容栏

代码如下:

	<div data-options="region:'center',title:'内容栏'">
		<iframe name="main-frame" style="width: 100%; height: 100%;"></iframe>
	</div>

注意内容栏使用了iframe,且名称为main-frame,所以点击左侧导航栏菜单后,对应页面的内容就显示到该区域内。

6. 底部版权栏

这个比较简单

	<div data-options="region:'south',border:false"
		style="height: 24px; line-height: 24px; background: #F0F0F0; text-align: center;">
		版权所有 熊猫大哥大宇宙股份无限公司
	</div>

7. 效果

效果很好,大功告成哈。

在这里插入图片描述


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页