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