07慧正工作流系统V6界面修改指南

界面修改指南慧正工作流系统V6SP2界面修改指南文件状态：[]草稿[√]正式发布[]正在修改文件标识：BJHZ_OA-V2.1_D22_003当前版本：1.0作者：于芳发布日期：2012-9-28审批人审批日期贾春平2012-09-26第1页共43页1界面修改指南目录1、概述...............................................................................................................................................22、界面说明.......................................................................................................................................31.应用端图片首页......................................................................................................................32.应用端传统首页......................................................................................................................43.一级菜单..................................................................................................................................44.二级及以下菜单......................................................................................................................55.视图..........................................................................................................................................56.表单..........................................................................................................................................63、样式文件清单...............................................................................................................................61.基本样式..................................................................................................................................72.一级菜单..................................................................................................................................73.二级及以下菜单......................................................................................................................74.视图..........................................................................................................................................75.表单..........................................................................................................................................74、与界面样式相关的类...................................................................................................................81.菜单..........................................................................................................................................82.视图..........................................................................................................................................93.表单........................................................................................................................................101、概述HZV6.0基本支持功能与样式分离，同时支持多皮肤的设置，可以根据需要扩展多种皮肤样式，满足应用的各种需求。其实无论是CSS的分离还是js的分离，其主要作用之一就是精简与重用。2界面修改指南样式的独立拆分，使得各种效果可以自由组合，这是有别于一个class类覆盖多个CSS属性的做法的。样式的独立拆分，精简的CSS文件，每个样式的重用性可谓发挥到的最大，同时，页面的后期维护变得异常轻松，样式冲突的可能性也是非常低的。HZV6.0产品的皮肤相关文件统一放到resource\skins目录下,默认使用其下的default,如果扩展其他的皮肤,需要建立与default同级的目录,再下级的目录仿照default的目录结构建立。2、界面说明HZV6.0的主界面主要包括登录、首页、菜单树、视图、表单界面等，下面对以上界面进行详细说明。如果采用产品自带的样式，界面上必须还含有下面语句：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=应用端图片首页(1)文件所在路径：/horizon/layout/layout.pic.jsp(2)引用的样式：resource\skins\default\css\base.cssresource\skins\default\css\layout-pic.css分类标题对应样式.mainnavh2代码divclass=mainnavh2title=测试测试/h2向左、向右按钮对应样式：span.toleft,span.torightspanclass=toleftonclick=moveToLeft('HZ2881e739955427013995566b380002');向左/spanspanclass=torightonclick=moveToRight('HZ2881e739955427013995566b380002');向右/span图标列表对应样式divclass=ulwrapulid=HZ2881e739955427013995566b380002Li分页小圆点：ulclass=maintab/ul页脚：divid=footerstyle=position:absolute;bottom:0px;text-align:center;width:100%;left:0px;text-align:center;ulclass=footid=picFooter/ul/div具体样例如下：divid=contentdivid=middledivid=maindivid=page0style=第3页共43页3界面修改指南//分类标题divclass=mainnavh2title=xxxxxxxxxxx/h2divclass=navcon//向左向右按钮spanclass=toleftonclick=moveToLeft('HZ2881e739955427013995566b380002');向左/spanspanclass=torightonclick=moveToRight('HZ2881e739955427013995566b380002');向右/spaninputid=HZ2881e739955427013995566b380002_totletype=hiddenvalue=1//图标列表divclass=ulwrapulid=HZ2881e739955427013995566b380002Liahref=/hz6/bbbbbbbtarget=_blankimgsrc=/hz6/resource/skins/default/css/img/navigation/icon05.pngtitle=spanbbbbb/span/a/LiLiahref=/hz6/xxxxxxtarget=_blankimgsrc=/hz6/resource/skins/default/css/img/navigation/icon05.pngtitle=spanxxxx/span/a/Li/div/div!--navconEND--divclass=clear/div/div!--mainnavend--/div/div!--mainend--//分页圆点ulclass=maintabliclass=activeonclick=changePage(this,0);span第一项/span/lilionclick=changePage(this,1);span第二项/span/li/ul/div//页脚divid=footerstyle=position:absolute;bottom:0px;text-align:center;width:100%;left:0px;text-align:center;ulclass=footid=picFooter/ul/div/div/body/html2.应用端传统首页(1)文件所在路径：/horizon/layout/layout.view.main.jsp(2)引用的样式：resource\skin