WEB界面開發規范

jopen 10年前發布 | 13K 次閱讀 開發規范 前端技術

頁面命名規則


 

 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. 對于頁面中控件的屬性設置都需要用雙引號包括起來。


控件命名規則


     頁面編碼過程中用到的所有控件命名都需要遵循相應規則,方便程序的可讀性。采用控件類型縮寫前綴(小寫)+英文單詞(第一個字母大寫)的方法來命名每一個控件。具體規則如下:

</tr>

</tbody> </table>

 


變量定義規則


       頁面編碼過程中用到的所有變量定義都需要遵循相應規則,方便程序的可讀性。采用數據類型縮寫前綴(小寫)+英文單詞(第一個字母大寫)的方法來命名每一個變量。具體規則如下:

 

控件名稱 前綴
Button btn
Form frm
Select sel
TextArea txt
Input ipt
Image img
DIV div

</tr>

</tbody> </table>



函數定義規則


頁面編碼過程中用到的所有函數定義都需要遵循相應規則,方便程序的可讀性。采用前綴(fuc)+英文單詞(第一個字母大寫)的方法來命名每一個函數。


CSS文件使用



n  頁面的規范

數據類型 前綴
整數 i
小數 f
字符 s
布爾 b
日期  d
數組 arr

</tr>

</tbody> </table>

n  表格的規范

關鍵字 說明
body 頁面內容基本樣式

</tr>

</tbody> </table>

n  層的規范

關鍵字 說明
table 表格基本樣式

</tr>

</tbody> </table>

n  鏈接的規范

關鍵字 說明
div 層基本樣式

</tr>

</tbody> </table>

n  DataGrid的規范

關鍵字 說明
a 超鏈接基本樣式

</tr>

</tbody> </table>

n  下拉表格的規范

關鍵字 說明
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 數據表的指示器樣式

</tr>

</tbody> </table>

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 下拉表格的選中行樣式

</tr>

</tbody> </table>

n  按鈕

關鍵字 說明
.editor 編輯框的基本樣式
.editor_active 激活的編輯框的基本樣式

</tr>

</tbody> </table>


n  數據導航條控件

關鍵字 說明
.button 按鈕的基本樣式
.button_down 被按下按鈕的基本樣式

</tr>

</tbody> </table>

n  樹狀列表控件

關鍵字 說明
table.datapilot 數據導航條的基本樣式

</tr>

</tbody> </table>

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 樹狀列表的圖標樣式

</tr>

</tbody> </table>

n  數據標簽控件

關鍵字 說明
.fieldlabel 字段標題的樣式

</tr>

</tbody> </table>

n  標簽頁控件

關鍵字 說明
.datalabel 數據標簽的基本樣式

</tr>

</tbody> </table>


n  菜單控件

關鍵字 說明
.tabset 標簽頁的基本樣式
.tab 標簽頁中的單個標簽的樣式

</tr>

</tbody> </table>

n  菜單工具條控件

關鍵字 說明
table.menu 菜單的基本樣式
table.menu tr 菜單行的基本樣式
table.menu tr.row_selected 菜單選中行的基本樣式
table.menu tr.row_disabled 菜單無效行的基本樣式

</tr>

</tbody> </table>

n  下拉選單的邊框控件

關鍵字 說明
table.menubar 菜單工具條的基本樣式
table.menubar .button 菜單工具條中按鈕的基本樣式
table.menubar .button_active 菜單工具條中當前按鈕的基本樣式
table.menubar .button_hot 菜單工具條相應鼠標的按鈕的基本樣式

</tr>

</tbody> </table>

n  日歷控件

關鍵字
說明
.dropdown_frame 下拉選單的邊框的樣式
關鍵字 說明
.calendar 日歷控件的基本樣式
.calendar .title 日歷控件頁眉的基本樣式
.calendar .footer 日歷控件頁腳的基本樣式
.calendar .cell_day 日歷控件日期單元格的基本樣式
.calendar .cell_selected 日歷控件當前單元格的基本樣式
.calendar .cell_trailing 日歷中前月和后月的日期單元格的基本樣式
 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!