页面命名规则
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文件使用
关键字 | 说明 |
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 | 树状列表的图标样式 |
关键字 | 说明 |
.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 | 日历中前月和后月的日期单元格的基本样式 |