toastr是一款非常棒的基于jquery库的非阻塞通知提示插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置。toastr需要jquery的支持。今天我们就开始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>
显示效果如下：
五、toastr.xxx()方法有三个参数，第一个是显示的信息，第二个是标题，第三个是默认属性的重写(当然这个实现是局部的)。例子如下：
toastr.info('hello world.', '标题', {positionClass: 'toast-top-center'})
运行的效果如下：
这里列出可以重写的属性：以下默认的属性都可以作为toastr.xxx的第三个参数重写。
function getDefaults() { return { tapToDismiss: true, toastClass: 'toast', containerId: 'toast-container', debug: false, showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery showDuration: 300, showEasing: 'swing', //swing and linear are built into jQuery onShown: undefined, hideMethod: 'fadeOut', hideDuration: 1000, hideEasing: 'swing', onHidden: undefined, closeMethod: false, closeDuration: false, closeEasing: false, closeOnHover: true, extendedTimeOut: 1000, iconClasses: { error: 'toast-error', info: 'toast-info', success: 'toast-success', warning: 'toast-warning' }, iconClass: 'toast-info', positionClass: 'toast-top-right', timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky titleClass: 'toast-title', messageClass: 'toast-message', escapeHtml: false, target: 'body', closeHtml: '<button type="button">×</button>', closeClass: 'toast-close-button', newestOnTop: true, preventDuplicates: false, progressBar: false, progressClass: 'toast-progress', rtl: false }; }
具体的学习，可以参考： http://codeseven.github.io/toastr/demo.html
友情链接