页面设计规则
页面命名规则
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-->