电力项目五--主界面分析
项目页面登录框架
(1)index.jsp
转发到指定包下的页面
<jsp:forward page="/WEB-INF/page/menu/index.jsp"/>
(2)menu/index.jsp
提供用户名和密码的登录页面
(3)menu/home.jsp
学会使用框架<FrameSet>和<frame>完成页面的布局。
标题是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">
通过class="tree" 来找tree.js,在tree.js中:
var menu = { setting: { isSimpleData: true, treeNodeKey: "mid", treeNodeParentKey: "pid", showLine: true, root: { isRoot: true, nodes: [] } }, loadMenuTree:function(){ $("#menuTree").zTree(menu.setting, privilegeDate); } }; $().ready(function(){ menu.loadMenuTree(); });
其中zTree(menu.setting,privilegeDate) 中,menu.setting对应的是该函数上边的setting,privilegeDate对应的是menuDate.js中的privilegeDate
var privilegeDate = [{ mid: 'aa', pid: '0', isParent: true, icon:'../images/MenuIcon/jishusheshiweihuguanli.gif', //open:true, name: '技术设施维护管理', nodes:[ { mid:'ab', pid:'aa', isParent:false, target:'mainFrame', url:'../equapment/equapmentIndex.jsp', icon:'../images/MenuIcon/yiqishebeiguanli.gif', name:'仪器设备管理' },{ mid:'ac', pid:'aa', isParent:false, target:'mainFrame', url:'../equapment/adjustIndex.jsp', icon:'../images/MenuIcon/shebeijiaozhunjianxiu.gif', name:'设备校准检修' },{ mid:'ad', pid:'aa', isParent:false, target:'mainFrame', url:'../equapment/planIndex.jsp', icon:'../images/MenuIcon/shebeigouzhijihua.gif', name:'设备购置计划' } ] }, { mid: 'ae', pid: '0', name: '技术资料图纸管理', icon:'../images/MenuIcon/jishuziliaotuzhiguanli.gif', isParent: true, nodes:[ { mid:'af', pid:'ae', isParent:false, icon:'../images/MenuIcon/ziliaotuzhiguanli.gif', target:'mainFrame', url:'../dataChart/dataChartIndex.jsp', name:'资料图纸管理' } ] }, { mid: 'ag', pid: '0', name: '站点设备运行管理', icon:'../images/MenuIcon/zhuandianshebeiyunxingguanli.gif', isParent: true, nodes:[ { mid:'ah', pid:'ag', isParent: false, icon:'../images/MenuIcon/zhandianjibenxinxi.gif', target:'mainFrame', url:'../siteEquapment/siteInfoIndex.jsp', name:'站点基本信息' },{ mid:'ai', pid:'ag', isParent: false, icon:'../images/MenuIcon/yunxingqingkuang.gif', target:'mainFrame', url:'../siteEquapment/siteRunIndex.jsp', name:'运行情况' },{ mid:'aj', pid:'ag', isParent: false, icon:'../images/MenuIcon/weihuqingkuang.gif', target:'mainFrame', url:'../siteEquapment/siteMaintainIndex.jsp', name:'维护情况' } ] }, { mid: 'ak', pid: '0', name: '监测台建筑管理', icon:'../images/MenuIcon/jiancetaijianzhuguanli.gif', isParent: true, nodes:[ { mid:'al', pid:'ak', isParent: false, icon:'../images/MenuIcon/jiancetaijianzhu.gif', target:'mainFrame', url:'../building/buildingIndex.jsp', name:'检测台建筑管理' } ] }, { mid: 'am', pid: '0', name: '系统管理', icon:'../images/MenuIcon/xitongguanli.gif', isParent: true, nodes:[ { mid:'an', pid:'am', name:'用户管理', icon:'../images/MenuIcon/yonghuguanli.gif', target:'mainFrame', url:'../system/userIndex.jsp', isParent:false },{ mid:'ao', pid:'am', name:'角色管理', icon:'../images/MenuIcon/jueseguanli.gif', target:'mainFrame', url:'../system/roleIndex.jsp', isParent:false },{ mid:'ap', pid:'am', name:'运行监控', icon:'../images/MenuIcon/daibanshiyi.gif', target:'mainFrame', url:'../system/actingIndex.jsp', isParent:false },{ mid:'aq', pid:'am', name:'数据字典维护', icon:'../images/MenuIcon/shujuzidianguanli.gif', target:'mainFrame', url:'../system/dictionaryIndex.jsp', isParent:false } ] }, { mid: 'ar', pid: '0', name: '审批流转', icon:'../images/MenuIcon/shenpiliuzhuanguanli.gif', isParent: true, nodes:[ { mid:'as', pid:'ar', name:'审批流程管理', target:'mainFrame', icon:'../images/MenuIcon/shenpiliuchengguanli.gif', url:'../workflow/processDefinitionList.jsp', isParent:false },{ mid:'at', pid:'ar', name:'申请模板管理', target:'mainFrame', url:'../workflow/applicationTemplateList.jsp', icon:'../images/MenuIcon/shenqingmobanguanli.gif', isParent:false },{ mid:'au', pid:'ar', name:'起草申请', target:'mainFrame', url:'../workflow/flowTemplateList.jsp', icon:'../images/MenuIcon/qicaoshenqing.gif', isParent:false },{ mid:'av', pid:'ar', name:'待我审批', target:'mainFrame', url:'../workflow/flowMyTaskList.jsp', icon:'../images/MenuIcon/daiwoshenpi.gif', isParent:false },{ mid:'aw', pid:'ar', name:'我的申请查询', target:'mainFrame', url:'../workflow/flowMyApplicationList.jsp', icon:'../images/MenuIcon/wodeshenqingchaxun.gif', isParent:false } ] }];
该方法用来分级显示内容。
(6)在home.jsp的组成中,change.jsp用来收缩左边框
<table width=1 style="cursor: hand" height="100%" background="" cellspacing="0" cellpadding="0" > <tr><td onclick="shiftwindow()" title="全屏/半屏" background="" width="20"> <p align="center"> <img id="image" src="${pageContext.request.contextPath }/images/zuo.gif" width="9" height="79" > </p> </td></tr> </table>
点击按钮:后,出发shiftwindow()函数
<script language="javascript"> function shiftwindow() { if(parent.document.getElementById("main").cols=="153,1%,*") { parent.document.getElementById("main").cols='0,1%,99%'; document.all.image.src="${pageContext.request.contextPath }/images/you.gif"; } else if(parent.document.getElementById("main").cols=="0,1%,99%") { parent.document.getElementById("main").cols='153,1%,*'; document.all.image.src="${pageContext.request.contextPath }/images/zuo.gif"; } } </script>
其中,parent是指home.jsp页面中的对象
<FRAMESET id="main" border="0" frameSpacing="0" frameBorder="0" cols="153,1%,*"> <FRAME name="leftFrame" src="${pageContext.request.contextPath }/system/elecMenuAction_left.do" noResize> <frame name="changeButton" src="${pageContext.request.contextPath }/system/elecMenuAction_change.do" frameBorder=0 marginHeight=0 marginWidth=0 scrolling=no noresize> <FRAME name="mainFrame" src="${pageContext.request.contextPath }/system/elecMenuAction_loading.do" > </FRAMESET>
主界面设计完成