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 })
设置选项
<1>positionClass: 'toast-top-right'
位置信息，消息弹窗显示的位置，可以显示的位置对应的值
- toast-top-right
- toast-botton-right
- toash-bottom-left
- toast-top-left
- toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕
- toast-bottom-full-width
- toast-top-center顶端中间
- toast-bottom-center
<2>toastr['error']('I am yanying', 'title');
其中的error为显示的通知的样式类型，有4种选择
- success 成功，绿色
- info 信息，蓝色
- warning，警告，橙色
- error，错误，深红色
其中第一个参数为显示的内容，第二个参数为显示的标题，标题可以省略
效果展示
自定义选项，有进度条和关闭按钮效果。
