先日、
これやこれに書いたように、
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における、
オプションのデフォルト値は以下のようになってました。
function getDefaults() {
return {
tapToDismiss: true,
toastClass: 'toast',
containerId: 'toast-container',
debug: false,
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
closeMethod: false,
closeDuration: false,
closeEasing: false,
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
iconClass: 'toast-info',
positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title',
messageClass: 'toast-message',
escapeHtml: false,
target: 'body',
closeHtml: '',
newestOnTop: true,
preventDuplicates: false,
progressBar: false
};
} また、
こちらにあるようにCSSで上書きすれば、
アイコンを好きなようにカスタマイズできるようです。
iconClass オプションをいじっても同様にやれそうな感じっぽい。
