Jquery消息提示插件toastr使用詳解

引入：

<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">

參數配置：

 

toastr.success('Hello world!', 'Toastr fun!');  /success 、 error、info、warning 第二個參數為標題可以省略

關閉警告框

toastr.clear([toast]);

獲取當前警告框

toastr.active();

刷新警告框 第二個參數為超時時間

toastr.refreshTimer(toast, 5000);

 

配置參數：

 

 

toastr.options = { 
closeButton: false, 
debug: false, 
progressBar: true, 
positionClass: "toast-top-center", 
onclick: null, 
showDuration: "300", 
hideDuration: "1000", 
timeOut: "2000", 
extendedTimeOut: "1000", 
showEasing: "swing", 
hideEasing: "linear", 
showMethod: "fadeIn", 
hideMethod: "fadeOut" ,
newestOnTop: true,
preventDuplicates: true,
preventOpenDuplicates: true,
maxOpened:1 ，
allowHtml: false,
closeButton: false,
closeHtml: '<button>×</button>',
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
}, 
messageClass: 'toast-message',
onHidden: null,
onShown: null,
onTap: null,
progressBar: false,
tapToDismiss: true,
templates: {
toast: 'directives/toast/toast.html',
progressbar: 'directives/progressbar/progressbar.html'
},
timeOut: 5000,
titleClass: 'toast-title',
toastClass: 'toast'

};

 

 

• autoDismiss: true 顯示最新的toastr
• containerId: 默認為"toast-container",設置toastr容器的id名稱.
• maxOpened: 頁面一次性最多顯示多少個toastr.
• newestOnTop: true 新的toastr會顯示在舊的toastr前面
• positionClass: 設置toastr顯示位置的class
• preventDuplicates: true 重復內容的提示框只出現一次，無論提示框是打開還是關閉
• preventOpenDuplicates: true 重復內容的提示框在開啟時只出現一個 如果當前的提示框已經打開，不會多開。直到提示框關閉后，才可再開)
• target: 默認為'body', 設置toastr的目標容器
• allowHtml: 設置提示內容可包含html格式
• closeButton: 設置顯示"X" 關閉按鈕
• closeHtml: 自定義html替代closeButton內容，closeButton為true時才顯示.
• extendedTimeOut: 設置當你鼠標滑入后的timeout，該timeout會更新關閉所需的timeout.
• extraData: 如果重寫模版，你可以自定義全局數據給你的toasts
• iconClasses: 設置各個類型的icon圖標class
• messageClass: 設置toastr提示信息的class
• progressBar: 設置顯示timeout時間進度條
• tapToDismiss: 設置toastr被點擊時關閉
• templates: 自定義模版
• timeOut: 設置toastr過多久關閉
• titleClass: 設置toastr標題的class
• toastClass: 設置toastr基本的class

 

 

 

 

https://www.runoob.com/font-awesome/fontawesome-tutorial.html 字體圖標大全