Toastr 簡介
jquery toastr 一款輕量級的通知提示框插件。
網頁開發中經常會用到提示框，自帶的alert樣式無法調整，用戶體驗差。
所以一般通過自定義提示框來實現彈窗提示信息，而jquery toastr正是為此的一款非常棒的插件。
開發中用angular比較多，所以筆記記錄了angular一些常見使用，與jquery版本有些許不同 ，相差不大。
在HTML引用js文件
<link rel="stylesheet" type="text/css" href="./static/toastr/toastr.min.css"> <script src="./static/toastr/toastr.min.js"></script>
注意：導入toastr.min.js文件欠必須要先導入jQuery原生文件
在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);
全局配置
<script type="text/javascript">
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"
};
</script>
| 參數名稱 | 說明 | 可選項 |
|---|---|---|
| closeButton | 是否顯示關閉按鈕 | true,false |
| debug | 是否使用debug模式 | true,false |
| positionClass | 彈出窗的位置 | 具體見下文 |
| showDuration | 顯示的動畫時間 | |
| hideDuration | 消失的動畫時間 | |
| timeOut | 展現時間 | |
| extendedTimeOut | 加長展示時間 | |
| showEasing | 顯示時的動畫緩沖方式 | swing |
| hideEasing | 消失時的動畫緩沖方式 | linear |
| showMethod | 顯示時的動畫方式 | fadeIn |
| hideMethod | 消失時的動畫方式 | fadeOut |
| 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 | 底部中間(寬度鋪滿) |
參考文章：
jquery: https://github.com/CodeSeven/toastr
angular: https://github.com/Foxandxss/angular-toastr