WEB界面开发规范(转)

页面设计规则

页面命名规则

1、每个功能页面在系统中配置菜单时统一使用index.jsp或index.html。例如客户管理配置的URL为http://Server:Port/cc/custmgr/index.jsp。

2、每个页面的title必须设置为和菜单配置中相同的中文，例如在菜单项中配置为“客户管理”，则此页面的title也要设置为“客户管理”。

3、对于JSP页面都需要在页面的最开始部分增加以下语句

<%@ page contentType="text/html; charset=UTF-8" %>

4、对于HTML页面都需要在页面的最开始部分增加以下语句

<meta http-equiv="Content-Language" content="zh-cn">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

5、对于页面中控件的属性设置都需要用双引号包括起来。

控件命名规则

页面编码过程中用到的所有控件命名都需要遵循相应规则，方便程序的可读性。采用控件类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个控件。具体规则如下：

控件类型	前缀
Button	btn
Form	frm
Select	sel
TextArea	txt
Input	ipt
Image	img
DIV	div

变量定义规则

页面编码过程中用到的所有变量定义都需要遵循相应规则，方便程序的可读性。采用数据类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个变量。具体规则如下：

 

数据类型	前缀
整数	i
小数	f
字符	s
布尔	b
日期	d
数组	arr

 

函数定义规则

页面编码过程中用到的所有函数定义都需要遵循相应规则，方便程序的可读性。采用前缀（fuc）+英文单词（第一个字母大写）的方法来命名每一个函数。

例如：fucAcceptOrder

 

CSS文件使用

• 页面的规范

关键字	说明
body	页面内容基本样式

• 表格的规范

关键字	说明
table	表格的基本样式

• 层的规范

 

关键字	说明
div	层的基本样式

• 链接的规范

 

关键字	说明
a	超链接的基本样式

 

• DataGrid的规范

关键字	说明
table.datatable	数据表的基本样式
table.datatable thead	数据表的页眉样式
table.datatable tbody	数据表的表格体样式
table.datatable tfoot	数据表的页脚样式
table.datatable tr.row_odd	数据表的奇数行样式
table.datatable tr.row_even	数据表的偶数样式
table.datatable tr.row_selected	数据表的选中行样式
table.datatable tr.row_active	数据表的当前激活表格的选中行样式
table.datatable td.indicate	数据表的指示器样式

• 下拉表格的规范

关键字	说明
table.dropdowntable	下拉表格的基本样式
table.dropdowntable thead	下拉表格的页眉样式
table.dropdowntable tbody	下拉表格的表格体样式
table.dropdowntable tfoot	下拉表格的页脚样式
table.dropdowntable tr.row_odd	下拉表格的奇数行样式
table.dropdowntable tr.row_even	下拉表格的偶数行样式
table.dropdowntable tr.row_selected	下拉表格的选中行样式

• 编辑框

 

关键字	说明
.editor	编辑框的基本样式
.editor_active	激活的编辑框的基本样式

• 按钮

关键字	说明
.button	按钮的基本样式
.button_down	被按下按钮的基本样式

• 数据导航条控件

关键字	说明
table.datapilot	数据导航条的基本样式

• 树状列表控件

关键字	说明
table.tree	树状列表的基本样式
table.tree tr.row_odd	树状列表奇数行的基本样式
table.tree tr.row_even	树状列表偶数行的基本样式
table.tree tr.row_selected	树状列表当前行的基本样式
table.tree tr.row_rightclick	树状列表的响应当前鼠标右击的行基本样式
table.tree .expandbutton	树状列表展开按钮的基本样式
table.tree .icon	树状列表的图标样式

• 字段标题控件

关键字	说明
.fieldlabel	字段标题的样式

• 数据标签控件

关键字	说明
.datalabel	数据标签的基本样式

• 标签页控件

关键字	说明
.tabset	标签页的基本样式
.tab	标签页中的单个标签的样式

• 菜单控件

关键字	说明
table.menu	菜单的基本样式
table.menu tr	菜单行的基本样式
table.menu tr.row_selected	菜单选中行的基本样式
table.menu tr.row_disabled	菜单无效行的基本样式

 

• 菜单工具条控件

关键字	说明
table.menubar	菜单工具条的基本样式
table.menubar .button	菜单工具条中按钮的基本样式
table.menubar .button_active	菜单工具条中当前按钮的基本样式
table.menubar .button_hot	菜单工具条相应鼠标的按钮的基本样式

• 下拉选单的边框控件

关键字	说明
.dropdown_frame	下拉选单的边框的样式

• 日历控件

关键字	说明
.calendar	日历控件的基本样式
.calendar .title	日历控件页眉的基本样式
.calendar .footer	日历控件页脚的基本样式
.calendar .cell_day	日历控件日期单元格的基本样式
.calendar .cell_selected	日历控件当前单元格的基本样式
.calendar .cell_trailing	日历中前月和后月的日期单元格的基本样式

<!--EndFragment-->