注：本分非原創；信息來源 oschina
授權協議:MIT
開發語言:JavaScript
操作系統:跨平台
軟件作者:同一種調調
iNotify.js 詳細介紹
JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知。
下載
1 $ npm install title-notify --save-dev 2 $ bower install inotify --save-dev
編譯
1 # 下載依賴工具 2 $ npm install 3 # 壓縮inotify 4 $ npm build
init
effect: flash | scroll | favicon
1 var iNotify = new iNotify().init() 2 //推薦下面寫法 3 var iNotify = new iNotify({ 4 message: '有消息了。',//標題 5 effect: 'flash', // flash | scroll 閃爍還是滾動 6 openurl:"http://www.bing.com", // 點擊彈窗打開連接地址 7 onclick:function(){ //點擊彈出的窗之行事件 8 console.log("---") 9 }, 10 //可選播放聲音 11 audio:{ 12 //可以使用數組傳多種格式的聲音文件 13 file: ['msg.mp4','msg.mp3','msg.wav'] 14 //下面也是可以的哦 15 //file: 'msg.mp4' 16 }, 17 //標題閃爍，或者滾動速度 18 interval: 1000, 19 //可選，默認綠底白字的 Favicon 20 updateFavicon:{ 21 // favicon 字體顏色 22 textColor: "#fff", 23 //背景顏色，設置背景顏色透明，將值設置為“transparent” 24 backgroundColor: "#2F9A00" 25 }, 26 //可選chrome瀏覽器通知，默認不填寫就是下面的內容 27 notification:{ 28 title:"通知！",//設置標題 29 icon:"",//設置圖標 icon 默認為 Favicon 30 body:'您來了一條新消息'//設置消息內容 31 } 32 })
isPermission
判斷瀏覽器彈框通知是否被阻止。
1 iNotify.isPermission()
聲音設置
player
播放聲音
1 iNotify.player()
loopPlay
自動播放聲音
1 iNotify.loopPlay()
stopPlay
停止播放聲音
1 iNotify.stopPlay()
setURL
設置播放聲音URL
1 iNotify.setURL('msg.mp3')// 設置一個 2 iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 設置多個
title通知
1 最新的版本默認不播放標題閃爍動畫，初始化之后需要調用 setTitle(true) 方法才播放標題動畫。
setTitle
設置標題，
1 iNotify.setTitle(true)//播放動畫 2 iNotify.setTitle('新標題')//閃爍新標題 3 iNotify.setTitle()//清除閃爍 顯示原來的標題
setInterval
設置時間間隔
1 iNotify.setInterval(2000)
addTimer
添加計數器
1 iNotify.addTimer()
clearTimer
清除計數器
1 2 iNotify.clearTimer() 3
favicon通知
setFavicon
設置icon 顯示數字
1 2 iNotify.setFavicon(10) 3
faviconClear
1 清除數字顯示原來的icon 2 iNotify.faviconClear() 3
chrome通知
notify
1 彈出chrome通知，不傳參數為預設值... 2 iNotify.notify(); 3 iNotify.notify({ 4 title:"新通知", 5 body:"打雷啦，下雨啦...", 6 openurl:"http://www.bing.com", 7 onclick:function(){ 8 console.log("---") 9 } 10 }); 11
其它
1 iNotify.init().title; 獲取標題
例子
1 new iNotify({ 2 effect: 'flash', 3 interval: 500 4 }) 5 6 上面的例子跟下面的是一樣的 7 new iNotify().init({ 8 effect: 'flash', 9 interval: 500 10 }); 11
實例一
1 function iconNotify(num){ 2 if(!notify) { 3 var notify = new iNotify().init({ 4 effect: 'flash', 5 interval: 500 6 }); 7 } 8 if(num===0){ 9 notify.faviconClear() 10 notify.setTitle(); 11 }else if(num<100){ 12 notify.setFavicon(num) 13 notify.setTitle("有新消息！"); 14 }else if(num>99){ 15 notify.setFavicon('..') 16 notify.setTitle("有新消息！"); 17 } 18 }
實例二
1 var notify = new iNotify().init({ 2 effect: 'flash', 3 interval: 500 4 }); 5 notify.setFavicon("1")
實例三
1 var iN = new iNotify().init({ 2 effect: 'flash', 3 interval: 500, 4 message:"有消息拉！", 5 updateFavicon:{//可選，默認綠底白字 6 textColor: "#fff",// favicon 字體顏色 7 backgroundColor: "#2F9A00" //背景顏色 8 } 9 }).setFavicon(10);
實例四
1 var iN = new iNotify().init().setFavicon(5);
實例五
1 var iN = new iNotify().init({ 2 effect: 'flash', 3 interval: 500, 4 message:"有消息拉！", 5 audio:{ 6 file: 'msg.mp4' 7 } 8 }).setFavicon(10).player();
實例五
1 var iN = new iNotify().init({ 2 effect: 'flash', 3 interval: 500, 4 message:"有消息拉！", 5 audio:{ 6 file: 'msg.mp4'//可以使用數組傳多種格式的聲音文件 7 }, 8 notification:{ 9 title:"通知！", 10 icon:"", 11 body:'您來了一條新消息' 12 } 13 }).setFavicon(10).player(); 14 15 //彈出chrome通知，不傳參數為預設值... 16 iN.notify(); 17 18 iN.notify({ 19 title:"新通知", 20 body:"打雷啦，下雨啦..." 21 });
實例六
1 var iN = new iNotify({ 2 effect: 'flash', 3 interval: 500, 4 message:"有消息拉！", 5 audio:{ 6 file: ['msg.mp4','msg.mp3','msg.wav'] 7 }, 8 notification:{ 9 title:"通知！", 10 body:'您來了一條新消息' 11 } 12 }) 13 14 15 iN.setFavicon(10).player(); 16 17 var n = new iNotify() 18 n.init({ 19 effect: 'flash', 20 interval: 500, 21 message:"有消息拉！", 22 audio:{ 23 file: ['openSub.mp4','openSub.mp3','openSub.wav'] 24 }, 25 notification:{ 26 title:"通知！", 27 icon:"", 28 body:'您來了一個客戶' 29 } 30 }) 31 32 n.setFavicon(10).player();
| JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、通知，沒有依賴。https://github.com/jaywcjlove/iNotify
|
