I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

トースト通知を手軽に実装できる JavaScript ライブラリ『toastr』の使い方

4 years ago

Web サービス作る時よく使うのでまとめとく.



toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

手軽に, ノンブロッキングな通知, つまりトースト通知を実装できる JavaScript ライブラリです. 使い方は Pure JavaScript っぽいですが, jQuery に依存したライブラリとなっています.

『toastr』 デモ

簡単なデモを作ってみました. ボタンを押すとトーストが表示されるのがわかるかと思います.

『toastr』 の使い方

1. toastr を読み込む

<!-- jquery -->  
<script src=''></script>  
<!-- toastr -->  
<link rel='stylesheet' href='' />  
<script src=''></script>  

2. トーストを表示

あとは JavaScript で を呼び出すだけです.'Are you the 6 fingered man?')  

toastr では, 様々な種類のトーストを生成することができます.

// 警告トーストを表示
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// タイトルと一緒にサクセストーストを表示
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// タイトルと一緒にエラートーストを表示
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

// 先頭のトーストを削除

// すべてのトーストをクリア

// グローバルなオプションを上書き
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})  

『toastr』 のオプション

toastr には色々と指定できるオプションがあります.


消えるまでの時間です. デフォルト値は, 5000 ミリ秒と結構長めに設定されているので, 渡しの場合, 大抵イジります.

toastr.options.timeOut = 2000;

Progress Bar


toastr.options.progressBar = true;

Close Button


toastr.options.closeButton = true;