Tinycon 浏览器的网站图标上显示冒泡的数字 - 资源分享

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

发布于 2019-12-25 字数 2803 浏览 1266 评论 0

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

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

对于不支持 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

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0