forked from greedying/tctip
-
Notifications
You must be signed in to change notification settings - Fork 14
/
sample.html
80 lines (75 loc) · 4.18 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="打赏" />
<meta name="description" content="打赏" />
<link type="text/css" rel="stylesheet" href="css/myRewards.css">
<title>打赏</title>
</head>
<body>
<a href="https://github.com/greedying/tctip" target=_blank>原Github地址</a>
<a href="https://github.com/HaddyYang/tctip" target=_blank>本项目Github地址</a>
<p>对原来作者项目调整如下：</p>
<ol>
<li>调整样式</li>
<li>去掉二维码生成代码部分，直接采用原作者的二维码图片功能</li>
<li>去掉静态文件的相对路径设置，直接使用静态文件的路径</li>
<li>去掉图片设置的样式，采用css，减小插件的大小</li>
<br>
<li>添加公告栏形式的内容(支持html代码)</li>
<li>添加侧边栏文本可配置项</li>
<li>添加侧边栏文本背景颜色可配置项</li>
<li>添加侧边栏文本高度可配置项</li>
<li>添加最上面文本可配置项</li>
<li>添加整个侧边栏高度可配置项</li>
<li>添加底部文字和链接可配置项</li>
<li>为了兼容移动端，右上角加了收起按钮</li>
</ol>
<p>简而言之，简化、优化并添加配置项</p>
<script>
window.tctipConfig = {
//最上面的文字
headText: "欢迎打赏支持我 ^_^",
//侧边栏文本
siderText: "公告 & 打赏",
//侧边栏文本高度调整
siderTextTop: "-72px",
//侧边栏背景颜色
siderBgcolor: "#323d45",
//整个侧边栏的高度设置可以px，em，或百分比
siderTop:"118px",
//底部文字
buttomText:"了解更多",
//底部文字链接
buttomLink:"https://github.com/haddyyang/tctip",
/**
list规定打赏的方式，list有几个元素，代表有几种打赏方式,最多五种。
分别解释如下:
key: 为一个英文,用户可随意定义
icon:
左侧icon图标的url,可以传入相对路径，此时会根据imagePrefix或者staticPrefix进行路径修正。
如果传入绝对路径，则直接展示，不进行路径修正。
如果key是默认值，且用户没有传入icon,则使用系统自带icon。
name:
支付方式的名称，用于左侧tab展示的说明。name可以使用系统默认值；如果没有系统默认值，则需要用户传入
desc:
支付方式更纤细说明，用于二维码下方说明文字,建议不超过五个字。当desc为空的时候，系统使用默认值，如果没有默认值，则使用name字段
text:
长文本内容（和qrimg不能同时使用，一般可用于写公告内容）
qrimg:
当用户没有支付方式账号的时候，可以直接传入二维码图片；比如用户可以上传微信面对面收钱的二维码图片到服务器，然后将图片的url作为qrimg字段传入。此时二维码下方只展示desc字段，不展示account.
当用户同时传入qrimg和accounts时候，以qrimg为准。
className:
className可以为空，或者传入myR-on；默认显示项。
**/
list:{
notice: {icon: "img/icon/tip.png", name:"公告栏", className:"myR-on", text: '这是公告内容,这是公告内容,这是公告内容,这是公告内容<br><b style="color:red;">这是公告内容</b>,这是公告内容,这是公告内容'},
alipay: {icon: "img/icon/alipay.png", name:"支付宝", desc: "给原项目作者“tctip”\n用支付宝打赏", qrimg: "img/qr/alipayqr.png"},
weixin: {icon: "img/icon/weixin.png", name:"微信", desc: "给该项目作者“仕航”\n用微信打赏", qrimg: "img/qr/weixin.jpg"}
}
};
</script>
<script src="js/tctip.min.js"></script>
</body>
</html>