邪魔にならない程度で綺麗にユーザに通知を表示 - 「Notify.js」
ユーザへの通知
- ユーザがサービスの中で行った操作に対し、何かメッセージを表示する事は多いと思います
- 「登録しました」「XXXは必須です」といったメッセージです
- twitter bootstrap を利用しているのであれば、「Alerts」のコンポーネントを使うことも多いと思いますが、凄く目立つので、もう少し控えめに通知できないかなと調べていて見つけたのが「Notify.js」です
- 「Notify.js」を使うと、画面の右上に通知が表示され、時間が経過すると通知が消すということができます
- Knowledgeでのユーザへの通知は、これを利用しているので、使い方を紹介します
スクリーンショット
https://support-project.org/knowledge/open.knowledge/view/66
ライブラリの取得
- bowerで取得します
"notifyjs": "0.3.2"
bower install
- ライブラリのウェブサイトは以下になります
ライブラリの利用の指定
- bowerで取得したライブラリを読み込む
<script type="text/javascript" src="bower/notifyjs/dist/notify.js"></script> <script type="text/javascript" src="bower/notifyjs/dist/notify-combined.js"></script>
ユーザへの通知
通知したいタイミングで $.notify('メッセージ', 'メッセージレベル'); をコールします
- メッセージレベルには、'success', 'info', 'warn', 'error' のどれかを指定します
$.notify('メッセージが右上に表示されます', 'info');
以上です。
