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
友情鏈接