jQuery プラグインの notify.js が何かに使えそうなのでメモがてら紹介。開発者ツールを使えば書いてある JavaScript はすぐに試せるようにしてある。

notify.js のライセンスとかの情報

Copyright © Jaime Pillora <dev@jpillora.com> Released under the MIT license https://opensource.org/licenses/MIT

Notify.js?

Notify.js は jQuery のプラグイン。ポップアップで警告や指示などを出すことができる。

<input type="button" id="notify-js-try"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="lib/notify.min.js" type="text/javascript"></script>
<script src="callNotify.js" type="text/javascript"></script>

// callNotify.js
// jQuery オブジェクトに notify 関数が追加されるので以下のように書ける
$.notify("このように書くと画面右上にポップアップが出る");
$("#notify-js-try").click(function(e){
  $("#notify-js-try").notify("#notify-js-try に吹き出しの形でポップアップが出る");  
});

ポップアップの種類

デフォルトだと赤いもの (エラー) が出るが、第二引数でコントロールできる。

• success
• info
• warn
• error

$.notify("緑","success");
$.notify("青","info");
$.notify("黄","warn");
$.notify("赤","error"); // デフォルトはこれ

ポップアップのプロパティ

第二引数に文字列ではなく連想配列を与えることで様々な設定ができる。

$.notify("色々カスタマイズされている",{
  className: "success", // 上記のポップアップの種類
  position: "right top", // left, center, right 及び top, middle, bottom。両方書かなくてもいい
  autoHide: true, // 自動で消えるか否か
  clickToHide: true, // ポップアップをクリックしただけで消えるか否か
  autoHideDelay: 3000, // 自動で消えるのにかかる時間。ミリ秒で入れる。デフォルトは5秒。これだと3秒
  arrowShow: false, // ポップアップが吹き出しになるか否か。デフォルトは true。
  arrowSize: 5, // ポップアップが吹き出しな場合の矢印のサイズ。px 単位
  showAnimation: 'slideDown', // ポップアップが出てくるときのアニメーション。faceIn とかでも。
  showDuration: 400, // ポップアップが出てくるときのアニメーションにかかる時間
  hideAnimation: 'slideUp', // ポップアップが出てくるときのアニメーション。
  hideDuration: 200, // ポップアップが消えるときのアニメーションにかかる時間
  gap: 2 // ポップアップ元になる要素とポップアップの距離。 px 単位
});

第二引数のデフォルトの指定

次のようにすると第二引数で指定しなくてもポップアップの種類を指定できる

$.notify.defaults({className:"info"});
$.notify("これは info (青) で出る");

関係ページのリンク

• Notify.js 紹介ページ。英語。
• notifyjs/notifyjs: Notify.js - A simple, versatile notification library github

さらにスタイルを拡張したりできるが、それはまた今度書く。