标签：
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置。toastr需要jquery的支持。今天我们就开始toastr的学习。
一、引入jquery库和toastr的核心文件：
toastr的下载地址： http://codeseven.github.io/toastr/。 jquery的下载地址：http://jquery.com/download/
<link href="toastr.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="jquery-2.2.4.min.js" ></script> <script type="text/javascript" src="toastr.js" ></script>
jquery-2.2.4.min.js要在toastr.js之前引入。
二、写入html代码，这里只需写入触发事件的按钮。
<button id="button1">成功</button>
三、给按钮绑定事件
$(‘#button2‘).click(function () { toastr.error("hello world."); });
四、 你也可以修改toastr显示的方式和位置，toastr.options是全局的。
$(‘#button1‘).click(function () { toastr.options = { closeButton: false, debug: false, progressBar: false, positionClass: "toast-top-center", onclick: null, showDuration: "300", hideDuration: "1000", timeOut: "5000", extendedTimeOut: "1000", showEasing: "swing", hideEasing: "linear", showMethod: "fadeIn", hideMethod: "fadeOut" }; toastr.info("hello world."); });
测试的全部代码：
<!doctype html> <html lang="en"> <head> <link href="toastr.min.css" rel="stylesheet" type="text/css"/> <title>huhx</title> </head> <body> <button id="button1">Button1</button> <button id="button2">Button2</button> <button id="button3">Button3</button> <script type="text/javascript" src="jquery-2.2.4.min.js" ></script> <script type="text/javascript" src="toastr.js" ></script> <script type="text/javascript"> $(‘#button1‘).click(function () { toastr.options = { closeButton: false, debug: false, progressBar: false, positionClass: "toast-top-center", onclick: null, showDuration: "300", hideDuration: "1000", timeOut: "5000", extendedTimeOut: "1000", showEasing: "swing", hideEasing: "linear", showMethod: "fadeIn", hideMethod: "fadeOut" }; toastr.info("hello world."); }); $(‘#button2‘).click(function () { toastr.error("hello world."); }); $(‘#button3‘).click(function () { toastr.clear(); }); </script> </body> </html>
显示效果如下：
具体的学习，可以参考： http://codeseven.github.io/toastr/demo.html
标签：
原文地址：http://www.cnblogs.com/huhx/p/jsThirdToastr.html
