jquery toastr 一款輕量級的通知提示框插件。
網頁開發中經常會用到提示框，自帶的alert樣式無法調整，用戶體驗差。
所以一般通過自定義提示框來實現彈窗提示信息，而jquery toastr正是為此的一款非常棒的插件。
開發中用angular比較多，所以筆記記錄了angular一些常見使用，與jquery版本有些許不同 ，相差不大。
在HTML引用js文件
<link rel="stylesheet" type="text/css" href="angular-toastr.css" /> <script type="text/javascript" src="angular-toastr.tpls.js"></script>
在angular模版中注入依賴
angular.module('app', ['ngAnimate', 'toastr'])
toastr使用中會用到動畫，所以需加上ngAnimate，如果不引入ngAnimate，沒有動畫效果，不影響顯示。
開始使用
1.成功提示
toastr.success('Hello world!', 'Toastr fun!');
2.普通提示
toastr.info('We are open today from 10 to 22', 'Information');
3.錯誤提示
toastr.error('Your credentials are gone', 'Error');
4.警告提示
toastr.warning('Your computer is about to explode!', 'Warning');
第一個參數為提示內容，第二個參數為提示標題，如果不需要標題，則可省略第二個參數
toastr.success('I don\'t need a title to live');
關閉提示框
toastr.clear([toast]);
獲取當前顯示的提示框
toastr.active();
刷新打開的提示框（第二個參數配置超時時間）
toastr.refreshTimer(toast, 5000);
全局配置
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
autoDismiss: false,
containerId: 'toast-container',
maxOpened: 0,
newestOnTop: true,
positionClass: 'toast-top-right',
preventDuplicates: false,
preventOpenDuplicates: false,
target: 'body'
});
});
- autoDismiss: true 顯示最新的toastr
- containerId: 默認為"toast-container",設置toastr容器的id名稱.
- maxOpened: 頁面一次性最多顯示多少個toastr.
- newestOnTop: true 新的toastr會顯示在舊的toastr前面
- positionClass: 設置toastr顯示位置的class
- preventDuplicates: true 重復內容的提示框只出現一次，無論提示框是打開還是關閉
- preventOpenDuplicates: true 重復內容的提示框在開啟時只出現一個 如果當前的提示框已經打開，不會多開。直到提示框關閉后，才可再開)
- target: 默認為'body', 設置toastr的目標容器
| positionClass | |
|---|---|
| toast-top-left | 頂端左邊 |
| toast-top-right | 頂端右邊 |
| toast-top-center | 頂端中間 |
| toast-top-full-width | 頂端中間(寬度鋪滿) |
| toast-bottom-right | 底部右邊 |
| toast-bottom-left | 底部左邊 |
| toast-bottom-center | 底部中間 |
| toast-bottom-full-width | 底部中間(寬度鋪滿) |
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
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'
});
});
- 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
參考文章：
jquery: https://github.com/CodeSeven/toastr
angular: https://github.com/Foxandxss/angular-toastr