notice.js是一款纯js超酷消息提示框插件。notice.js为纯js编写,没有任何依赖文件。通过它可以在页面上制作出漂亮的toast消息通知框效果。该js消息提示框插件的特点还有:
支持4中情景类型:error, warning, info, success。
消息框可以显示在9个位置:topLeft, topCenter, middleLeft, middleRight, middleCenter, bottomLeft, bottomRight, bottomCenter。
消息框内容支持HTML元素。
安装
可以通过npm或bower来安装notice.js插件。
bower install notice.js --save
npm install notice.js --save
使用方法
在页面中引入noticejs.css和noticejs.js文件。
初始化插件
notice.js消息提示框插件最基本的用法如下:
new NoticeJs({
text: 'Notification message',
position: 'topLeft',
}).show();
你也可以结合animate.css来为消息通知框添加炫酷的CSS3动画效果。
在页面中引入animate.css文件。
然后在配置参数中设置animation参数:
new NoticeJs({
text: 'Notification message',
position: 'topLeft',
animation: {
open: 'animated bounceInRight',
close: 'animated bounceOutLeft'
}
}).show();