纯js超酷消息提示框插件notice.js

当前位置:主页 > jQuery库 > 工具提示 > 纯js超酷消息提示框插件notice.js
纯js超酷消息提示框插件notice.js
分享:

    插件介绍

    notice.js是一款纯js超酷消息提示框插件。notice.js为纯js编写,没有任何依赖文件。通过它可以在页面上制作出漂亮的toast消息通知框效果。

    浏览器兼容性

    浏览器兼容性
    时间:01-20
    阅读:
简要教程

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文件。

<link href="dist/noticejs.css" rel="stylesheet" type="text/css">
<script src="dist/noticejs.js"></script>      
                
初始化插件

notice.js消息提示框插件最基本的用法如下:

new NoticeJs({
    text: 'Notification message',
    position: 'topLeft',
}).show();               
                

你也可以结合animate.css来为消息通知框添加炫酷的CSS3动画效果。

在页面中引入animate.css文件。

<link href="css/animate.css" rel="stylesheet" type="text/css">  
                

然后在配置参数中设置animation参数:

new NoticeJs({
    text: 'Notification message',
    position: 'topLeft',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutLeft'
    }
}).show();          
                

notice.js消息提示框插件的github地址为:https://github.com/toolkito/notice.js