【JS】jquery通知插件toastr

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置，在官方站可以通过勾选参数来生成JS，非常的方便使用。

使用demo地址：http://www.jq22.com/yanshi476（可获取toastr不同的配置方式）

1、兼容性

2、toastr使用

引入核心文件

1 <span style="font-family:Comic Sans MS;">
2    <link href="toastr.css" rel="stylesheet"/> 
3    <link rel="stylesheet" href="css/toastr.min.css" />
4    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
5    <script type="text/javascript" src="js/toastr.js" ></script></span>

编写html代码

 1 //常规消息提示，默认背景为浅蓝色  
 2 toastr.info("你有新消息了!"); 
 3 //显示一个没有标题的信息框（蓝色）
 4 toastr.info("I am yanying");
 5 //显示一个没有标题的警告框（橘黄色）
 6 toastr.warning("I am yanying");
 7 //显示一个没有标题的成功提示（绿色）
 8 toastr.info("I am yanying");
 9 //显示一个没有标题的错误提示（深红色）
10 toastr.error("I am yanying");
11 //清除一个错误
12 toastr.clear();

自定义选项

 1 $(function () {
 2 
 3         $('#showtoast').click(function () {
 4             toastr.options = {
 5 
 6                 closeButton: true,//是否显示关闭按钮 
 7                 debug: false,//是否使用debug模式 
 8                 progressBar: true,//是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失
 9                 positionClass: "toast-top-right",//弹出窗的位置
10                 onclick: null,
11                 showDuration: "300",//显示的动画时间 
12                 hideDuration: "30000",//消失的动画时间 
13                 timeOut: "5000",//展现时间 
14                 extendedTimeOut: "1000",//加长展示时间
15                 showEasing: "swing",//显示时的动画缓冲方式 
16                 hideEasing: "linear",//消失时的动画缓冲方式 
17                 showMethod: "fadeIn",//显示时的动画方式
18                 hideMethod: "fadeOut"//消失时的动画方式 
19             };
20 
21             var $toast = toastr['info']('您有新消息了！');
22 
23         });
24 
25     })