《管理信息化绘制规范》由会员分享，可在线阅读，更多相关《管理信息化绘制规范（37页珍藏版）》请在金锄头文库上搜索。
1、SD_UI绘制规范v1.0C&D ERP ImplementationProjectSD-UI繪製規範_v1.0.4Prepared by： LION TECHOLOGY CO.,LTD.Created Date：2010/02/22SD-UI繪製規範SignatureCompanys NameNameSignatureDate版本修訂記錄版本修訂日期頁數修訂者修訂說明1.0.02010/02/22Uni初版。1.2.12010/4/1Janny依據ProtoType調整。加入頁面風格部份1.0.22010/4/21Janny1. 加入頁面寬度標準設定2. 加入應用MasterPage3. 文
2、件應用調整4. CSS套用規範調整1.0.32010/4/23HellenCSS套用規範補充1.0.42010/4/30Janny加入程式引用Css說明1.0.52010/5/5Hellen將提示資訊對應css樣式引用刪除1.0.62010/5/6Janny加入畫面呈現模式1.0.72010/5/6Hellen新增、查看按鈕統一使用linkbutton。1.0.82010/5/11Janny增加分頁模式1.0.92010/5/13Janny依UI呈現模式會議結論調整GridView顯示方式1.0.102010/5/17Janny根據SA決議調整DevExpress Grid中，”查看、新增”等
3、文字統一調整成顯示和不顯示的模式1.0.112010/5/17Hellen增加開啟表單大小設定說明1.0.122010/5/25Janny增加隱藏欄位說明增加標籤樣式1.0.132010/5/27Hellen調整維護區dropdownlist的預設值1.0.142010/6/7Hellen刪除開啟表單大小設定說明1.0.152010/7/23Hellen查詢功能區塊規範調整1.0.162010/9/3Lucifer規範統一重新調整1.0.172010/9/21Hellen根據雄獅提供的CND-ERP_Prototype 樣式規格書 v 2.1.doc同步更新此文件1.0.182010/9/25
4、Hellen根據雄獅提供的CND-ERP_Prototype 樣式規格書 v 2.1.doc同步更新此文件主要調整: 國家、省州郡、城市的運作方式&顯示方式 及系統自動指派代碼顯示方式,使用者不可編輯的部分(用Label來呈現代碼的部分,並用粗體顯示)1.0.192010/10/7Hellen增加針對欄位長度限制部份,查詢條件也需加入長度限制,並且針對長度限制需在tooltip中說明.及針對查詢區塊查找按鈕,Ui用詞統一使用”查找”1.0.202010/10/11Hellen刪除11.11,根據SA討論會說明,tooltip中不會加入欄位長度說明,但是rp檔的欄位說明中加入長度限制的說明,之前
5、已經加入的程式不用進行反工.目錄1共通規範62頁面寬度標準設定63網頁Page屬性說明64文件引用統一說明64.1Css文件64.2JS文件75CSS樣式套用規範75.1作業功能標題75.2數據群組標題85.3功能按鈕(Button)85.4欄位顯示方式85.5查詢功能區塊85.6查詢結果區塊95.6.1修改按鈕95.6.2刪除按鈕95.6.3清單按鈕統一使用linkbutton，非清單按鈕使用button。95.6.4GridView95.7日曆盒105.8操作狀態105.9標籤106畫面堆疊方式117分頁模式118頁面風格118.1網頁規格118.2網頁版型128.3下方展開128.3.1
6、查詢128.3.2查看138.3.3相關功能138.3.4複制148.3.4.1編輯148.3.4.2新增158.4彈跳視窗15彈跳視窗Size: 850 x 600。頁面顯示如有表格時，則以100%方式顯示。168.4.1查詢結果168.4.2查看頁面-單檔模式178.4.3查看-單一主從檔模式178.4.4查看-多重主從檔模式188.4.5滑鼠mouse over時顯示的模式208.4.6正式與草稿資料顯示模式208.4.6.1正式資料208.4.6.2草稿資料218.4.6.3彈跳視窗樣式228.5Tree View238.6彈跳視窗快選單圖示238.6.1在查詢欄位輸入代碼，當onbl
7、ur時，系統自動查詢代碼後，帶回其對應的名稱在所要顯示的位置。238.6.2由使用者自行點選彈跳視窗進行查詢。248.6.3查詢欄位不允許輸入，使用者只能點選彈跳視窗進行查詢。249控制項拖放及使用細則249.1Tabindex的設置249.2TextBox249.3TextArea249.4Button259.5DropDownList259.6GridView259.7隱藏欄位2510頁面排版規則2510.1Table Layout2511其他規範2511.1彈跳視窗圖示2511.2頁面功能名稱2611.3查詢欄位有起迄日期時的顯示模式2611.4國別 & 城市 & 地區 顯示模式(必須要
8、正確帶入城市後才可帶出地區下拉清單)2611.5有資訊分區時的分區模式2611.6多筆列表均使用Grid方式設計2711.7系統變動或產生的欄位2711.8畫面如引用其他共用頁面2711.9時間統一格式為24小時制, 時間區間為00:00-23:59範例如下:2711.10統一規範頁籤內的頁籤須各自提交,無法交由外層的提交共同作業範例如下:271 共通規範畫面語系文字編碼預設為簡體中文2 頁面寬度標準設定系統頁面屏寬設定為1024px，其中左邊Menu寬度為230px(含MenuBar佔用7px)，其餘寬度分配給每支程式。此部份需設定系統目錄下的Default.aspx頁面結構大體如下 102
9、4px230px100另外,在程式開發時需設定外層Table寬度為100%。3 網頁Page屬性說明畫面配置方面，應使用Master Page 方式，用以規畫Layout，其中Master已定義所有畫面的css及js方法。只需在網頁Page屬性中加入下面即可MasterPageFile=/Shared/MasterPage.master程式開發統一套用Master Page後，不需要單獨在每個控制項上應用Css樣式，只需引用Css檔即可。頁面通用樣式：標籤樣式：MasterPage統一引用JavaScript文件，無需在單只引用。通用JavaScript：4 文件引用統一說明4.1 Css文件
10、 系統所有的Css樣式均整理在content.css檔中，程式中不需單獨套用。 系統中所有使用的CSSS檔皆放在 / CSS/ 目錄中。 日曆盒樣式：CalendarNotes.css 自定義通用樣式：content.css DEV控制項樣式：DataBinding.css，Default.css，DefaultYouthful.css， Validation.css，styles.css 頁簽樣式：tabber.css ，ui.tabs.css4.2 JS文件 系統中所有使用的JS檔皆放在 /Scripts/ 目錄中。 畫面所使用的共用JS方法均整理在Common.js檔中(框架中除了有獨立
11、定義的js以外，都定義在此文件中) 畫面所使用的日曆盒方法整理在calendar.js 文件中 ui框架中頁簽相關JS方法均整理在tabber.js，ui.core.js，ui.multiTab.js，ui.tabs.js文件中 JQuery引用JS為jquery-1.3.2.min.js 共用開窗JS為OpenWindow_Utility.js Colorpicker目錄中為拾色器JS DEV控制項JS為menu檔夾下的JS My97DatePicker為日曆盒JS5 CSS樣式套用規範5.1 作業功能標題 每只程式功能的作業功能標題，請套用headline樣式。套用後其外觀樣式應如下圖所示
12、： 不可編輯欄位元設置方式：文字方塊查看或編輯狀態下不可編輯欄位統一使用readOnly進行設置，並套用CSS樣式，底色設置灰色，字體設置黑色。控制項查看或編輯狀態下不可使用時，統一使用Enabled或Disabled設置。5.2 數據群組標題針對每個功能畫面的資料會依其資料意義加以群組，套用樣式按下規則(1) 查詢區，套用search_title樣式。套用後其外觀樣式應如下圖所示：(2) 輸入區，套用input_title樣式。套用後其外觀樣式應如下圖所示：(3) 顯示區，套用display_title。套用後其外觀樣式應如下圖所示：5.3 功能按鈕(Button)每個功能畫面中的功能按鈕(Button)請套用ctrl_btn_white樣式。套用後其外觀樣式應如下圖所示：5.4 欄位顯示方式 必填欄位 不可編輯欄位以readonly 方式+灰色底顯示 5.5 查詢功能區塊因應功能不同，一般維護欄位數較多。故在查看和維護相關頁面 不使用Table方式顯示，請依Prototype顯示欄位元及其位置，頁面標題性文字無須套用樣式，標題後不要加入分號，查看狀態下，需要將對應的輸入控制
