隨筆-16  評論-9  文章-0  trackbacks-0
          WEB界面開發規范(轉)

          頁面設計規則

          頁面命名規則

          1、每個功能頁面在系統中配置菜單時統一使用index.jspindex.html。例如客戶管理配置的URLhttp://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

          樹狀列表展開按鈕的基本樣式

          table.tree .icon

          樹狀列表的圖標樣式

          • 字段標題控件

          關鍵字

          說明

          .fieldlabel

          字段標題的樣式

          • 數據標簽控件

          關鍵字

          說明

          .datalabel

          數據標簽的基本樣式

          • 標簽頁控件

          關鍵字

          說明

          .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

          日歷中前月和后月的日期單元格的基本樣式



          posted on 2007-11-04 20:31 forker 閱讀(1161) 評論(0)  編輯  收藏 所屬分類: web javascript

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 泾阳县| 宁阳县| 九龙坡区| 当涂县| 冷水江市| 新闻| 新邵县| 都安| 芷江| 石柱| 桐梓县| 祁阳县| 东台市| 长治市| 泽普县| 信阳市| 阿城市| 若尔盖县| 彰化县| 西峡县| 荃湾区| 佳木斯市| 西贡区| 延寿县| 沙坪坝区| 新源县| 清原| 太原市| 洛阳市| 舞钢市| 开封县| 寿宁县| 晋江市| 蒙城县| 嘉祥县| 明光市| 巴彦淖尔市| 溧水县| 伽师县| 南昌市| 卓尼县|