toastr 插件使用

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

href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css"

href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.css"

src="http://cdn.bootcss.com/toastr.js/latest/js/toastr.js"

使用

1. /显示一个没有标题的信息框（蓝色）  
2. toastr.info("I am yanying");  

[html]  view plain copy

1. //显示一个没有标题的警告框（橘黄色）  
2. toastr.warning("I am yanying");  

[html]  view plain copy

1. //显示一个没有标题的成功提示（绿色）  
2. toastr.info("I am yanying");  

[html]  view plain copy

1. //显示一个没有标题的错误提示（深红色）  
2. toastr.error("I am yanying");  

[html]  view plain copy

1. //清除一个错误  
2. toastr.clear()</span>  

高级方法

使用这种方法也可以调用通知插件，而且还可以配置一些参数信息，达到不同功能和效果

[html]  view plain copy

1. $(function () {  
2.   
3.         $('#showtoast').click(function () {  
4.   
5.             toastr.options = {  
6.   
7.                 closeButton: false,  
8.                 debug: false,  
9.                 progressBar: false,  
10.                 positionClass: "toast-top-right",  
11.                 onclick: null,  
12.                 showDuration: "300",  
13.                 hideDuration: "1000",  
14.                 timeOut: "5000",  
15.                 extendedTimeOut: "1000",  
16.                 showEasing: "swing",  
17.                 hideEasing: "linear",  
18.                 showMethod: "fadeIn",  
19.                 hideMethod: "fadeOut"  
20.             };  
21.   
22.             var $toast = toastr['error']('123', 'title');  
23.   
24.         });  
25.   
26.     })  

可供选择的设置选项

closeButton: true

是否在通知弹窗上面显示关闭按钮，true：显示；false：不显示

debug: true

是否开起debug

progressBar: false

是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失

positionClass: 'toast-top-right'

位置信息，消息弹窗显示的位置，可以显示的位置对应的值

1. toast-top-right
2. toast-botton-right
3. toash-bottom-left
4. toast-top-left
5. toast-top-full-width 这个是在网页顶端，宽度铺满整个屏幕
6. toast-bottom-full-width
7. toast-top-center顶端中间
8. toast-bottom-center

onclick: null

showDuration: "300"

显示动作（从无到有这个动作）持续的时间

hideDuration: "1000"

隐藏动作持续的时间

timeOut: "5000"

间隔的时间

extendedTimeOut: "1000"

showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn"

显示的方式，和jquery相同，可以是show()

hideMethod: "fadeOut"

隐藏的方式，和jquery相同，可以是hide()

toastr['error']('I am yanying', 'title');

其中的error为显示的通知的样式类型，有4种选择

1. success 成功，绿色
2. info 信息，蓝色
3. warning，警告，橙色
4. error，错误，深红色