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

設計規(guī)范布局與排版布局：整體結構主要由全局導航區(qū)、應用標題區(qū)和內容區(qū)3部分組成，尺寸分別如下：其中綠色區(qū)域為應用網頁的最大面積，超出該尺寸，頁面將會顯示不完整（不會出現滾動條）。藍色區(qū)域可以通過開放平臺后臺編輯。頁面基本結構代碼如下： 財付通-我的錢包 v4.0 柵格系統(tǒng)內容區(qū)的版塊尺寸寬度需要遵循以下柵格系統(tǒng)，頁面內容距離邊框10像素，版塊之間的橫向距離為12像素，縱向距離為10像素，共有四種方案可選：第一種，每個版塊最小寬度為80像素：第二種，每個版塊最小寬度為126像素：第三種，每個版塊最小寬度為172像素：第四種，每個版塊最小寬度為264像素：版式示例：第一種柵格系統(tǒng)的版式：第二種柵格系統(tǒng)的版式：應用圖標尺寸大圖標的標準尺寸為5959像素，用于“我的錢包”首頁和版權信息頁面顯示。小圖標的標準尺寸為1818像素。用于“我的錢包”內部頁面顯示。設計模板下載及使用方法設計模板為PSD文件，點擊這里進行下載：大圖標小圖標。具體操作方法為：1.用Photoshop CS4或以上版本將圖標源文件打開；2.雙擊圖層面板中“背景”圖層前面的色塊，進行顏色選擇；3.將圖標元素放入“空白層”里，“示例”圖層需要刪掉；4.圖標保存為PNG格式。色彩常用的主體色彩為藍色、橘色、綠色和淺灰色等。如圖所示：禁止使用純黑、純白以及飽和度過高的顏色。建議與禁忌 建議采用簡潔達意的圖形符號。建議大圖標里的圖形邊緣使用圓角。不可使用與現有應用過于相似的圖標。禁止使用易產生功能誤導的圖形，譬如：房子（代表主頁）、齒輪（代表設置）、箭頭（代表方向）等。禁止使用涉及版權糾紛的圖片元素，譬如他人的商標或產品。通用圖標css調用地址：/wallet/v4.0/css/wallet_v4.cssJS調用地址：/wallet/v4.0/js/wallet_v4_min.js圖標結構示例/描述結構示例：結構示例：結構示例：結構示例：結構示例：結構示例：在白色背景下：在黃色背景下：在藍色背景下： 結構示例：在白色背景下：在黃色背景下：在藍色背景下： 結構示例：在白色背景下：在黃色背景下：在藍色背景下： 結構示例：在白色背景下：在黃色背景下：在藍色背景下： 結構示例：在白色背景下：在黃色背景下：在藍色背景下： 結構示例：默認：開始允值長按鈕：我是一個超長的按鈕 跳出錢包標識（新開窗口）Loading效果字體（字體、字號、顏色、CSS）CSS文件引用地址：/wallet/v4.0/css/wallet_v4.css默認字體樣式CSSfont:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif;標題標題字體選用系統(tǒng)默認字體，字號為14像素大小，顏色為，CSS代碼：重點（數值、金額等） 重點字體選用，字號為，顏色為，CSS代碼： 鏈接 鏈接文字分為默認、鼠標懸浮、點擊過、失效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; 跳轉至瀏覽器的鏈接需要在鏈接尾部添加“”圖標，為避免影響視覺感受，可以在鼠標懸浮時再出現。顏色 底色默認底色為淺藍色，色值為#f5f8fd?？梢愿鶕玫膶傩圆煌捎闷渌?，建議如下：生活類：純白色，色值#ffffff；淡藍色，色值cee3f8；淡綠色，色值#dff7d7；商旅類：淺灰色，色值#f4f4f4；淺綠色（適用于度假類應用），色值#eefef4；購物類：淺橘色，色值#fbf1e5；淡粉色（適用于禮物或女性商品），色值f9e9e9；游戲類：淺藍灰色，色值#e6ebf0；禁止使用黑色或其它飽和度過高的顏色。邊框默認的邊框色值為#b0c4d8，可依據底色不同采用同色系的顏色。建議顏色飽和度不要過高。控件普通按鈕按鈕的常用規(guī)格有3種：小按鈕的高度為20像素，最小寬度為56像素，圓角大小為2像素，按鈕上的文字為12號字體。中按鈕的高度為28像素，最小寬度為86像素，圓角大小為2像素，按鈕上的文字為12號加粗字體。大按鈕的高度為33像素，最小寬度為118像素，圓角大小為3像素，按鈕上的文字為14號加粗字體。建議按鈕上的文字不超過6個漢字，都為簡單易懂的動詞。按鈕顏色可以根據網頁配色作調整，但要盡量保證質感一致。返回按鈕 ：帶下拉箭頭的按鈕 ：常用于余額查詢等功能，點擊后，向下彈出查詢結果。支付按鈕：用于提交支付頁面的按鈕，分為兩種尺寸和樣式：小按鈕，文字大小為12像素大按鈕，文字大小為14像素輸入框普通 ：輸入框的最小高度為20像素。默認邊框顏色為#6699cc，可根據頁面底色略作調整。建議用深藍或深灰色，除非特殊情況，禁止使用紅色。數值輸入（卡號、手機號、金額等）：高度為32像素，輸入的文字大小為 22像素，css代碼：font:bold 22px/26px Arial;下拉框 標簽（Label） 用于在同一頁面內切換不同的功能，如果點擊后跳轉到瀏覽器，需要在文字后面添加“”圖標并始終出現，例如下圖第三個標簽。css引用：html結構：財付通/銀行卡開通Q幣Q點開通其它方式開通; 翻頁 日期選擇器外觀樣式如下：點擊輸入框內，即可打開日期選擇界面，效果圖如下：調用JS地址：/v2.0/js/calendar/calendar.js注意：因彈出的日歷部分如果超出“我的錢包”界面，會被外框遮住，所以需要根據日期選擇器的位置調整JS文件中的offsetx和offsety的數值，保證界面顯示完整。提示框 視覺效果如下：1.提示的通用窗口寬度統(tǒng)一為340px。文字三行以內的的窗口高度全部定為150px。文字超過三行的每超過一行高度增加16px。（空行算作一行的文字高度）2. 8行為文字最多的界面高度。 文字超過8行的情況、出現滾動條，不建議使用出現滾動條的界面，盡量控制文字信息翻頁用于分頁查看列表內容或搜索結果等信息，由“當前頁數/總頁數”、“頁碼按鈕”和“翻頁按鈕”3部分組成。結構與視覺效果如下圖，顏色可根據頁面配色作調整：注意事項：1. 翻頁控件放置在內容區(qū)的右下角； 2. 當處于第一頁時，不顯示“上一頁”，處于最末頁時，不顯示“下一頁”。 錢包基本資源文件引用CSS文件/wallet/v4.0/css/wallet_v4.cssJavaScript文件/wallet/v4.0/js/wallet_v4_min.js外部應用嵌入Frame嵌入/v4.0/frame.shtml? crumb= + encodeURIComponent(應用名稱)&url= + encodeURIComponent(應用URL)外部應用跳轉/v4.0/jump.shtml?wallet_position=跳轉位置標識&wallet_app=應用標識&wallet_url= + encodeURIComponent(支付中心跳轉URL)支付中心跳轉/v4.0/jump.shtml?wallet_position=P1&wallet_app=應用標識&wallet_url= + encodeURIComponent(支付中心跳轉URL)注：應用標識和跳轉位置標識需要配置。如果不匹配，直接跳轉到錢包首頁。頁面Javascript接口原生對象擴散接口接口名稱說 明其 它Stotype.cut(size)截取字符串“aaa”.cut(2)Stotype.cut(size) 截取字符串 “aaa”.cut(2) Stotype.startsWith(prefix,offset) 匹配字符串是否以prefix開頭 Stotype.endsWith(suffix) 匹配字符串是否以suffix結尾 Stotype.replaceAll(regexp, replacement)替換所有匹配的字符/字符串 Stotype.replaceFirst(regexp, replacement)替換第一次匹配的字符/字符串 Stotype.trim() 去空字符 Stotype.leftTrim() 去左空字符 Stotype.rightTrim() 去右空字符 Stotype.bothTrim() 去兩側空字符 Stotype.size() 字符串長度，將中文看成兩個字符計算 Stotype.replaceHTML() 替換HTML標簽 Stotype.fillBefore(chr, bit) 前導填充 “123”.fillBefore(“05)/00123 Stotype.fillAfter(chr, bit) 向后填充 Stotype.toCurrency(bit) 轉換成貨幣格式 “123456”.toCurrency()/123,456.00 Stotype.toNumber(bit, splitChar) 轉換成數字 “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 集合(是否是閏年，各月份的天數集，當前月的天數)isLeapYear,days,yearDays, monthDays Dtotype.dateDiff (interval, date)日期比較* param interval 間隔參數* y 年* q 季度* n 月* d 日* w 周* h 小時* m 分鐘* s 秒* i 毫秒* param date 比較日期 Dtotype.dateAdd (interval, num)日期相加* param interval 間隔參數* y 年* q 季度* n 月* d 日* w 周* h 小時* m 分鐘* s 秒* i 毫秒* param num 差值 原生對象擴散接口接口名稱說 明其 它Browser 瀏覽器檢測接口類型：Browser.type版本號：Browser.version Wallet.JUMP_PAGE 中轉頁面 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) 根據ID獲取DOM元素 Wallet. getDocumentSize() 獲取文檔大小 返回width,height Wallet. getViewportSize() 獲取視窗大小 返回width,height Wallet. getScrollPosition() 獲取滾動條位置 返回left, top Wallet. isSameWindow() 父級窗口和自身窗口是否相同 Wallet. getParameter(key) 獲取URL參數 Wallet. appendParameter(url, params) 給URL添加參數 Wallet. encode(str) URI編碼 Wallet. decode(str) URI解碼 Wallet. filterChar(str) 過濾特殊字符 Wallet. getTimeStamp() 獲取時間戳 Wallet. closeWallet() 關閉錢包 Wallet. setCookie(key, value, expires) 設置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)跳轉到pay.qq Wallet. redirectTo(url, inWallet, isFlush) 重定向，錢包帶登錄態(tài)跳轉到財付通主站 param String url 目標地址 param Boolean inWallet 是否錢包內跳轉 param Boolean isFlush 是否刷新cookie Wallet. redirectShareLogin(url, inWallet, isFlush) 重定向，portal共享登錄跳轉 param String url 目標地址 param Boolean inWallet 是否錢包內跳轉 param Boolean isFlush 是否刷新cookie Wallet. redirectAIR (line, url) 重定向，機票訂購跳轉 param String line 航空公司 param String url 目標地址 Wallet. redirectPay (crumb, link, url) 重定向，支付中心 param String crumb 面包屑導航文字 param String link 面包屑導航鏈接 param String url 跳轉URL Wallet. redirectFrame (crumb, url) 重定向，其它框架 param String crumb 面包屑導航文字 param String url 跳轉URL Wallet. redirectMoney() 重定向，賺取零花錢 Wallet. redirectMCH (action, attach) 重定向，商戶站點 param String action 配置文件中的ACTION，表示哪個商戶 param String attach 參數 Wallet. virtualRequest(strParam) 虛擬請求 param String strParam 請求參數 Wallet. setCrumbNav (msg) 設置面包屑導航 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 事件函數 param args 參數 Wallet. setErrTips(id, msg, isShow) 設置錯誤提示信息 param String id 對象ID param String msg 錯誤信息 param Boolean isShow 是否顯示 Wallet. setTips (parentId, id, isShow, type, msg, x, y 設置提示信息 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 處理函數，不需要時傳null param Array args 處理函數參數，不需要時傳 param Boolean isDestory 是否使用完后銷毀 對話框（彈出層）接口接口名稱說 明其 它Wallet.UI.Dialog() 構造函數 var d = new Wallet.UI.Dialog()dialog.dialog(cfg) 構建對話框 cfg： id : 0, title : 提示, content : null, icon : 0, width : 550, height : 400, drag : true, btns : label:關閉, 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 ：標簽 handler ： 處理函數 args ：處理函數參數 disabled ： 是否禁用 size ：按鈕長度，值為0|86|128 closer說明： handler ：點擊關閉后的附加處理函數 args ：參數 Wallet.UI.show(id, width,height) 顯示對話框 Wallet.UI.hidden(id) 隱藏對話框 浮層接口接口名稱說 明其 它Wallet.DDLayer(isAlwaysOnTop) 構造函數 var layer = new Wallet.DDLayer(); layer. show(obj, id, delay, flag) 顯示浮層 param Object obj 參照對象 param String id 浮動層ID param int delay 延時時長 param int flag 標識，是否使用延時 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) 設置按鈕文字 param String id 浮動層ID param String text 文字 layer. setPanelText (id, text) 設置面板內容 param String id 浮動層ID param String text 內容 分頁接口接口名稱方法名說明PageBarPageBar()構建一個新的PageBar對象。ObjectpageInfo分頁信息。ObjectgetPageInfo()獲取分頁信息。voidinit(Object pageInfo)初始化分頁欄。Object getPageInfo() /獲取分頁信息。 參數： 返回：分頁信息（對象集） int recordcount 記錄數 Array positions = 分頁欄顯示區(qū)域 int page 頁碼（由1開始） int pageSize 每頁顯示的記錄數 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 點擊頁碼的處理函數 Array args 處理函數所需的要參數 int jumpSize 顯示jump按鈕的參考值 Boolean isShowJumper 是否顯示jump Boolean isShowPages 是否顯示頁數 int returnPage 服務器端返回的頁碼（虛擬分頁使用） int returnPages 服務器一次返回的頁面數（虛擬分頁使用） Boolean noRecordcount 標記是否有記錄總數（虛擬分頁使用） Boolean hasNext 是否有下一次數據（虛擬分頁使用） int virtualPage 虛擬頁碼（虛擬分頁使用） int currentPage 當前頁碼（由0開始） int totalPageSize 總頁碼數 String namespace 實例名稱 void init(Object pageInfo) /6初始化分頁欄。 參數：pageInfo - 分頁信息（對象集），標藍的為必需項。 int recordcount 記錄數 Array positions = 分頁欄顯示區(qū)域 int page 頁碼（由1開始） int pageSize 每頁顯示的記錄數 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 點擊頁碼的處理函數 Array args 處理函數所需的要參數 int jumpSize 顯示jump按鈕的參考值 Boolean isShowJumper 是否顯示jump Boolean isShowPages 是否顯示頁數 int returnPage 服務器端返回的頁碼（虛擬分頁使用） int returnPages 服務器一次返回的頁面數（虛擬分頁使用） Boolean noRecordcount 標記是否有記錄總數（虛擬分頁使用） Boolean hasNext 是否有下一次數據（虛擬分頁使用） 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() 構造函數 var req = new Wallet.Ajax();req.sendRequest(config) 發(fā)送請求參數：config - 參數集String method 請求時用的方法,默認為 POSTBoolean asynch 是否為異步,默認為trueString contentType 請求時的Content-Type, 默認為