Giter Club home page Giter Club logo

tctip's Introduction

tctip打赏插件

tctip是什么

tctip是一个js插件,作用是在web网页右侧生成一个打赏浮动窗
可下载后到demo目录查看效果

tctip当前版本

  • 当前大版本为 1.x.x此版本为大版本变动,不兼容老版,请使用当前版本
  • 当前小版本请查看package中的版本号,尽量使用最新版本
  • 历史版本为0.1已不再维护,不再维护,如有需求,点此切换

当前版本特点

  • 界面暂时维持不变
  • 参数配置和使用方式不兼容老版本
  • 只需引入一个js文件,不需要额外引入js、css等
  • 同时支持umdwebpack等方法使用

demo

  • 您可以到demo目录查看简单demo
  • 在线demo,则点此查看

使用方法

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

第一步,引入js

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

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

第二步,新建tctip变量,同时传入配置参数,然后运行init函数

  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()

刷新页面,即可看到效果

webpack 方式使用

第一步,安装

  npm install tctip --save

第二步,引入包

  import tctip from 'tctip'

第三步,传参使用,类似web方式

  new tctip(config).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
    • 含义: 是否上报,用于作者统计使用者
    • 备注: 本参数只是方便作者统计插件使用情况,可视情况关闭

技术栈

  • webpack
  • qrcode
  • es6
  • 其他技术

感谢与参考

案例收集

您可以点此填写,我会定期整理
您也可以直接clone项目,提交PR
下面是部分使用的网站,排序方式为随机,筛选标准为网站和文章质量
本名单随时更改,可能添加,也可能移除

独立网站

cnblogs 博客

网友修改后使用版本(PS,欢迎PR)

qq群

  • qq群号:188087193
  • 验证消息: github

改进与完善

欢迎提issue,欢迎PR

tctip's People

Contributors

greedying avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tctip's Issues

top 是否可以自定义

.myRewards {position:fixed; _position:absolute; right:0; top:10%; z-index:10000; padding-left:34px; width:0px; overflow:hidden; box-sizing: content-box;}

v1.0即将发布

本次发布主要是使用webpack+es6重写了整个插件,页面展示暂时没有变化。
主要特点如下

  • 使用webpack + es6方式重写整个代码
  • ·简化参数,提升了易用性
  • 增加top参数,自定义插件的上下位置

请注意,本次变更为大版本号,并不兼容之前的版本

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.