1 | <p align="center">
|
2 | <a href="https://jaywcjlove.github.io/iNotify">
|
3 | <img alt="iNotify 实例预览" src="https://github.com/jaywcjlove/iNotify/blob/master/website/assets/iNotify.png?raw=true">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <p align="center">
|
8 | <a href="https://github.com/jaywcjlove/iNotify/issues">
|
9 | <img src="https://img.shields.io/github/issues/jaywcjlove/iNotify.svg">
|
10 | </a>
|
11 | <a href="https://github.com/jaywcjlove/iNotify/network">
|
12 | <img src="https://img.shields.io/github/forks/jaywcjlove/iNotify.svg">
|
13 | </a>
|
14 | <a href="https://github.com/jaywcjlove/iNotify/stargazers">
|
15 | <img src="https://img.shields.io/github/stars/jaywcjlove/iNotify.svg">
|
16 | </a>
|
17 | <a href="https://github.com/jaywcjlove/iNotify/releases">
|
18 | <img src="https://img.shields.io/github/release/jaywcjlove/iNotify.svg">
|
19 | </a>
|
20 | <a href="https://www.npmjs.com/package/@wcjiang/notify">
|
21 | <img src="https://img.shields.io/npm/v/@wcjiang/notify.svg">
|
22 | </a>
|
23 | </p>
|
24 |
|
25 | JS 实现浏览器的 title 闪烁、滚动、声音提示、通知,没有依赖. 它不会干扰任何JavaScript库或框架。有合理的体积 5.05kb (gzipped: 1.75kb),官方文档[实例预览](https://jaywcjlove.github.io/iNotify)。
|
26 |
|
27 | ## 下载
|
28 |
|
29 | ```bash
|
30 | # v2.x
|
31 | $ npm install @wcjiang/notify --save
|
32 | # v1.x
|
33 | $ npm install title-notify --save
|
34 | ```
|
35 |
|
36 | ## 使用
|
37 |
|
38 | ```js
|
39 | import Notify from '@wcjiang/notify';
|
40 |
|
41 | const notify = new Notify({
|
42 | message: '有消息了。', // 标题
|
43 | effect: 'flash', // flash | scroll 闪烁还是滚动
|
44 | openurl:'https://github.com/jaywcjlove/iNotify', // 点击弹窗打开连接地址
|
45 | onclick: () => { // 点击弹出的窗之行事件
|
46 | console.log('---')
|
47 | },
|
48 | // 可选播放声音
|
49 | audio:{
|
50 | // 可以使用数组传多种格式的声音文件
|
51 | file: ['msg.mp4','msg.mp3','msg.wav']
|
52 | // 下面也是可以的哦
|
53 | // file: 'msg.mp4'
|
54 | },
|
55 | // 标题闪烁,或者滚动速度
|
56 | interval: 1000,
|
57 | // 可选,默认绿底白字的 Favicon
|
58 | updateFavicon:{
|
59 | // favicon 字体颜色
|
60 | textColor: '#fff',
|
61 | // 背景颜色,设置背景颜色透明,将值设置为“transparent”
|
62 | backgroundColor: '#2F9A00'
|
63 | },
|
64 | // 可选chrome浏览器通知,默认不填写就是下面的内容
|
65 | notification:{
|
66 | title:'通知!', // 设置标题
|
67 | icon:'', // 设置图标 icon 默认为 Favicon
|
68 | body:'您来了一条新消息', // 设置消息内容
|
69 | }
|
70 | });
|
71 |
|
72 | notify.player();
|
73 | ```
|
74 |
|
75 | 在您的HTML中手动下载并引入 **notify.js**,你也可以通过 [UNPKG](https://unpkg.com/@wcjiang/notify/dist/) 进行下载:
|
76 |
|
77 | ```html
|
78 | <script src="https://unpkg.com/@wcjiang/notify/dist/notify.min.js"></script>
|
79 | <script type="text/javascript">
|
80 | var notify = new Notify({
|
81 | effect: 'flash',
|
82 | interval: 500,
|
83 | });
|
84 | notify.setFavicon('1');
|
85 | </script>
|
86 | ```
|
87 |
|
88 | ## option
|
89 |
|
90 | - **message**: String 标题
|
91 | - **effect**: String, flash | scroll | favicon 闪烁还是滚动
|
92 | - **audio**: 可选播放声音
|
93 | - **file**: String/Array 可以使用数组传多种格式的声音文件
|
94 | - **interval**: Number 标题闪烁,或者滚动速度
|
95 | - **openurl**: String 点击弹窗打开连接地址
|
96 | - **onclick**: Function 弹窗点击事件
|
97 | - **updateFavicon**: 设置 Favicon 图标颜色
|
98 | - **textColor**: 设置 favicon 字体颜色
|
99 | - **backgroundColor**: 背景颜色,设置背景颜色透明,将值设置为 `transparent`
|
100 | - **notification**: 可选chrome浏览器通知,默认不填写就是下面的内容
|
101 | - **title**: 默认值 `通知!`
|
102 | - **icon**: 设置图标 icon 默认为 Favicon
|
103 | - **body**: 设置消息内容
|
104 |
|
105 | ## isPermission
|
106 |
|
107 | 判断浏览器弹框通知是否被阻止。
|
108 |
|
109 | ```js
|
110 | iNotify.isPermission()
|
111 | ```
|
112 |
|
113 | ## 声音设置
|
114 |
|
115 | ### player
|
116 |
|
117 | 播放声音
|
118 |
|
119 | ```js
|
120 | iNotify.player()
|
121 | ```
|
122 |
|
123 | ### loopPlay
|
124 |
|
125 | 自动播放声音
|
126 |
|
127 | ```js
|
128 | iNotify.loopPlay()
|
129 | ```
|
130 |
|
131 | ### stopPlay
|
132 |
|
133 | 停止播放声音
|
134 |
|
135 | ```js
|
136 | iNotify.stopPlay()
|
137 | ```
|
138 |
|
139 | ### setURL
|
140 |
|
141 | 设置播放声音URL
|
142 |
|
143 | ```js
|
144 | iNotify.setURL('msg.mp3') // 设置一个
|
145 | iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个
|
146 | ```
|
147 |
|
148 | ## title
|
149 |
|
150 | 最新的版本默认不播放标题闪烁动画,初始化之后需要调用 `setTitle(true)` 方法才播放标题动画。
|
151 |
|
152 | ### setTitle
|
153 |
|
154 | 设置标题,
|
155 |
|
156 | ```js
|
157 | iNotify.setTitle(true) // 播放动画
|
158 | iNotify.setTitle('新标题') // 闪烁新标题
|
159 | iNotify.setTitle() // 清除闪烁 显示原来的标题
|
160 | ```
|
161 |
|
162 |
|
163 | ### setInterval
|
164 |
|
165 | 设置时间间隔
|
166 |
|
167 | ```js
|
168 | iNotify.setInterval(2000)
|
169 | ```
|
170 |
|
171 | ### addTimer
|
172 |
|
173 | 添加计数器
|
174 |
|
175 | ```js
|
176 | iNotify.addTimer()
|
177 | ```
|
178 |
|
179 | ### clearTimer
|
180 |
|
181 | 清除计数器
|
182 |
|
183 | ```js
|
184 | iNotify.clearTimer()
|
185 | ```
|
186 |
|
187 | ## favicon通知
|
188 |
|
189 | ### setFavicon
|
190 |
|
191 | 设置 icon 显示数字或者文本
|
192 |
|
193 | ```js
|
194 | iNotify.setFavicon(10)
|
195 | ```
|
196 |
|
197 | ### setFaviconColor
|
198 |
|
199 | 设置 icon 显示文本颜色
|
200 |
|
201 | ```js
|
202 | iNotify.setFaviconColor('#0043ff')
|
203 | ```
|
204 |
|
205 | ### setFaviconBackgroundColor
|
206 |
|
207 | 设置 icon 显示文本颜色
|
208 |
|
209 | ```js
|
210 | iNotify.setFaviconBackgroundColor('#0043ff')
|
211 | // 设置字体和背景颜色
|
212 | iNotify.setFaviconColor('#f5ff00').setFaviconBackgroundColor('red');
|
213 | ```
|
214 |
|
215 | ### faviconClear
|
216 |
|
217 | 清除数字显示原来的icon
|
218 |
|
219 | ```js
|
220 | iNotify.faviconClear()
|
221 | ```
|
222 |
|
223 | ## chrome通知
|
224 |
|
225 | ### notify
|
226 |
|
227 | 弹出chrome通知,不传参数为预设值...
|
228 |
|
229 | ```js
|
230 | iNotify.notify();
|
231 | iNotify.notify({
|
232 | title: '新通知',
|
233 | body: '打雷啦,下雨啦...',
|
234 | openurl: 'http://www.bing.com',
|
235 | onclick: function() {
|
236 | console.log('on click')
|
237 | },
|
238 | onshow: function() {
|
239 | console.log('on show')
|
240 | },
|
241 | });
|
242 | ```
|
243 |
|
244 | - title 一定会被显示的通知标题。
|
245 | - dir 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)。
|
246 | - icon 一个图片的URL,将被用于显示通知的图标。
|
247 | - body 通知中额外显示的字符串。
|
248 | - openurl 点击打开指定 URL。
|
249 | - onclick 每当用户点击通知时被触发。
|
250 | - onshow 当通知显示的时候被触发。
|
251 | - onerror 每当通知遇到错误时被触发。
|
252 | - onclose 当用户关闭通知时被触发。
|
253 |
|
254 | ## 其它
|
255 |
|
256 | `iNotify.init().title;` 获取标题
|
257 |
|
258 |
|
259 | ## 例子
|
260 |
|
261 | ### 实例一
|
262 |
|
263 | ```js
|
264 | function iconNotify(num){
|
265 | if(!notify) {
|
266 | var notify = new Notify({
|
267 | effect: 'flash',
|
268 | interval: 500
|
269 | });
|
270 | }
|
271 | if(num===0){
|
272 | notify.faviconClear()
|
273 | notify.setTitle();
|
274 | } else if (num < 100){
|
275 | notify.setFavicon(num)
|
276 | notify.setTitle('有新消息!');
|
277 | } else if (num > 99){
|
278 | notify.setFavicon('..')
|
279 | notify.setTitle('有新消息!');
|
280 | }
|
281 | }
|
282 | ```
|
283 |
|
284 | ### 实例二
|
285 |
|
286 | ```js
|
287 | var notify = new Notify({
|
288 | effect: 'flash',
|
289 | interval: 500,
|
290 | });
|
291 | notify.setFavicon('1');
|
292 | ```
|
293 |
|
294 | ### 实例三
|
295 |
|
296 | ```js
|
297 | var iN = new Notify({
|
298 | effect: 'flash',
|
299 | interval: 500,
|
300 | message: '有消息拉!',
|
301 | updateFavicon:{ // 可选,默认绿底白字
|
302 | textColor: '#fff',// favicon 字体颜色
|
303 | backgroundColor: '#2F9A00', // 背景颜色
|
304 | }
|
305 | }).setFavicon(10);
|
306 | ```
|
307 |
|
308 | ### 实例四
|
309 |
|
310 | ```js
|
311 | var iN = new Notify().setFavicon(5);
|
312 | ```
|
313 |
|
314 | ### 实例五
|
315 |
|
316 | ```js
|
317 | var iN = new Notify({
|
318 | effect: 'flash',
|
319 | interval: 500,
|
320 | message: "有消息拉!",
|
321 | audio:{
|
322 | file: 'msg.mp4',
|
323 | }
|
324 | }).setFavicon(10).player();
|
325 | ```
|
326 |
|
327 | ### 实例五
|
328 |
|
329 | ```js
|
330 | var iN = new Notify({
|
331 | effect: 'flash',
|
332 | interval: 500,
|
333 | message: '有消息拉!',
|
334 | audio:{
|
335 | file: 'msg.mp4'//可以使用数组传多种格式的声音文件
|
336 | },
|
337 | notification:{
|
338 | title: '通知!',
|
339 | icon: '',
|
340 | body: '您来了一条新消息'
|
341 | }
|
342 | }).setFavicon(10).player();
|
343 |
|
344 | //弹出chrome通知,不传参数为预设值...
|
345 | iN.notify();
|
346 |
|
347 | iN.notify({
|
348 | title: '新通知',
|
349 | body: '打雷啦,下雨啦...'
|
350 | });
|
351 | ```
|
352 |
|
353 | ### 实例六
|
354 |
|
355 | ```js
|
356 | var iN = new Notify({
|
357 | effect: 'flash',
|
358 | interval: 500,
|
359 | message: '有消息拉!',
|
360 | audio:{
|
361 | file: ['msg.mp4', 'msg.mp3', 'msg.wav']
|
362 | },
|
363 | notification:{
|
364 | title: '通知!',
|
365 | body:'您来了一条新消息'
|
366 | }
|
367 | })
|
368 |
|
369 |
|
370 | iN.setFavicon(10).player();
|
371 |
|
372 | var n = new Notify()
|
373 | n.init({
|
374 | effect: 'flash',
|
375 | interval: 500,
|
376 | message: '有消息拉!',
|
377 | audio:{
|
378 | file: ['openSub.mp4', 'openSub.mp3', 'openSub.wav'],
|
379 | },
|
380 | notification:{
|
381 | title:'通知!',
|
382 | icon: '',
|
383 | body:'您来了一个客户',
|
384 | }
|
385 | })
|
386 |
|
387 | n.setFavicon(10).player();
|
388 | ```
|
389 |
|
390 | ## License
|
391 |
|
392 | [MIT © Kenny Wong](./MIT-LICENSE)
|