toastrを使ってみた

 プログラム
 公開日:2016年5月8日

 先日、
これこれに書いたように、
Geolocationが許可されない場合に、
freeGeoIPで代用したことを示すために
あえてアラート表示は残したのですが、
Chromeだと毎回出るのがちょっとウザイ。

 window.alert を使うとエラー表示がお手軽にやれるのですが、
モーダルなダイアログになっているので、
ボタンを押さないと先へ進まない。

 言わば、
進行がブロックされる通知表示なわけで、
ブロックされない通知表示なら
スマートな感じになるんじゃないかな、
と思って探してみたら、
こちらのtoastrというのを見つけました。

 こちらの動作デモを試してみると、
スタイリッシュでなかなか良さげな感じです。

 ちなみに、
こういうのをトースト表示と言うらしい。
両面焼いた食パンをトーストと言いますが、
なんか関係があるのでしょうか(^_^;)

 使い方はしごく簡単。
cssとjsを読み込んで、

toastr.error('message');

とか書くだけ。
cssとjsについてはCDN版もあるので、
ファイルを自分のサーバーに置かなくても行けますね。
ただ、
jQueryに依存しているので、
あらかじめ読んでおく必要があります。

 オプションも豊富です。
こちらの動作デモで確認できます。
timeout で自動消去される時間を設定しますが、
トースト表示中にマウスカーソルをhoverさせると、
消去されずに表示され続けるようになっています。
timeoutしても表示されたままになりますが、
hoverを解除すると自動消去されます。
その時間は Extended time out で設定するようです。

 v2.1.2における、
オプションのデフォルト値は以下のようになってました。

 また、
こちらにあるようにCSSで上書きすれば、
アイコンを好きなようにカスタマイズできるようです。
iconClass オプションをいじっても同様にやれそうな感じっぽい。

コメント投稿