项目第二天(运行监控)
1:项目页面登录框架
(1)index.jsp
转发到指定包下的页面
<jsp:forward page="/WEB-INF/page/menu/index.jsp"/>
(2)menu/index.jsp
提供用户名和密码的登录页面
(3)menu/home.jsp
学会使用框架和完成页面的布局。
标题是menu/title.jsp
左侧菜单是menu/left.jsp
frame框架改变是menu/change.jsp
显示的功能页面时menu/loading.jsp
<FRAMESET border=0 frameSpacing=0 rows=82,* frameBorder=0 id="mainparent">
<FRAME name=topFrame src="${pageContext.request.contextPath }/menu/title.jsp" noResize scrolling=no>
<FRAMESET id="main" border="0" frameSpacing="0" frameBorder="0" cols="153,1%,*">
<FRAME name="leftFrame" src="${pageContext.request.contextPath }/menu/left.jsp" noResize>
<frame name="changeButton" src="${pageContext.request.contextPath }/menu/change.jsp" frameBorder=0 marginHeight=0 marginWidth=0 scrolling=no noresize>
<FRAME name="mainFrame" src="${pageContext.request.contextPath }/menu/loading.jsp" >
</FRAMESET>
</FRAMESET>
这里home.jsp和title.jsp,left.jsp,change.jsp,loading.jsp是父子关系。
(4)menu/title.jsp
显示的上方的标题(包括显示日期,当前操作人,功能包括返回首页,重新登录)
(5)menu/left.jsp
显示左侧的功能菜单:
即页面显示:
在这里,我们使用jquery的ztree插件,使用ztree加载的步骤:
第一步:在left.jsp中添加:
<script language="JavaScript" src="${pageContext.request.contextPath }/script/jquery-1.4.2.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath }/script/jquery-ztree-2.5.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath }/script/menuData.js"></script>
<script language="JavaScript" src="${pageContext.request.contextPath }/script/tree.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/menu.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/zTreeStyle/zTreeStyle.css" type="text/css">
添加:
<TABLE border=0 width="20">
<TR>
<TD width=340px align=center valign=top>
<div class="zTreeDemoBackground">
<ul id="menuTree" class="tree" ></ul>
</div>
</TD>
</TR>
</TABLE>
其中ul表示组件,ztree加载后的树型菜单就是放置在该ul的定义的组件中,其中ul要指定id的属性。
第二步:tree.js中的配置
var menu = {
setting: {
isSimpleData: true,
treeNodeKey: "mid",
treeNodeParentKey: "pid",
showLine: true,
root: {
isRoot: true,
nodes: []
}
},
loadMenuTree: