jQueryでトースト通知できるライブラリ toastr.js を使ってみた

つい最近 「何か通知するのにトースト的なものを表示したい」 という場面があったので便利そうなライブラリがないか探していたらいいのを見つけました。

それが toastr.js というトースト通知用のjQueryライブラリ

使ってみたらかなり便利だったので、この使い方をまとめてみようと思います。

toastr.jsでトースト表示する手順

この toastr.js が便利なのは4種類のトースト表示 info  、 success  、 warning  、 error  )に対応していて、オプションとかも色々指定できるところですね。

その基本的な導入と表示手順は次の通りです。

1.jQuery と toastr.js の読み込み

まずheadタグ内などで次のようにjQueryを読み込み

toastr.js はjQueryを利用しているので必ず先に読み込んでおかないといけません。ちなみにバージョンについては特に指定はないです。

 

そうしたら次に toastr.js のJSファイルとCSSファイルを読み込み

ただしJSファイルについては必ずjQueryより後で読み込むことが必須です。

ちなみに上の例だとCDN経由で呼び出してますが、次ページからダウンロードもできます。

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

上ページからzipをダウンロードして展開し、直に読み込んでもOK。自分自身はCDNは使わず直リンクして使うことが多いです。

2.トースト通知してみる

あとはボタンが押されたときなど好きなタイミングでトースト通知ができます。

呼び出せるトーストの種類は全4種類でそれぞれのコード例と見た目は次の通りです。

 

まず1つめは簡単な情報を表示するinfo型のトースト

▼表示されるトースト例
toastr.js - 簡単な情報を表示するinfo型のトースト例

 

2つめは成功時にメッセージが表示できるsuccess型のトースト

▼表示されるトースト例
toastr.js - 成功時にメッセージを表示するsuccess型のトースト例

 

3つめは警告メッセージが表示できるwarning型のトースト

▼表示されるトースト例
toastr.js - 警告メッセージを表示できるwarning型のトースト例

 

そして4つめはエラーメッセージを表示するerror型のトースト

▼表示されるトースト例
toastr.js - エラーメッセージを表示できるerror型のトースト例

 

以上の4つからトーストの呼び出しが可能

分かりやすいメッセージ表示をするのに結構重宝しそうです。呼び出し方が簡単なのも便利ですね。

トースト通知にオプションを指定するには

そして、表示したトーストには色々オプションとかも付けることができます。

やり方は toastr.options  プロパティに連想配列形式のオプションを渡すだけです。

例えば次がトースト表示位置と表示時間のオプションを渡しているコード例

上の例だとトースト表示位置がブラウザ右下( "positionClass": "toast-bottom-right"  )、表示時間は10秒( "timeOut": "10000"  )になります。ただし時間指定の単位は秒ではなくミリ秒なことに少し注意

 

ちなみに指定可能なオプションについては次のデモページをどうぞ

デモページ : https://codeseven.github.io/toastr/demo.html

というか toastr.js には公式リファレンスがないので、上のデモが実質リファレンスページみたいなものですね。入力値とか選択値を変えればどういうオプションが指定できるのか調べられます。

ここまでのまとめ

今紹介したみたいに toastr.js は本格的なトースト通知にかなり便利です。オプションも必要最低限なものが揃っていて、余計な機能が付いていないのも使う側としては嬉しい機能です。

以上、jQueryでトースト通知できるライブラリ toastr.js についてでした。

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

2件のコメント
  • CERF

    よく似たものでiziToastというのもありますよ。
    https://izitoast.marcelodolza.com/
    こちらの方が若干新しいです。

    11月 23, 2019 12:26 am
    • ぴー助

      教えていただいて、ありがとうございます。
      こういうのもあるんですね。
      Toastrより使いやすそうなので、使ってみたいと思います。

      11月 23, 2019 12:57 pm

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください