tctip打赏小插件

tctip是一个js插件,作用是在web网页右侧生成一个打赏浮动窗

使用方法

页面使用(多数人的使用方式)

插件下载地址

第一步,引入js

一般引入min版本,即引入tctip-版本号.min.js文件
在当前项目中即dist/tctip-1.0.3.min.js

  • 您可以把此js文件下载到您的服务器合适目录进行引用
  • 您也可以直接使用我提供的静态链接http(s)://static.tctip.com/tctip-1.0.3.min.js
  <script src="//static.tctip.com/tctip-1.0.3.min.js"></script>

第二步,新建tctip变量,同时传入配置参数,然后运行init函数(将这段变量放置到js部分的最后一段)

  new tctip({
    top: '20%', button: { id: 9, type: 'dashang', }, list: [ { type: 'alipay', qrImg: './images/alipay.jpg' }, { type: 'wechat', qrImg: './images/wechat.jpg' }, { type: 'bitcoin', qrContent: '1PhQySHF1ZuoRwoZ8G4CDLEtE6fAnD3GJP' } ] }).init()


参数说明

  • top

    • 类型: String
    • 默认值10%
    • 含义: 插件顶端距离页面最上面的距离
    • 备注: 格式如 100px或者10%
  • button

    • 类型: Object,包含idtype两个子数组
    • id:
      • 类型: Number
      • 默认值1
      • 含义: 代表图片颜色
      • 备注: 取值范围为1-9
    • type:
      • 类型: String
      • 默认值dashang
      • 含义: 按钮上的汉字,有打赏赞助两种
      • 备注: 只能取dashang或者zanzhu
  • list

    • 类型: Array
    • 默认值: []
    • 含义: 重点配置,右侧打赏显示,不能为空
    • 备注: 一个数组,最多传入五个元素,每个元素又有如下几项陪配置
    • type:
      • 类型: String
      • 默认值: 无
      • 含义: 打赏类型
      • 备注: 系统自带四种默认type,alipay,wechat,bitcon,tenpay,如果不是这四种,可以随意写
    • qrImg:
      • 类型: String
      • 默认值: 无
      • 含义: 二维码图片地址
      • 备注: 尽量裁剪图片周边的空白。重要但是非必传
    • qrContent:
      • 类型: String
      • 默认值: 无
      • 含义: 二维码内容
      • 备注: 和qrImg二者必须传一个。如果传入本参数,插件自动生成二维码
    • icon:
      • 类型: String
      • 默认值: 无
      • 含义: 图标,列入支付宝图标
      • 备注: 当type为系统默认四种之一时,本参数可省略
    • name:
      • 类型: String
      • 默认值: 无
      • 含义: 支付名称,例如支付宝、微信等
      • 备注: 当type为系统默认四种之一时,本参数可省略
    • desc:
      • 类型: String
      • 默认值: 无
      • 含义: 二维码下面的一句短语,类似大爷行行好之类的
      • 备注: 当type为系统默认四种之一时,本参数可省略
  • stat

    • 类型: Boolean
    • 默认值: true
    • 含义: 是否上报,用于作者统计使用者
    • 备注: 本参数只是方便作者统计插件使用情况,可视情况关闭

本文转自https://github.com/greedying/tctip 如有侵权请联系Mr.xu

猜你喜欢

转载自www.cnblogs.com/MrxuGang/p/10050949.html