界面开发规范.docVIP

WEB界面开发规范 页面设计规则 页面命名规则 1、每个功能页面在系统中配置菜单时统一使用index.jsp或index.html。例如客户管理配置的URL为 HYPERLINK http://Server:Port/cc/custmgr/index.jsp 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 树状列表展开按钮的基本样式 tabl