WEB界面開(kāi)發(fā)規范
1、每個(gè)功能頁(yè)面在系統中配置菜單時(shí)統一使用index.jsp或index.html。例如客戶(hù)管理配置的URL為http://Server:Port/cc/custmgr/index.jsp。
2、每個(gè)頁(yè)面的title必須設置為和菜單配置中相同的中文,例如在菜單項中配置為“客戶(hù)管理”,則此頁(yè)面的title也要設置為“客戶(hù)管理”。
3、對于JSP頁(yè)面都需要在頁(yè)面的最開(kāi)始部分增加以下語(yǔ)句
<%@ page contentType="text/html; charset=UTF-8" %>
4、對于HTML頁(yè)面都需要在頁(yè)面的最開(kāi)始部分增加以下語(yǔ)句
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5、對于頁(yè)面中控件的屬性設置都需要用雙引號包括起來(lái)。
頁(yè)面編碼過(guò)程中用到的所有控件命名都需要遵循相應規則,方便程序的可讀性。采用控件類(lèi)型縮寫(xiě)前綴(小寫(xiě))+英文單詞(第一個(gè)字母大寫(xiě))的方法來(lái)命名每一個(gè)控件。具體規則如下:
| 控件類(lèi)型 | 前綴 |
| Button | btn |
| Form | frm |
| Select | sel |
| TextArea | txt |
| Input | ipt |
| Image | img |
| DIV | div |
頁(yè)面編碼過(guò)程中用到的所有變量定義都需要遵循相應規則,方便程序的可讀性。采用數據類(lèi)型縮寫(xiě)前綴(小寫(xiě))+英文單詞(第一個(gè)字母大寫(xiě))的方法來(lái)命名每一個(gè)變量。具體規則如下:
| 數據類(lèi)型 | 前綴 |
| 整數 | i |
| 小數 | f |
| 字符 | s |
| 布爾 | b |
| 日期 | d |
| 數組 | arr |
頁(yè)面編碼過(guò)程中用到的所有函數定義都需要遵循相應規則,方便程序的可讀性。采用前綴(fuc)+英文單詞(第一個(gè)字母大寫(xiě))的方法來(lái)命名每一個(gè)函數。
例如:fucAcceptOrder
n 頁(yè)面的規范
| 關(guān)鍵字 | 說(shuō)明 |
| body | 頁(yè)面內容基本樣式 |
n 表格的規范
| 關(guān)鍵字 | 說(shuō)明 |
| table | 表格的基本樣式 |
n 層的規范
| 關(guān)鍵字 | 說(shuō)明 |
| div | 層的基本樣式 |
n 鏈接的規范
| 關(guān)鍵字 | 說(shuō)明 |
| a | 超鏈接的基本樣式 |
n DataGrid的規范
| 關(guān)鍵字 | 說(shuō)明 |
| table.datatable | 數據表的基本樣式 |
| table.datatable thead | 數據表的頁(yè)眉樣式 |
| table.datatable tbody | 數據表的表格體樣式 |
| table.datatable tfoot | 數據表的頁(yè)腳樣式 |
| 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 下拉表格的規范
| 關(guān)鍵字 | 說(shuō)明 |
| table.dropdowntable | 下拉表格的基本樣式 |
| table.dropdowntable thead | 下拉表格的頁(yè)眉樣式 |
| table.dropdowntable tbody | 下拉表格的表格體樣式 |
| table.dropdowntable tfoot | 下拉表格的頁(yè)腳樣式 |
| table.dropdowntable tr.row_odd | 下拉表格的奇數行樣式 |
| table.dropdowntable tr.row_even | 下拉表格的偶數行樣式 |
| table.dropdowntable tr.row_selected | 下拉表格的選中行樣式 |
n 編輯框
| 關(guān)鍵字 | 說(shuō)明 |
| .editor | 編輯框的基本樣式 |
| .editor_active | 激活的編輯框的基本樣式 |
n 按鈕
| 關(guān)鍵字 | 說(shuō)明 |
| .button | 按鈕的基本樣式 |
| .button_down | 被按下按鈕的基本樣式 |
n 數據導航條控件
| 關(guān)鍵字 | 說(shuō)明 |
| table.datapilot | 數據導航條的基本樣式 |
n 樹(shù)狀列表控件
| 關(guān)鍵字 | 說(shuō)明 |
| table.tree | 樹(shù)狀列表的基本樣式 |
| table.tree tr.row_odd | 樹(shù)狀列表奇數行的基本樣式 |
| table.tree tr.row_even | 樹(shù)狀列表偶數行的基本樣式 |
| table.tree tr.row_selected | 樹(shù)狀列表當前行的基本樣式 |
| table.tree tr.row_rightclick | 樹(shù)狀列表的響應當前鼠標右擊的行基本樣式 |
| table.tree .expandbutton | 樹(shù)狀列表展開(kāi)按鈕的基本樣式 |
| table.tree .icon | 樹(shù)狀列表的圖標樣式 |
n 字段標題控件
| 關(guān)鍵字 | 說(shuō)明 |
| .fieldlabel | 字段標題的樣式 |
n 數據標簽控件
| 關(guān)鍵字 | 說(shuō)明 |
| .datalabel | 數據標簽的基本樣式 |
n 標簽頁(yè)控件
| 關(guān)鍵字 | 說(shuō)明 |
| .tabset | 標簽頁(yè)的基本樣式 |
| .tab | 標簽頁(yè)中的單個(gè)標簽的樣式 |
n 菜單控件
| 關(guān)鍵字 | 說(shuō)明 |
| table.menu | 菜單的基本樣式 |
| table.menu tr | 菜單行的基本樣式 |
| table.menu tr.row_selected | 菜單選中行的基本樣式 |
| table.menu tr.row_disabled | 菜單無(wú)效行的基本樣式 |
n 菜單工具條控件
| 關(guān)鍵字 | 說(shuō)明 |
| table.menubar | 菜單工具條的基本樣式 |
| table.menubar .button | 菜單工具條中按鈕的基本樣式 |
| table.menubar .button_active | 菜單工具條中當前按鈕的基本樣式 |
| table.menubar .button_hot | 菜單工具條相應鼠標的按鈕的基本樣式 |
n 下拉選單的邊框控件
| 關(guān)鍵字 | 說(shuō)明 |
| .dropdown_frame | 下拉選單的邊框的樣式 |
n 日歷控件
| 關(guān)鍵字 | 說(shuō)明 |
| .calendar | 日歷控件的基本樣式 |
| .calendar .title | 日歷控件頁(yè)眉的基本樣式 |
| .calendar .footer | 日歷控件頁(yè)腳的基本樣式 |
| .calendar .cell_day | 日歷控件日期單元格的基本樣式 |
| .calendar .cell_selected | 日歷控件當前單元格的基本樣式 |
| .calendar .cell_trailing | 日歷中前月和后月的日期單元格的基本樣式 |
聯(lián)系客服