iNotify.js主要是调用Chrome、Firefox、Safari等浏览器提供的系统通知API,实现浏览器系统通知,实现title标签闪烁、滚动、声音提示。favico图标数字信息通知,声音播放等.....
例子Demo预览,文档中找哦
下载# v2.x$ pm istall @wcjiag/otify --save# v1.x $ pm istall title-otify --save使用import Notify from '@wcjiag/otify';cost otify = ew Notify({ message: '有消息了。', // 标题 effect: 'flash', // flash | scroll 闪烁还是滚动 opeurl:'https://github.com/jaywcjlove/iNotify', // 点击弹窗打开连接地址 oclick: () => { // 点击弹出的窗之行事件 cosole.log('---') }, // 可选播放声音 audio:{ // 可以使用数组传多种格式的声音文件 file: ['msg.mp4','msg.mp3','msg.wav'] // 下面也是可以的哦 // file: 'msg.mp4' }, // 标题闪烁,或者滚动速度 iterval: 1000, // 可选,默认绿底白字的 Favico updateFavico:{ // favico 字体颜色 textColor: '#fff', // 背景颜色,设置背景颜色透明,将值设置为“trasparet” backgroudColor: '#2F9A00' }, // 可选chrome浏览器通知,默认不填写就是下面的内容 otificatio:{ title:'通知!', // 设置标题 ico:'', // 设置图标 ico 默认为 Favico body:'您来了一条新消息', // 设置消息内容 }});otify.player();
在您的HTML中手动下载并引入 otify.js,你也可以通过 UNPKG 进行下载:
var otify = ew Notify({ effect: 'flash', iterval: 500,});otify.setFavico('1');optiomessage:Strig标题
effect:Strig,flash|scroll|favico闪烁还是滚动
audio:可选播放声音
file:Strig/Array可以使用数组传多种格式的声音文件
iterval:Number标题闪烁,或者滚动速度
opeurl:Strig点击弹窗打开连接地址
oclick:Fuctio弹窗点击事件
updateFavico:设置Favico图标颜色
textColor:设置favico字体颜色
backgroudColor:背景颜色,设置背景颜色透明,将值设置为 trasparet
otificatio:可选chrome浏览器通知,默认不填写就是下面的内容
title:默认值 通知!
ico:设置图标ico默认为Favico
body:设置消息内容
isPermissio判断浏览器弹框通知是否被阻止。
iNotify.isPermissio()声音设置player播放声音
iNotify.player()loopPlay自动播放声音
iNotify.loopPlay()stopPlay停止播放声音
iNotify.stopPlay()setURL设置播放声音URL
iNotify.setURL('msg.mp3') // 设置一个iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个title最新的版本默认不播放标题闪烁动画,初始化之后需要调用 setTitle(true) 方法才播放标题动画。
setTitle设置标题,
iNotify.setTitle(true) // 播放动画iNotify.setTitle('新标题') // 闪烁新标题iNotify.setTitle() // 清除闪烁 显示原来的标题setIterval设置时间间隔
iNotify.setIterval(2000)addTimer添加计数器
iNotify.addTimer()clearTimer清除计数器
iNotify.clearTimer()favico通知setFavico设置ico显示数字或者文本
iNotify.setFavico(10)setFavicoColor设置ico显示文本颜色
iNotify.setFavicoColor('#0043ff')setFavicoBackgroudColor设置ico显示文本颜色
iNotify.setFavicoBackgroudColor('#0043ff')// 设置字体和背景颜色iNotify.setFavicoColor('#f5ff00').setFavicoBackgroudColor('red');favicoClear清除数字显示原来的ico
iNotify.favicoClear()chrome通知otify弹出chrome通知,不传参数为预设值...
iNotify.otify(); iNotify.otify({ title: '新通知', body: '打雷啦,下雨啦...', opeurl: 'https://www.big.com', oclick: fuctio() { cosole.log('o click') }, oshow: fuctio() { cosole.log('o show') },});title一定会被显示的通知标题。
dir文字的方向;它的值可以是auto(自动),ltr(从左到右),orrtl(从右到左)。
ico一个图片的URL,将被用于显示通知的图标。
body通知中额外显示的字符串。
opeurl点击打开指定URL。
oclick每当用户点击通知时被触发。
oshow当通知显示的时候被触发。
oerror每当通知遇到错误时被触发。
oclose当用户关闭通知时被触发。
其它iNotify.iit().title; 获取标题
例子实例一fuctio icoNotify(um){ if(!otify) { var otify = ew Notify({ effect: 'flash', iterval: 500 }); } if(um===0){ otify.favicoClear() otify.setTitle(); } else if (um < 100){ otify.setFavico(um) otify.setTitle('有新消息!'); } else if (um > 99){ otify.setFavico('..') otify.setTitle('有新消息!'); }}实例二var otify = ew Notify({ effect: 'flash', iterval: 500,});otify.setFavico('1');实例三var iN = ew Notify({ effect: 'flash', iterval: 500, message: '有消息拉!', updateFavico:{ // 可选,默认绿底白字 textColor: '#fff',// favico 字体颜色 backgroudColor: '#2F9A00', // 背景颜色 }}).setFavico(10);实例四var iN = ew Notify().setFavico(5);实例五var iN = ew Notify({ effect: 'flash', iterval: 500, message: "有消息拉!", audio:{ file: 'msg.mp4', }}).setFavico(10).player();实例五var iN = ew Notify({ effect: 'flash', iterval: 500, message: '有消息拉!', audio:{ file: 'msg.mp4'//可以使用数组传多种格式的声音文件 }, otificatio:{ title: '通知!', ico: '', body: '您来了一条新消息' }}).setFavico(10).player();//弹出chrome通知,不传参数为预设值...iN.otify(); iN.otify({ title: '新通知', body: '打雷啦,下雨啦...'});实例六var iN = ew Notify({ effect: 'flash', iterval: 500, message: '有消息拉!', audio:{ file: ['msg.mp4', 'msg.mp3', 'msg.wav'] }, otificatio:{ title: '通知!', body:'您来了一条新消息' }})iN.setFavico(10).player();var = ew Notify().iit({ effect: 'flash', iterval: 500, message: '有消息拉!', audio:{ file: ['opeSub.mp4', 'opeSub.mp3', 'opeSub.wav'], }, otificatio:{ title:'通知!', ico: '', body:'您来了一个客户', }}).setFavico(10).player();
评论