forked from greedying/tctip
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
116 lines (101 loc) · 4.92 KB
/
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="打赏" />
<meta name="description" content="打赏" />
<title>打赏</title>
</head>
<body>
<script>
window.tctipConfig = {
//图片路径前缀，用来修订图片相对路径,默认为""
imagePrefix: "",
//css路径前缀，用来修订css相对路径,默认为""
cssPrefix: "",
/**
静态文件相对路径。当staticPrefix存在的时候,
优先使用staticPrefix,此时imagePrefix和cssPrefix失效
推荐使用下面的staticPrefix，此时将使用作者服务器的静态资源，使用者不需要下载图片和css资源到自己服务器
**/
staticPrefix: "http://static.tctip.com",
/***
左侧分享按钮的id,使用的图片为 tab_id.png
这里为了展示效果，随机选择一张图片
请实际使用的时候，选择适合的颜色，例如
buttonImageId: 3,
**/
buttonImageId: Math.ceil(Math.random()*8) + 1,
/****
左侧按钮上的文字，目前有两个选项，打赏，或者赞助,传入拼音即可
**/
buttonTip: "dashang", //或者 zanzhu
/****
list规定打赏的方式，list有几个元素，代表有几种打赏方式,最多五种，用户传入的支付方式多于五种，多出部分将会被忽略
一个完整的list元素例子如下
'key' : {icon: "img/alipay.png", name:"支付宝", desc: "支付宝打赏", className: "", qrimg: "", account:""},
分别解释如下:
key:
为一个英文下标,用户可随意定义;key有六种默认值，分别为 alipay, tenpay, weixin, bitcoin,litecoin,dogecoin,当key为默认值
的时候，插件默认规定了icon, name,desc的默认值;
icon:
左侧icon图标的url,可以传入相对路径，此时会根据imagePrefix或者staticPrefix进行路径修正。
如果传入绝对路径，则直接展示，不进行路径修正。
如果key是默认值，且用户没有传入icon,则使用系统自带icon。
name:
支付方式的名称，用于左侧tab展示的说明。name可以使用系统默认值；如果没有系统默认值，则需要用户传入
desc:
支付方式更纤细说明，用于二维码下方说明文字,建议不超过五个字。当desc为空的时候，系统使用默认值，如果没有默认值，则使用name字段
account:
支付方式账号,例如支付宝账号或者比特币地址等。用于生成二维码,并同时在二维码下方的desc之下以文字形式展示,方便打赏的人直接复制账号而非以二维码形式打赏;
account没有系统默认值
qrimg:
当用户没有支付方式账号的时候，可以直接传入二维码图片；比如用户可以上传微信面对面收钱的二维码图片到服务器，然后将图片的url作为qrimg字段传入。此时二维码下方只展示desc字段，不展示account.
当用户同时传入qrimg和accounts时候，以qrimg为准。
className:
className可以为空，或者传入myR-on；当用户传入myR-on的时候，右侧二维码默认展示当前支付方式；否则默认展示第一种支付方式。
**/
list:{
/**使用系统默认支付方式，传入account**/
bitcoin: { account: "1PhQySHF1ZuoRwoZ8G4CDLEtE6fAnD3GJP"},
/**使用系统默认支付方式，传入的qrimg为支付宝收款二维码**/
alipay: { qrimg: "http://tctip.com/img/alipayqr.png"},
/**使用系统默认支付方式，传入qrimg**/
weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"},
/**使用自定义支付方式，传入account,并默认展示**/
tenpay: { account: "342285717", className:"myR-on"},
/**使用自定义支付方式，传入icon,name,account**/
another:{icon: "img/litecoin.png", name: "莱特币", className: "", account: "LVCSBrv3ikzZWDtm9v8QPvDvLwn7dcsCEa", desc: "自定义莱特币"}
}
};
</script>
<script src="js/tctip.min.js"></script>
<!--
可以使用作者提供的资源，此时不需要下载js文件到使用者服务器*
<script src="http://static.tctip.com/js/tctip.min.js"></script>
-->
<!--
如果不引用压缩js，需要替换为以下两个js
<script src="js/qrcode.js"></script>
<script src="js/tctip.js"></script>
-->
<!--- 以上所有js代码，建议放到 </body>之前
一份去掉注释，比较简洁的配置如下所示
使用者使用以下配置，只需要传入实际的支付宝和微信qrimg，
而不需要下载任何文件
//开始
window.tctipConfig = {
staticPrefix: "http://static.tctip.com",
buttonImageId: 5,
buttonTip: "zanzhu",
list:{
alipay: { qrimg: "http://tctip.com/img/alipayqr.png"},
weixin: { qrimg: "http://littlebtc.com/images/yeshen.png"},
}
};
</script>
<script src="http://static.tctip.com/js/tctip.min.js"></script>
//结束
-->
</body>
</html>