财付通应用程序接入--设计规范.doc

资源描述

设计规范布局与排版布局：整体结构主要由全局导航区、应用标题区和内容区3部分组成，尺寸分别如下：其中绿色区域为应用网页的最大面积，超出该尺寸，页面将会显示不完整（不会出现滚动条）。蓝色区域可以通过开放平台后台编辑。页面基本结构代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="version" content="4.0" /> <title>财付通-我的钱包 v4.0</title> </head> <body> <div id="wallet_frame"> <div id=”wallet_nav”><!头部></div> <div id=” wallet_body”><!主体></div> </div> </body> </html> 栅格系统内容区的版块尺寸宽度需要遵循以下栅格系统，页面内容距离边框10像素，版块之间的横向距离为12像素，纵向距离为10像素，共有四种方案可选：第一种，每个版块最小宽度为80像素：第二种，每个版块最小宽度为126像素：第三种，每个版块最小宽度为172像素：第四种，每个版块最小宽度为264像素：版式示例：第一种栅格系统的版式：第二种栅格系统的版式：应用图标尺寸大图标的标准尺寸为59×59像素，用于“我的钱包”首页和版权信息页面显示。小图标的标准尺寸为18×18像素。用于“我的钱包”内部页面显示。设计模板下载及使用方法设计模板为PSD文件，点击这里进行下载：大图标小图标。具体操作方法为： 1.用Photoshop CS4或以上版本将图标源文件打开； 2.双击图层面板中“背景”图层前面的色块，进行颜色选择； 3.将图标元素放入“空白层”里，“示例”图层需要删掉； 4.图标保存为PNG格式。色彩常用的主体色彩为蓝色、橘色、绿色和浅灰色等。如图所示：禁止使用纯黑、纯白以及饱和度过高的颜色。建议与禁忌建议采用简洁达意的图形符号。建议大图标里的图形边缘使用圆角。不可使用与现有应用过于相似的图标。禁止使用易产生功能误导的图形，譬如：房子（代表主页）、齿轮（代表设置）、箭头（代表方向）等。禁止使用涉及版权纠纷的图片元素，譬如他人的商标或产品。通用图标 css调用地址： JS调用地址：图标结构示例/描述结构示例： <span class="icon large-d"> 结构示例： <span class=”icon large-x”> 结构示例： <span class=”icon large-g”> 结构示例： <span class=”icon large-w”> 结构示例： <span class=”icon large-i”> 结构示例：在白色背景下： <span class=”icon small-d”> 在黄色背景下： <span class=”icon small-dy”> 在蓝色背景下： <span class=”icon small-db”> 结构示例：在白色背景下： <span class=”icon small-x”> 在黄色背景下： <span class=”icon small-xy”> 在蓝色背景下： <span class=”icon small-xb”> 结构示例：在白色背景下： <span class=”icon small-g”> 在黄色背景下： <span class=”icon small-gy”> 在蓝色背景下： <span class=”icon small-gb”> 结构示例：在白色背景下： <span class=”icon small-w”> 在黄色背景下： <span class=”icon small-wy”> 在蓝色背景下： <span class=”icon small-wb”> 结构示例：在白色背景下： <span class=”icon small-i”> 在黄色背景下： <span class=”icon small-iy”> 在蓝色背景下： <span class=”icon small-ib”> 结构示例：默认： <span class=”button”><button>开始允值</button></span> 长按钮： <span class=”button long-btn”><button>我是一个超长的按钮</button></span> <span class=” new-flag”> <span class=”hot-flag”> 跳出钱包标识（新开窗口） <span class=” open-icon”> Loading效果 <span class=”loading”> 字体（字体、字号、颜色、CSS） CSS文件引用地址：默认字体样式 CSS font:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif; 标题标题字体选用系统默认字体，字号为14像素大小，颜色为，CSS代码：重点（数值、金额等）重点字体选用，字号为，颜色为，CSS代码：链接链接文字分为默认、鼠标悬浮、点击过、失效4种状态。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，可依据底色不同采用同色系的颜色。建议颜色饱和度不要过高。控件普通按钮按钮的常用规格有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引用： <tag class="tab-nav"> html结构： <div id="tab_nav_panel"> <ul class="tab-nav"> <li class="tab-selected"><a href="" onclick=" return false;" hidefocus="hidefocus">财付通/银行卡开通</a></li> <li><a href="" onclick="Wallet.QQ.swap(1); return false;" hidefocus="hidefocus">Q币Q点开通</a></li> <li class="tab-newwin"><a id="other_pay" href="about:blank" target="_blank" hidefocus="hidefocus">其它方式开通</a> <sup></sup></li>; </ul> </div> 翻页日期选择器外观样式如下：点击输入框内，即可打开日期选择界面，效果图如下：调用JS地址：注意：因弹出的日历部分如果超出“我的钱包”界面，会被外框遮住，所以需要根据日期选择器的位置调整JS文件中的offsetx和offsety的数值，保证界面显示完整。提示框视觉效果如下： 1.提示的通用窗口宽度统一为340px。文字三行以内的的窗口高度全部定为150px。文字超过三行的每超过一行高度增加16px。（空行算作一行的文字高度） 2. 8行为文字最多的界面高度。文字超过8行的情况、出现滚动条，不建议使用出现滚动条的界面，尽量控制文字信息翻页用于分页查看列表内容或搜索结果等信息，由“当前页数/总页数”、“页码按钮”和“翻页按钮”3部分组成。结构与视觉效果如下图，颜色可根据页面配色作调整：注意事项： 1. 翻页控件放置在内容区的右下角； 2. 当处于第一页时，不显示“上一页”，处于最末页时，不显示“下一页”。钱包基本资源文件引用 CSS文件 JavaScript文件外部应用嵌入 Frame嵌入 crumb=’ + encodeURIComponent(应用名称)&url=’ + encodeURIComponent(应用URL) 外部应用跳转 + encodeURIComponent(支付中心跳转URL) 支付中心跳转 + encodeURIComponent(支付中心跳转URL) 注：应用标识和跳转位置标识需要配置。如果不匹配，直接跳转到钱包首页。页面Javascript接口原生对象扩散接口接口名称说明其它 String.prototype.cut(size) 截取字符串 “aaa”.cut(2) String.prototype.cut(size) 截取字符串 “aaa”.cut(2) String.prototype.startsWith(prefix,offset) 匹配字符串是否以prefix开头 String.prototype.endsWith(suffix) 匹配字符串是否以suffix结尾 String.prototype.replaceAll(regexp, replacement) 替换所有匹配的字符/字符串 String.prototype.replaceFirst(regexp, replacement) 替换第一次匹配的字符/字符串 String.prototype.trim() 去空字符 String.prototype.leftTrim() 去左空字符 String.prototype.rightTrim() 去右空字符 String.prototype.bothTrim() 去两侧空字符 String.prototype.size() 字符串长度，将中文看成两个字符计算 String.prototype.replaceHTML() 替换HTML标签 String.prototype.fillBefore(chr, bit) 前导填充 “123”.fillBefore(“05)//00123 String.prototype.fillAfter(chr, bit) 向后填充 String.prototype.toCurrency(bit) 转换成货币格式 “123456”.toCurrency()//123,456.00 String.prototype.toNumber(bit, splitChar) 转换成数字 “123,456.00”.toNumber(0, “,”) String.prototype.format(param) 格式化，用于模板替换 var o = {text:”world”};var str = “hello $text”;str = str.format(o)//hello world Date.prototype.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-18 Date.prototype.parseDate (str, fmt) 将字符串解析成日期对象 Date.prototype.validDate (str, fmt) 校验字符串是否为日期格式 Date.prototype.leapYear() 判断是否是闰年 @return 集合(是否是闰年，各月份的天数集，当前月的天数) { isLeapYear, days, yearDays, monthDays } Date.prototype.dateDiff (interval, date) 日期比较 * @param interval 间隔参数 * y 年 * q 季度 * n 月 * d 日 * w 周 * h 小时 * m 分钟 * s 秒 * i 毫秒 * @param date 比较日期 Date.prototype.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() 获取小钱包cookie{uin,key,qluin,qlskey} Wallet. is_cft_user() 是否是财付通用户 Wallet. getNodeValue(xml, xmlDoc, xpath) 获取XML节点的值 Wallet. doForm(url, target, method, params, isAutoSubmit) 动态表单 Wallet. redirect(url) 重定向，钱包带登录态跳转到pay.qq Wallet. redirectTo(url, inWallet, isFlush) 重定向，钱包带登录态跳转到财付通主站 @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) 创建IFRAME @param String _id iframe的id @param String _src 需要加载的地址 @param String css 附加样式 @return Object ifr iframe对象 Wallet. getTipsInfo (id) 从HTML节点获取提示信息 @param String id 节点ID @return String 提示信息，否则为null Wallet. getFormElement (formName, name) 获取表单元素 @param String formName 表单名 @param String name 元素名 @param Object element/null Wallet. dispatchEvent (target, eventType, datatype, data) 事件分发 @param String|Object target 节点ID/节点 @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) 动态加载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) 创建浮层 @param String id 浮动层ID @param String pos 创建位置 @param Object button {text,width,left,top,arrow,closer} @param Object panel {title,content,width,height,left,top,closer,auto,mask} layer. setButtonText (id, text) 设置按钮文字 @param String id 浮动层ID @param String text 文字 layer. setPanelText (id, text) 设置面板内容 @param String id 浮动层ID @param String text 内容分页接口接口名称方法名说明 PageBar PageBar() 构建一个新的PageBar对象。 Object pageInfo 分页信息。 Object getPageInfo() 获取分页信息。 void init(Object pageInfo) 初始化分页栏。 Object getPageInfo() //获取分页信息。参数：返回：分页信息（对象集） { int recordcount 记录数 Array positions = 分页栏显示区域 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 = 分页栏显示区域 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

展开阅读全文