Tinycon 浏览器的网站图标上显示冒泡的数字

Question

Tinycon 是一个轻量级的插件，可在浏览器的网站图标上显示冒泡的数字，支持 Chrome 和 Firefox 浏览器。这个效果非常的炫酷，能够在醒目的位置显示用户通知。

对于不支持 HTML Canvas 画布的浏览器，Tinycon 将什么都不显示，对用户没有任何影响，Tinycon 添加单个对象的全局命名空间，不需要初始化。

安装

这是发表在 NPM Tinycon 几个版本，不幸的是他们都不由我控制，不跟踪头。最好的办法是安装从 GitHub 上直接切出的中间人！

npm install tommoor/tinycon --save

基本使用

在 <Script> 标签里面直接调用 setBubble() 方法，就像下面的代码：

Tinycon.setBubble(6);

可选参数

Tinycon 可采取一系列选项来定制外观

• width: the width of the alert bubble
• height: the height of the alert bubble
• font: a css string to use for the fontface (recommended to leave this)
• color: the foreground font color
• background: the alert bubble background color
• fallback: should we fallback to a number in brackets for browsers that don't support canvas/dynamic favicons? Boolean, or use the string 'force' to ensure a title update even in supported browsers.
• abbreviate: should tinycon shrink large numbers such as 1000 to an abbreviated version (1k). Boolean, defaults to true

Tinycon.setOptions({
  width: 7,
  height: 9,
  font: '10px arial',
  color: '#ffffff',
  background: '#549A2F',
  fallback: true
});

AMD 支持

Tinycon 也可以被用来作为一个异步模块。

require([
  'tinycon.js'
], function (T) {

  T.setOptions({
    width: 7,
    height: 9,
    font: '10px arial',
    color: '#ffffff',
    background: '#549A2F',
    fallback: true
  });

  T.setBubble(7);

});

浏览器支持

Tinycon 已经过测试，在浏览器的全部工作。旧版本可以得到支持，但还没有被测试过：

• Chrome 15+
• Firefox 9+
• Opera 11+

目前回退为标题更新：

• Internet Explorer 9
• Safari 5

相关链接

• 项目地址：http://blog.tommoor.com/tinycon/
• Github地址：https://github.com/tommoor/tinycon
• 在线示例：https://www.wenjiangs.com/runcode?slug=LR0qBfRE