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

设计规范
布局与排版
布局：
整体结构主要由全局导航区、应用标题区和内容区3部分组成，尺寸分别如下：

其中绿色区域为应用网页的最大面积，超出该尺寸，页面将会显示不完整（不会出现滚动条）。
蓝色区域可以通过开放平台后台编辑。
页面基本结构代码如下：

财付通-我的钱包 v4.0

/html>
栅格系统
内容区的版块尺寸宽度需要遵循以下栅格系统，页面内容距离边框10像素，版块之间的横向距离为12像素，纵向距离为10像素，共有四种方案可选：
第一种，每个版块最小宽度为80像素：

第二种，每个版块最小宽度为126像素：

第三种，每个版块最小宽度为172像素：

第四种，每个版块最小宽度为264像素：

版式示例：
第一种栅格系统的版式：

第二种栅格系统的版式：

应用图标
尺寸
大图标的标准尺寸为59×59像素，用于“我的钱包”首页和版权信息页面显示。
小图标的标准尺寸为18×18像素。用于“我的钱包”内部页面显示。
设计模板下载及使用方法
设计模板为PSD文件，点击这里进行下载：大图标  小图标。
具体操作方法为：
1.用Photoshop CS4或以上版本将图标源文件打开；
2.双击图层面板中“背景”图层前面的色块，进行颜色选择；

3.将图标元素放入“空白层”里，“示例”图层需要删掉；
4.图标保存为PNG格式。
色彩
常用的主体色彩为蓝色、橘色、绿色和浅灰色等。如图所示：

禁止使用纯黑、纯白以及饱和度过高的颜色。
建议与禁忌
建议采用简洁达意的图形符号。
建议大图标里的图形边缘使用圆角。
不可使用与现有应用过于相似的图标。
禁止使用易产生功能误导的图形，譬如：房子（代表主页齿轮（代表设置）、箭头（代表方向）等。
禁止使用涉及版权纠纷的图片元素，譬如他人的商标或产品。
通用图标
css调用地址：
JS调用地址：
图标
结构示例/描述

结构示例：

结构示例：

结构示例：

结构示例：

结构示例：

结构示例：
在白色背景下：
pan class=”icon small-d”>
在黄色背景下：

在蓝色背景下：

结构示例：
在白色背景下：

在黄色背景下：

在蓝色背景下：

结构示例：
在白色背景下：

在黄色背景下：

在蓝色背景下：

结构示例：
在白色背景下：

在黄色背景下：

在蓝色背景下：

结构示例：
在白色背景下：

在黄色背景下：

在蓝色背景下：

结构示例：
默认：
开始允值
长按钮：
我是一个超长的按钮

<span class=” new-flag”>

跳出钱包标识（新开窗口）

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引用：

html结构：
hidefocus="hidefocus">Q币Q点开通位置调整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.formaty-%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