Web上で使える通知ライブラリ
Webアプリケーションなどでフォーム入力を行ったり、Ajaxを使った処理の結果を表示することは多々あるでしょう。しかし、ページをスクロールしていたりすることがあるため、適切な場所がどこか分からないことがあります。
そんな時にはフローティングで使える通知ライブラリが便利です。エラーやウォーニング、サクセスなど多数のパターンに対応したライブラリを紹介します。
Notify.js
jQueryプラグインとして使える通知ライブラリです。メッセージの種類によって背景色が変化します。基本は右上ですが、ページの上下左右を指定したり、特定のDOMの横に表示することもできます。
Notie – A Javascript Notification Plugin
画面上部に幅100%で表示されますのでインパクトが強いです。さらに確認のボタンを出したり、インプットフィールドを追加することもできます。デザインはフラットです。
naoxink.hol.es/notifIt/
横や上からスライドしながら表示されます。表示する大きさは自由に設定ができます。アニメーションすることで、より注意を引きつけられるでしょう。
messenger
基本は右下に出るタイプとなっています。小さなアイコンとメッセージという組み合わせで、シンプルな表示となっています。
humane.js
基本は右下にさりげないアニメーションとともに表示されます。その他画面中央や上に出すと言った指定もできます。
HTML iOS Notifications
iOS風の通知表示が特徴です。プッシュ通知風にメッセージが出ます。
alertify.js – browser dialogs never looked so good
上からスライドしながら表示されたり、右下にバナーを出したりできます。アラートやプロンプトの代わりに使うこともできるでしょう。
noty – a jQuery Notification Plugin
jQueryプラグインの通知ライブラリです。アニメーションしながら表示されます。デザインはテキストとアイコン表示となっています。アニメーションがこっています。
Notifier.js Examples
アイコン+メッセージという形の通知が表示できます。表示場所は上下左右に細かく指定できます。
通知を上手に使うと、JavaScriptの特性である非同期処理と絡めてメッセージングができるようになります。ユーザがすでに別な場所まで移動してしまっていたとしても、常時画面上部などに表示できるのでユーザビリティが高くなるでしょう。
コメントは受け付けていません。