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

《慧正工作流系统V6界面修改指南》由会员分享，可在线阅读，更多相关《慧正工作流系统V6界面修改指南（43页珍藏版）》请在金锄头文库上搜索。

1、界面修改指南 慧正工作流系统慧正工作流系统 V6SP2 界面修改指南界面修改指南 文件状态 草稿 正式发布 正在修改 文件标识 BJHZ OA V2 1 D22 003 当前版本 1 0 作 者 于芳 发布日期 2012 9 28 审批人审批日期 贾春平2012 09 26 第 1 页 共 43 页 1 界面修改指南 目 录目 录 1 概述 2 2 界面说明 3 1 应用端图片首页 3 2 应用端传统首页 4 3 一级菜单 4 4 二级及以下菜单 5 5 视图 5 6 表单 6 3 样式文件清单 6 1 基本样式 7 2 一级菜单 7 3 二级及以下菜单 7 4 视图 7 5 表单 7 4 与

2、界面样式相关的类 8 1 菜单 8 2 视图 9 3 表单 10 1 概述概述 HZV6 0 基本支持功能与样式分离 同时支持多皮肤的设置 可以根据需要扩展多种 皮肤样式 满足应用的各种需求 其实无论是 CSS 的分离还是js 的分离 其主要作用之一就是精简与重用 2 界面修改指南 样式的独立拆分 使得各种效果可以自由组合 这是有别于一个 class 类覆盖多个 CSS 属性的做法的 样式的独立拆分 精简的 CSS 文件 每个样式的重用性可谓发挥到的 最大 同时 页面的后期维护变得异常轻松 样式冲突的可能性也是非常低的 HZV6 0 产品的皮肤相关文件统一放到 resource skins 目

3、录下 默认使用其下的 default 如果扩展其他的皮肤 需要建立与 default 同级的目录 再下级的目录仿照 default 的目录结构 建立 2 界面说明界面说明 HZV6 0的主界面主要包括登录 首页 菜单树 视图 表单界面等 下面对以上界面 进行详细说明 如果采用产品自带的样式 界面上必须还含有下面语句 1 应用端图片首页应用端图片首页 1 文件所在路径 horizon layout layout pic jsp 2 引用的样式 resource skins default css base css resource skins default css layout pic css

4、 分类标题对应样式 mainnav h2 代码测试 向左 向右按钮对应样式 span toleft span toright 向 左 向右 图标列表对应样式 分页小圆点 页脚 具体样例如下 第 3 页 共 43 页 3 界面修改指南 分类标题 xxxx 向左向右按钮 向左 向右 图标列表 bbbbb xxxx 分页圆点 第一项 第二项 页脚 2 应用端传统首页应用端传统首页 1 文件所在路径 horizon layout layout view main jsp 2 引用的样式 resource skins default css layout css 代表版式标识 例 1 2a 2b 等 4

5、 界面修改指南 整体背景 content 整个栏目框架对应样式 list 标 题 条 tit dadad 信息列表框架DIV con 具体视图样例如下 整体背景 整个栏目框架 标题条 dadad 3 一级菜单一级菜单 1 文件所在路径 管理端一级菜单 resource skins default administrator jsp 2 引用的样式 管理端一级菜单 resource skins default css head admin css 使用head admin css 的代码如下 glnav p 具体使用head admin css 代码如下 LoadFirstLevelMenu 2

6、 加载一级菜单 菜单分类 1 用户菜单 2 管理菜单 3 文件所在路径 应用端一级菜单 resource skins default operator jsp 4 引用的样式 应用端一级菜单 resource skins default css head css 第 5 页 共 43 页 5 界面修改指南 使用head css 的代码如下 headnav 具体使用head css 代码如下 LoadFirstLevelMenu 1 加载一级菜单 菜单分类 1 用户菜单 2 管理菜单 4 二级及以下菜单二级及以下菜单 1 文件所在路径 horizon formview view workview

7、 jsp 2 引用的样式 resource skins default css basenav css resource skins default css nav css 使用basenav css 的代码如下 main div class nav id submenu content 具体使用basenav css 代码如下 6 界面修改指南 5 视图视图 1 文件所在路径 horizon formview view viewtemplate view template normal jsp 2 引用的样式 resource skins default css view css 当前位置使

8、用View css 的 搜索使用View css 的 查询结果数据使用View css 的 分页使用View css 的 具体视图样例如下 当前位置以及搜索当前位置以及搜索 div style float left display 视图操作按钮静态分组视图操作按钮静态分组 查询结果数据 查询结果数据 第 7 页 共 43 页 7 界面修改指南 分页 分页 6 表单表单 1 文件所在路径 horizon formview form formtemplate form template default jsp 2 引用的样式 resource skins default css base css

9、resource skins default css form css 表单内容用form css 中的 表单按钮用form css 中的 具体表单样例如下 表单内容表单内容 域注册 域名称 表单按钮表单按钮 保存 关闭 3 样式文件清单样式文件清单 1 基本样式基本样式 文件 resource skins default css base css charset utf 8 foundation body background FFF font size 12px font family 微软雅黑 宋体 color 333333 margin 0 padding 0 position rel

10、ative div form p img ul ol li dl dl dd border 0 list style none margin 0 padding 0 text align left h1 h2 h3 h4 h5 h6 margin 0 padding 0 第 9 页 共 43 页 9 界面修改指南 font size 12px font weight 700 input select textarea font size 12px font family Arial line height 18px a color 333333 text decoration none a h

11、over color 333333 a a focus outline none 浮动 clearfix after content display block height 0 clear both visibility hidden clearfix display inline block clearfix display block fl float left fr float right clear clear both input inputtxt height 24px line height 24px border 1px solid BABABA border radius

12、3px 10 界面修改指南 2 一级菜单一级菜单 1 管理端一级菜单 文件 resource skins default css head admin css charset utf 8 CSS Document 页面顶部 header text align center 页面顶部第一层 top height 42px background url img h bg gif repeat x border bottom 1px solid 12181d 页面顶部第一层 logo 样式 h1 width 205px height 24px float left margin 8px 0 0 20

13、px display inline 页面顶部第一层 操作链接 fun btn float right height 42px line height 42px margin right 20px display inline fun btn a height 42px line height 42px color fff 欢迎访问 fun btn a name padding left 20px text decoration none fun btn a name hover color fff text decoration none 修改密码 fun btn a updatapasswo

14、rd 第 11 页 共 43 页 11 界面修改指南 background url img set gif left center no repeat margin left 10px padding left 20px 退出 fun btn a exit background url img exit bg gif left center no repeat margin left 10px padding left 20px 设计 fun btn a design background url img design png left center no repeat margin left

15、 10px padding left 20px 应用 fun btn a operator background url img operator png left center no repeat margin left 10px padding left 20px fun btn a hover color CCCCCC text decoration underline fun btn a active color FFFFFF text decoration underline 页面顶部第二层 一级菜单 glnav height 40px border bottom 5px solid

16、 1D2832 background url img glnav bg jpg repeat x position relative glnav p a display block float left width 120px height 40px line height 40px font size 14px text align center 一级菜单鼠标滑过或被选中时样式 glnav p a hover glnav a active width 118px height 38px line height 38px background url img glnav abg jpg repeat x 12 界面修改指南 color FFF border 1px solid 929AA0 glnav p a span padding left 20px 2 应用端一级菜单 文件 resource skins default css head css charset utf 8 CSS Document 页面顶部 header text align center 页面顶部第一层 top