WEB界面开发规范
jopen
10年前
页面命名规则
1. 每个功能页面在系统中配置菜单时统一使用index.jsp或index.html
2. 每个页面的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）+英文单词（第一个字母大写）的方法来命名每一个函数。
CSS文件使用
n 页面的规范
| 关键字 | 说明 |
| body | 页面内容基本样式 |
n 表格的规范
| 关键字 | 说明 |
| table | 表格基本样式 |
n 层的规范
| 关键字 | 说明 |
| div | 层基本样式 |
n 链接的规范
| 关键字 | 说明 |
| a | 超链接基本样式 |
n 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 | 数据表的指示器样式 |
n 下拉表格的规范
| 关键字 | 说明 |
| 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 | 下拉表格的选中行样式 |
n 编辑框
| 关键字 | 说明 |
| .editor | 编辑框的基本样式 |
| .editor_active | 激活的编辑框的基本样式 |
n 按钮
| 关键字 | 说明 |
| .button | 按钮的基本样式 |
| .button_down | 被按下按钮的基本样式 |
n 数据导航条控件
| 关键字 | 说明 |
| table.datapilot | 数据导航条的基本样式 |
n 树状列表控件
| 关键字 | 说明 |
| 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 | 树状列表的图标样式 |
n 字段标题控件
| 关键字 | 说明 |
| .fieldlabel | 字段标题的样式 |
n 数据标签控件
| 关键字 | 说明 |
| .datalabel | 数据标签的基本样式 |
n 标签页控件
| 关键字 | 说明 |
| .tabset | 标签页的基本样式 |
| .tab | 标签页中的单个标签的样式 |
n 菜单控件
| 关键字 | 说明 |
| table.menu | 菜单的基本样式 |
| table.menu tr | 菜单行的基本样式 |
| table.menu tr.row_selected | 菜单选中行的基本样式 |
| table.menu tr.row_disabled | 菜单无效行的基本样式 |
n 菜单工具条控件
| 关键字 | 说明 |
| table.menubar | 菜单工具条的基本样式 |
| table.menubar .button | 菜单工具条中按钮的基本样式 |
| table.menubar .button_active | 菜单工具条中当前按钮的基本样式 |
| table.menubar .button_hot | 菜单工具条相应鼠标的按钮的基本样式 |
n 下拉选单的边框控件
| 关键字 | 说明 |
| .dropdown_frame | 下拉选单的边框的样式 |
n 日历控件
| 关键字 | 说明 |
| .calendar | 日历控件的基本样式 |
| .calendar .title | 日历控件页眉的基本样式 |
| .calendar .footer | 日历控件页脚的基本样式 |
| .calendar .cell_day | 日历控件日期单元格的基本样式 |
| .calendar .cell_selected | 日历控件当前单元格的基本样式 |
| .calendar .cell_trailing | 日历中前月和后月的日期单元格的基本样式 |