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

phi phi on javascript, jQuery

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

『toastr』とは

公式より

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='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script>  
<!-- toastr -->  
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css' />  
<script src='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js'></script>  

2. トーストを表示

あとは JavaScript で toastr.info()toastr.warning() を呼び出すだけです.

toastr.info('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.remove()

// すべてのトーストをクリア
toastr.clear()

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

『toastr』 のオプション

toastr には色々と指定できるオプションがあります.
今回は抜粋してよく使うやつだけ紹介します.

Timeouts

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

toastr.options.timeOut = 2000;  

http://goo.gl/sEvRnK

Progress Bar

消えるまでの時間をプログレスバーでわかりやすく表示してくれます.

toastr.options.progressBar = true;  

http://goo.gl/SeBulS

Close Button

閉じるボタンを付けてくれます.

toastr.options.closeButton = true;  

http://goo.gl/pVlktr