財付通應(yīng)用程序接入 設(shè)計規(guī)范.doc

設(shè)計規(guī)范布局與排版布局：整體結(jié)構(gòu)主要由全局導(dǎo)航區(qū)、應(yīng)用標(biāo)題區(qū)和內(nèi)容區(qū)3部分組成，尺寸分別如下：其中綠色區(qū)域為應(yīng)用網(wǎng)頁的最大面積，超出該尺寸，頁面將會顯示不完整（不會出現(xiàn)滾動條）。藍色區(qū)域可以通過開放平臺后臺編輯。頁面基本結(jié)構(gòu)代碼如下： 財付通-我的錢包 v4.0 柵格系統(tǒng)內(nèi)容區(qū)的版塊尺寸寬度需要遵循以下柵格系統(tǒng)，頁面內(nèi)容距離邊框10像素，版塊之間的橫向距離為12像素，縱向距離為10像素，共有四種方案可選：第一種，每個版塊最小寬度為80像素：第二種，每個版塊最小寬度為126像素：第三種，每個版塊最小寬度為172像素：第四種，每個版塊最小寬度為264像素：版式示例：第一種柵格系統(tǒng)的版式：第二種柵格系統(tǒng)的版式：應(yīng)用圖標(biāo)尺寸大圖標(biāo)的標(biāo)準(zhǔn)尺寸為5959像素，用于“我的錢包”首頁和版權(quán)信息頁面顯示。小圖標(biāo)的標(biāo)準(zhǔn)尺寸為1818像素。用于“我的錢包”內(nèi)部頁面顯示。設(shè)計模板下載及使用方法設(shè)計模板為PSD文件，點擊這里進行下載：大圖標(biāo)小圖標(biāo)。具體操作方法為：1.用Photoshop CS4或以上版本將圖標(biāo)源文件打開；2.雙擊圖層面板中“背景”圖層前面的色塊，進行顏色選擇；3.將圖標(biāo)元素放入“空白層”里，“示例”圖層需要刪掉；4.圖標(biāo)保存為PNG格式。色彩常用的主體色彩為藍色、橘色、綠色和淺灰色等。如圖所示：禁止使用純黑、純白以及飽和度過高的顏色。建議與禁忌 建議采用簡潔達意的圖形符號。建議大圖標(biāo)里的圖形邊緣使用圓角。不可使用與現(xiàn)有應(yīng)用過于相似的圖標(biāo)。禁止使用易產(chǎn)生功能誤導(dǎo)的圖形，譬如：房子（代表主頁）、齒輪（代表設(shè)置）、箭頭（代表方向）等。禁止使用涉及版權(quán)糾紛的圖片元素，譬如他人的商標(biāo)或產(chǎn)品。通用圖標(biāo)css調(diào)用地址：/wallet/v4.0/css/wallet_v4.cssJS調(diào)用地址：/wallet/v4.0/js/wallet_v4_min.js圖標(biāo)結(jié)構(gòu)示例/描述結(jié)構(gòu)示例：結(jié)構(gòu)示例：結(jié)構(gòu)示例：結(jié)構(gòu)示例：結(jié)構(gòu)示例：結(jié)構(gòu)示例：在白色背景下：在黃色背景下：在藍色背景下： 結(jié)構(gòu)示例：在白色背景下：在黃色背景下：在藍色背景下： 結(jié)構(gòu)示例：在白色背景下：在黃色背景下：在藍色背景下： 結(jié)構(gòu)示例：在白色背景下：在黃色背景下：在藍色背景下： 結(jié)構(gòu)示例：在白色背景下：在黃色背景下：在藍色背景下： 結(jié)構(gòu)示例：默認：開始允值長按鈕：我是一個超長的按鈕 跳出錢包標(biāo)識（新開窗口）Loading效果字體（字體、字號、顏色、CSS）CSS文件引用地址：/wallet/v4.0/css/wallet_v4.css默認字體樣式CSSfont:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif;標(biāo)題標(biāo)題字體選用系統(tǒng)默認字體，字號為14像素大小，顏色為，CSS代碼：重點（數(shù)值、金額等） 重點字體選用，字號為，顏色為，CSS代碼： 鏈接 鏈接文字分為默認、鼠標(biāo)懸浮、點擊過、失效4種狀態(tài)。CSS代碼：a.blue color:#1670EB; padding:2px 2px 0px 2px;a.blue:visited color:#1670EB; padding:2px 2px 0px 2px;a.blue:hover background-color:#4AB7E0; color:#fff; padding:2px 2px 0px 2px; text-decoration:none;a.blue:active background-color:#4AB7E0; color:#fff; padding:2px 2px 0px 2px; 跳轉(zhuǎn)至瀏覽器的鏈接需要在鏈接尾部添加“”圖標(biāo)，為避免影響視覺感受，可以在鼠標(biāo)懸浮時再出現(xiàn)。顏色 底色默認底色為淺藍色，色值為#f5f8fd?？梢愿鶕?jù)應(yīng)用的屬性不同采用其它色值，建議如下：生活類：純白色，色值#ffffff；淡藍色，色值cee3f8；淡綠色，色值#dff7d7；商旅類：淺灰色，色值#f4f4f4；淺綠色（適用于度假類應(yīng)用），色值#eefef4；購物類：淺橘色，色值#fbf1e5；淡粉色（適用于禮物或女性商品），色值f9e9e9；游戲類：淺藍灰色，色值#e6ebf0；禁止使用黑色或其它飽和度過高的顏色。邊框默認的邊框色值為#b0c4d8，可依據(jù)底色不同采用同色系的顏色。建議顏色飽和度不要過高?？丶胀ò粹o按鈕的常用規(guī)格有3種：小按鈕的高度為20像素，最小寬度為56像素，圓角大小為2像素，按鈕上的文字為12號字體。中按鈕的高度為28像素，最小寬度為86像素，圓角大小為2像素，按鈕上的文字為12號加粗字體。大按鈕的高度為33像素，最小寬度為118像素，圓角大小為3像素，按鈕上的文字為14號加粗字體。建議按鈕上的文字不超過6個漢字，都為簡單易懂的動詞。按鈕顏色可以根據(jù)網(wǎng)頁配色作調(diào)整，但要盡量保證質(zhì)感一致。返回按鈕 ：帶下拉箭頭的按鈕 ：常用于余額查詢等功能，點擊后，向下彈出查詢結(jié)果。支付按鈕：用于提交支付頁面的按鈕，分為兩種尺寸和樣式：小按鈕，文字大小為12像素大按鈕，文字大小為14像素輸入框普通 ：輸入框的最小高度為20像素。默認邊框顏色為#6699cc，可根據(jù)頁面底色略作調(diào)整。建議用深藍或深灰色，除非特殊情況，禁止使用紅色。數(shù)值輸入（卡號、手機號、金額等）：高度為32像素，輸入的文字大小為 22像素，css代碼：font:bold 22px/26px Arial;下拉框 標(biāo)簽（Label） 用于在同一頁面內(nèi)切換不同的功能，如果點擊后跳轉(zhuǎn)到瀏覽器，需要在文字后面添加“”圖標(biāo)并始終出現(xiàn)，例如下圖第三個標(biāo)簽。css引用：html結(jié)構(gòu)：財付通/銀行卡開通Q幣Q點開通其它方式開通; 翻頁 日期選擇器外觀樣式如下：點擊輸入框內(nèi)，即可打開日期選擇界面，效果圖如下：調(diào)用JS地址：/v2.0/js/calendar/calendar.js注意：因彈出的日歷部分如果超出“我的錢包”界面，會被外框遮住，所以需要根據(jù)日期選擇器的位置調(diào)整JS文件中的offsetx和offsety的數(shù)值，保證界面顯示完整。提示框 視覺效果如下：1.提示的通用窗口寬度統(tǒng)一為340px。文字三行以內(nèi)的的窗口高度全部定為150px。文字超過三行的每超過一行高度增加16px。（空行算作一行的文字高度）2. 8行為文字最多的界面高度。 文字超過8行的情況、出現(xiàn)滾動條，不建議使用出現(xiàn)滾動條的界面，盡量控制文字信息翻頁用于分頁查看列表內(nèi)容或搜索結(jié)果等信息，由“當(dāng)前頁數(shù)/總頁數(shù)”、“頁碼按鈕”和“翻頁按鈕”3部分組成。結(jié)構(gòu)與視覺效果如下圖，顏色可根據(jù)頁面配色作調(diào)整：注意事項：1. 翻頁控件放置在內(nèi)容區(qū)的右下角； 2. 當(dāng)處于第一頁時，不顯示“上一頁”，處于最末頁時，不顯示“下一頁”。 錢包基本資源文件引用CSS文件/wallet/v4.0/css/wallet_v4.cssJavaScript文件/wallet/v4.0/js/wallet_v4_min.js外部應(yīng)用嵌入Frame嵌入/v4.0/frame.shtml? crumb= + encodeURIComponent(應(yīng)用名稱)&url= + encodeURIComponent(應(yīng)用URL)外部應(yīng)用跳轉(zhuǎn)/v4.0/jump.shtml?wallet_position=跳轉(zhuǎn)位置標(biāo)識&wallet_app=應(yīng)用標(biāo)識&wallet_url= + encodeURIComponent(支付中心跳轉(zhuǎn)URL)支付中心跳轉(zhuǎn)/v4.0/jump.shtml?wallet_position=P1&wallet_app=應(yīng)用標(biāo)識&wallet_url= + encodeURIComponent(支付中心跳轉(zhuǎn)URL)注：應(yīng)用標(biāo)識和跳轉(zhuǎn)位置標(biāo)識需要配置。如果不匹配，直接跳轉(zhuǎn)到錢包首頁。頁面Javascript接口原生對象擴散接口接口名稱說 明其 它Stotype.cut(size)截取字符串“aaa”.cut(2)Stotype.cut(size) 截取字符串 “aaa”.cut(2) Stotype.startsWith(prefix,offset) 匹配字符串是否以prefix開頭 Stotype.endsWith(suffix) 匹配字符串是否以suffix結(jié)尾 Stotype.replaceAll(regexp, replacement)替換所有匹配的字符/字符串 Stotype.replaceFirst(regexp, replacement)替換第一次匹配的字符/字符串 Stotype.trim() 去空字符 Stotype.leftTrim() 去左空字符 Stotype.rightTrim() 去右空字符 Stotype.bothTrim() 去兩側(cè)空字符 Stotype.size() 字符串長度，將中文看成兩個字符計算 Stotype.replaceHTML() 替換HTML標(biāo)簽 Stotype.fillBefore(chr, bit) 前導(dǎo)填充 “123”.fillBefore(“05)/00123 Stotype.fillAfter(chr, bit) 向后填充 Stotype.toCurrency(bit) 轉(zhuǎn)換成貨幣格式 “123456”.toCurrency()/123,456.00 Stotype.toNumber(bit, splitChar) 轉(zhuǎn)換成數(shù)字 “123,456.00”.toNumber(0, “,”) Stotype.format(param) 格式化，用于模板替換 var o = text:”world”;var str = “hello $text”;str = str.format(o)/hello world Dtotype.format(fmt, isFill) 格式化日期對象 fmt 格式 %y%M%d%h%m%s%i%w%W%a%A isFill 是否補0 var d = new Date();d.format(“%y-%M-%d”, true)/2010-04-18 d.forma(“%y-%-%d”,false)/2010-4-18Dtotype.parseDate (str, fmt) 將字符串解析成日期對象 Dtotype.validDate (str, fmt) 校驗字符串是否為日期格式 Dtotype.leapYear() 判斷是否是閏年return 集合(是否是閏年，各月份的天數(shù)集，當(dāng)前月的天數(shù))isLeapYear,days,yearDays, monthDays Dtotype.dateDiff (interval, date)日期比較* param interval 間隔參數(shù)* y 年* q 季度* n 月* d 日* w 周* h 小時* m 分鐘* s 秒* i 毫秒* param date 比較日期 Dtotype.dateAdd (interval, num)日期相加* param interval 間隔參數(shù)* y 年* q 季度* n 月* d 日* w 周* h 小時* m 分鐘* s 秒* i 毫秒* param num 差值 原生對象擴散接口接口名稱說 明其 它Browser 瀏覽器檢測接口類型：Browser.type版本號：Browser.version Wallet.JUMP_PAGE 中轉(zhuǎn)頁面 Wallet. HOME_PAGE 錢包首頁 Wallet. SECURE_PAGE 安全頁面 Wallet. IE6 是否為ie6 Wallet. IE7 是否為ie7 Wallet. IE8 是否為ie8 Wallet. WALLET 錢包目錄地址 Wallet. MAIN 財付通主站跨域地址 Wallet. LIFE life跨域地址 Wallet. CHONG chong跨域地址 Wallet. PORTAL portal跨域地址 Wallet.$(id) 根據(jù)ID獲取DOM元素 Wallet. getDocumentSize() 獲取文檔大小 返回width,height Wallet. getViewportSize() 獲取視窗大小 返回width,height Wallet. getScrollPosition() 獲取滾動條位置 返回left, top Wallet. isSameWindow() 父級窗口和自身窗口是否相同 Wallet. getParameter(key) 獲取URL參數(shù) Wallet. appendParameter(url, params) 給URL添加參數(shù) Wallet. encode(str) URI編碼 Wallet. decode(str) URI解碼 Wallet. filterChar(str) 過濾特殊字符 Wallet. getTimeStamp() 獲取時間戳 Wallet. closeWallet() 關(guān)閉錢包 Wallet. setCookie(key, value, expires) 設(shè)置cookie Wallet. getCookie(key) 獲取cookie Wallet. getPosition(obj) 獲取對象的絕對位置 返回x,y Wallet. getWalletCookie() 獲取小錢包cookieuin,key,qluin,qlskey Wallet. is_cft_user() 是否是財付通用戶 Wallet. getNodeValue(xml, xmlDoc, xpath) 獲取XML節(jié)點的值 Wallet. doForm(url, target, method, params, isAutoSubmit) 動態(tài)表單 Wallet. redirect(url) 重定向，錢包帶登錄態(tài)跳轉(zhuǎn)到pay.qq Wallet. redirectTo(url, inWallet, isFlush) 重定向，錢包帶登錄態(tài)跳轉(zhuǎn)到財付通主站 param String url 目標(biāo)地址 param Boolean inWallet 是否錢包內(nèi)跳轉(zhuǎn) param Boolean isFlush 是否刷新cookie Wallet. redirectShareLogin(url, inWallet, isFlush) 重定向，portal共享登錄跳轉(zhuǎn) param String url 目標(biāo)地址 param Boolean inWallet 是否錢包內(nèi)跳轉(zhuǎn) param Boolean isFlush 是否刷新cookie Wallet. redirectAIR (line, url) 重定向，機票訂購跳轉(zhuǎn) param String line 航空公司 param String url 目標(biāo)地址 Wallet. redirectPay (crumb, link, url) 重定向，支付中心 param String crumb 面包屑導(dǎo)航文字 param String link 面包屑導(dǎo)航鏈接 param String url 跳轉(zhuǎn)URL Wallet. redirectFrame (crumb, url) 重定向，其它框架 param String crumb 面包屑導(dǎo)航文字 param String url 跳轉(zhuǎn)URL Wallet. redirectMoney() 重定向，賺取零花錢 Wallet. redirectMCH (action, attach) 重定向，商戶站點 param String action 配置文件中的ACTION，表示哪個商戶 param String attach 參數(shù) Wallet. virtualRequest(strParam) 虛擬請求 param String strParam 請求參數(shù) Wallet. setCrumbNav (msg) 設(shè)置面包屑導(dǎo)航 param String msg 文字信息 Wallet. createIframe (_id, _src, css) 創(chuàng)建IFRAME param String _id iframe的id param String _src 需要加載的地址 param String css 附加樣式 return Object ifr iframe對象 Wallet. getTipsInfo (id) 從HTML節(jié)點獲取提示信息 param String id 節(jié)點ID return String 提示信息，否則為null Wallet. getFormElement (formName, name) 獲取表單元素 param String formName 表單名 param String name 元素名 param Object element/null Wallet. dispatchEvent (target, eventType, datatype, data) 事件分發(fā) param String|Object target 節(jié)點ID/節(jié)點 param String eventType 事件類型 param * datatype 事件屬性 param * data 事件屬性 Wallet. ready (handler, args) DOM加載 param handler 事件函數(shù) param args 參數(shù) Wallet. setErrTips(id, msg, isShow) 設(shè)置錯誤提示信息 param String id 對象ID param String msg 錯誤信息 param Boolean isShow 是否顯示 Wallet. setTips (parentId, id, isShow, type, msg, x, y 設(shè)置提示信息 param String parentId 父級ID param String id 唯一串或字符 param Boolean isShow 是否顯示 param String type 提示類型: err|warn|info|prompt|ok param String msg 提示信息 param int x x軸 param int y y軸 Loader接口接口名稱說 明其 它Wallet. Loader. loadScript (url, handler, args, isDestory) 動態(tài)加載js文件 param String url js地址 param Function handler 處理函數(shù)，不需要時傳null param Array args 處理函數(shù)參數(shù)，不需要時傳 param Boolean isDestory 是否使用完后銷毀 對話框（彈出層）接口接口名稱說 明其 它Wallet.UI.Dialog() 構(gòu)造函數(shù) var d = new Wallet.UI.Dialog()dialog.dialog(cfg) 構(gòu)建對話框 cfg： id : 0, title : 提示, content : null, icon : 0, width : 550, height : 400, drag : true, btns : label:關(guān)閉, handler:null, args:, disabled:false, size:0, closer : handler:null, args: Icon常量 Wallet.UI.ICON.OK Wallet.UI.ICON.ERROR Wallet.UI.ICON.WARN Wallet.UI.ICON.PROMPT Wallet.UI.ICON.INFO Wallet.UI.ICON. SUPER_LOGIN Wallet.UI.ICON. NONE btns說明： label ：標(biāo)簽 handler ： 處理函數(shù) args ：處理函數(shù)參數(shù) disabled ： 是否禁用 size ：按鈕長度，值為0|86|128 closer說明： handler ：點擊關(guān)閉后的附加處理函數(shù) args ：參數(shù) Wallet.UI.show(id, width,height) 顯示對話框 Wallet.UI.hidden(id) 隱藏對話框 浮層接口接口名稱說 明其 它Wallet.DDLayer(isAlwaysOnTop) 構(gòu)造函數(shù) var layer = new Wallet.DDLayer(); layer. show(obj, id, delay, flag) 顯示浮層 param Object obj 參照對象 param String id 浮動層ID param int delay 延時時長 param int flag 標(biāo)識，是否使用延時 1:使用, 0:不使用 layer. hidden(id) 隱藏浮層 layer. create(id, pos, button, panel) 創(chuàng)建浮層 param String id 浮動層ID param String pos 創(chuàng)建位置 param Object button text,width,left,top,arrow,closer param Object panel title,content,width,height,left,top,closer,auto,masklayer. setButtonText (id, text) 設(shè)置按鈕文字 param String id 浮動層ID param String text 文字 layer. setPanelText (id, text) 設(shè)置面板內(nèi)容 param String id 浮動層ID param String text 內(nèi)容 分頁接口接口名稱方法名說明PageBarPageBar()構(gòu)建一個新的PageBar對象。ObjectpageInfo分頁信息。ObjectgetPageInfo()獲取分頁信息。voidinit(Object pageInfo)初始化分頁欄。Object getPageInfo() /獲取分頁信息。 參數(shù)： 返回：分頁信息（對象集） int recordcount 記錄數(shù) Array positions = 分頁欄顯示區(qū)域 int page 頁碼（由1開始） int pageSize 每頁顯示的記錄數(shù) int offset 頁頭和頁尾的頁碼偏移量，如offset = 2， 1 2.6 7 8 9 10.21 22 int radius 頁中時頁碼半徑，如radius = 3， 1 2.6 7 8 9 10 11 12.29 30 Function handler 點擊頁碼的處理函數(shù) Array args 處理函數(shù)所需的要參數(shù) int jumpSize 顯示jump按鈕的參考值 Boolean isShowJumper 是否顯示jump Boolean isShowPages 是否顯示頁數(shù) int returnPage 服務(wù)器端返回的頁碼（虛擬分頁使用） int returnPages 服務(wù)器一次返回的頁面數(shù)（虛擬分頁使用） Boolean noRecordcount 標(biāo)記是否有記錄總數(shù)（虛擬分頁使用） Boolean hasNext 是否有下一次數(shù)據(jù)（虛擬分頁使用） int virtualPage 虛擬頁碼（虛擬分頁使用） int currentPage 當(dāng)前頁碼（由0開始） int totalPageSize 總頁碼數(shù) String namespace 實例名稱 void init(Object pageInfo) /6初始化分頁欄。 參數(shù)：pageInfo - 分頁信息（對象集），標(biāo)藍的為必需項。 int recordcount 記錄數(shù) Array positions = 分頁欄顯示區(qū)域 int page 頁碼（由1開始） int pageSize 每頁顯示的記錄數(shù) int offset 頁頭和頁尾的頁碼偏移量，如offset = 2， 1 2.6 7 8 9 10.21 22 int radius 頁中時頁碼半徑，如radius = 3， 1 2.6 7 8 9 10 11 12.29 30 Function handler 點擊頁碼的處理函數(shù) Array args 處理函數(shù)所需的要參數(shù) int jumpSize 顯示jump按鈕的參考值 Boolean isShowJumper 是否顯示jump Boolean isShowPages 是否顯示頁數(shù) int returnPage 服務(wù)器端返回的頁碼（虛擬分頁使用） int returnPages 服務(wù)器一次返回的頁面數(shù)（虛擬分頁使用） Boolean noRecordcount 標(biāo)記是否有記錄總數(shù)（虛擬分頁使用） Boolean hasNext 是否有下一次數(shù)據(jù)（虛擬分頁使用） String namespace 實例名稱 效果 /PageBar：默認 recordcount = 380 positions = pager page = 1 returnPage = 1 pageSize = 8 returnPages = 0 noRecordcount = false hasNext = false offset = 2 radius = 3 handler = function args = PageBar：默認 jumpSize = 10 isShowJumper = true isShowPages = true currentPage = 0 virtualPage = 0 totalPageSize = 48 viewSize = 7 defSize = 9 namespace = TFL.PageBar 樣例 function showInfo(s) var args = arguments; var pageInfo = TFL.PageBar.getPageInfo(); var str = s + ; for(var i in pageInfo) if(i = handler) str += (i + = + typeof(pageInfoi) + ); else str += (i + = + pageInfoi + ); document.getElementById(info).innerHTML = str; function showInfo1(s) var args = arguments; var pageInfo = test1.getPageInfo(); var str = s + ; for(var i in pageInfo) if(i = handler) str += (i + = + typeof(pageInfoi) + ); else str += (i + = + pageInfoi + ); document.getElementById(info1).innerHTML = str; TFL.PageBar.init( recordcount:380, page:1, positions:pager, handler:showInfo, args:PageBar：默認 ); var test1 = new PageBar(); test1.init( recordcount:380, page:1, positions:pager1, handler:null, args:, namespace:test1, isShowJumper:false ); var test2 = new PageBar(); test2.init( recordcount:380, page:1, positions:pager2, handler:null, args:, namespace:test2, isShowPages:false ); var test3 = new PageBar(); test3.init( recordcount:380, page:1, positions:pager3, handler:null, args:, namespace:test3, isShowJumper:false, isShowPages:false ); var test4 = new PageBar(); test4.init( recordcount:380, page:1, offset:1, positions:pager4, handler:null, args:, namespace:test4 ); var test5 = new PageBar(); test5.init( recordcount:380, page:1, offset:1, radius:1, positions:pager5, handler:null, args:, namespace:test5, isShowJumper:false, isShowPages:false ); var test6 = new PageBar(); test6.init( recordcount:380, page:1, offset:1, radius:1, positions:pager6, handler:null, args:, namespace:test5, isShowJumper:false ); AJAX接口接口名稱說 明其 它lWallet.Ajax() 構(gòu)造函數(shù) var req = new Wallet.Ajax();req.sendRequest(config) 發(fā)送請求參數(shù)：config - 參數(shù)集String method 請求時用的方法,默認為 POSTBoolean asynch 是否為異步,默認為trueString contentType 請求時的Content-Type, 默認為