Windows 8ライクな通知に特化した「Notific8」
Notific8は、https://github.com/willsteinmetz/jquery-notific8においてBSDライセンスで配布されています。ダウンロードしたファイルのうち、jquery.notific8.min.jsおよびjquery.notific8.min.cssをHTMLから参照させます。前述のnotyが比較的汎用的に使える通知プラグインであるのに対して、Notific8はWindows 8から導入された通知をWebページで再現することに特化した内容になっています。
Notific8で通知を表示させるには$.notific8メソッドをコールします。最もシンプルな通知表示の処理はリスト4で実現できます。
リスト4 シンプルなNotific8通知表示
$.notific8("シンプルな通知");
リスト4を実行して表示される通知を図4に示します。
図4 リスト4を実行して表示される通知
$.notific8メソッドの第1引数は常に通知文言で、第2引数にJavaScriptオブジェクトで通知のパラメータを指定することができます。主なパラメータを表2に示します。
| パラメータ名 | 内容 | 初期値 |
|---|---|---|
| life | 通知を自動消去する時間（ミリ秒） | 10000 |
| heading | 通知ヘッダー文言 | ""（指定なし） |
| theme | 表示テーマ | "teal" |
| sticky | 通知を表示したままにする | false |
| horizontalEdge | 通知の縦位置 | top（上） |
| verticalEdge | 通知の横位置 | right（右） |
| zindex | Zインデックス | 1100 |
例えば、通知を左下に表示し、自動消去されないようにするためにはリスト5のように記述します。
リスト5 Notific8のパラメータ設定例
$.notific8("右下に表示、自動で消えない",{
horizontalEdge: "bottom",
verticalEdge: "left",
sticky: true,
});
リスト5を実行して表示される通知を図5に示します。
図5 リスト5を実行して表示される通知
なお、Notific8はjQuery Mobile環境でも動作を確認していますが、通知の横幅が大きいためにスマートフォン画面に収まりきらず実用的ではありません。
