Web上で使える通知ライブラリ

by moongift : 2017/03/01

Webアプリケーションなどでフォーム入力を行ったり、Ajaxを使った処理の結果を表示することは多々あるでしょう。しかし、ページをスクロールしていたりすることがあるため、適切な場所がどこか分からないことがあります。

そんな時にはフローティングで使える通知ライブラリが便利です。エラーやウォーニング、サクセスなど多数のパターンに対応したライブラリを紹介します。

jQueryプラグインとして使える通知ライブラリです。メッセージの種類によって背景色が変化します。基本は右上ですが、ページの上下左右を指定したり、特定のDOMの横に表示することもできます。

画面上部に幅100%で表示されますのでインパクトが強いです。さらに確認のボタンを出したり、インプットフィールドを追加することもできます。デザインはフラットです。

横や上からスライドしながら表示されます。表示する大きさは自由に設定ができます。アニメーションすることで、より注意を引きつけられるでしょう。

基本は右下に出るタイプとなっています。小さなアイコンとメッセージという組み合わせで、シンプルな表示となっています。

基本は右下にさりげないアニメーションとともに表示されます。その他画面中央や上に出すと言った指定もできます。

iOS風の通知表示が特徴です。プッシュ通知風にメッセージが出ます。

上からスライドしながら表示されたり、右下にバナーを出したりできます。アラートやプロンプトの代わりに使うこともできるでしょう。

jQueryプラグインの通知ライブラリです。アニメーションしながら表示されます。デザインはテキストとアイコン表示となっています。アニメーションがこっています。

アイコン＋メッセージという形の通知が表示できます。表示場所は上下左右に細かく指定できます。

通知を上手に使うと、JavaScriptの特性である非同期処理と絡めてメッセージングができるようになります。ユーザがすでに別な場所まで移動してしまっていたとしても、常時画面上部などに表示できるのでユーザビリティが高くなるでしょう。

現在コメントは受け付けていません。

最近の投稿