jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで読み込んでおり、これは何なのかと調べたところフラッシュデータっぽい通知メッセージを表示させるjQueryライブラリらしい。聞いたことの無いライブラリだったので使い方及びサンプルのメモ。

Toastr

公式サイト

https://codeseven.github.io/toastr/

GitHub

https://github.com/CodeSeven/toastr

CDN

CDNで使う場合は以下を記述する。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

異なるバージョンが良い場合は以下から探す。

https://cdnjs.com/libraries/toastr.js/latest

尚、jQueryライブラリのためjQuery自体も読み込む必要がある点に注意する。

サンプル

https://taitan916.info/sample/Toastr/

ソースコード

基本的な使い方

toastr.info('info');
toastr.success('success');
toastr.warning('warning');
toastr.error('error');

オプション指定

公式ページで設定したいオプションを選択し「Show Toast」ボタンをクリックするとソースコードが出力されるのでそちらをコピーして以下のような形で設定できる。

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-bottom-right",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
}

toastr.info('info');
toastr.success('success');
toastr.warning('warning');
toastr.error('error');

所感

Ajax通信後の成否表示などで使えそう。ただjQuery依存というのがちょっとネックかも。