シンプルな通知を実装できる JavaScript プラグイン『notie.js』の使い方

phi phi on javascript

オレの Advent Calendar 2015 - Adventar の 16 日目です.

phpshpot さんのエントリー 『ページの上から出てくる通知窓を表示することができる「notie.js」:phpspot開発日誌』 で紹介されていた notie.js を使ってみました.

良い感じだったので実際に動く動作サンプル含め紹介したいと思います.

『notie.js』とは？

公式より

A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.

JavaScript のためでクリーン(おそらく依存性がないってこと)でシンプルな通知ライブラリです. 的なことが書かれています.

『notie.js』デモ

『notie.js』の使い方

Install

cdn 経緯で読み込みます.
github を見る限りだとまだリリースバージョンがないようだったので commit バージョンをしていして cdngit 経由で読み込んでいます.

<body>  
  ...
  <script src='https://cdn.rawgit.com/jaredreich/notie.js/a9e4afbeea979c0e6ee50aaf5cb4ee80e65d225d/notie.js'></script>
</body>

head で読み込むとエラーになるみたいなので body で読み込むようにってとこだけご注意ください.

Usage

あとは実際に notie の持つメソッドを呼ぶだけです.

notie.alert

alert です.

notie.alert(style_number, 'message', time_in_seconds);

runstant

notie.confirm

confirm(Yes/no) ですね.

notie.confirm('Title text', 'Yes button text', 'No button text', yes_callback)

最後のコールバックは yes のときのみ呼ばれることにご注意ください.

runstant

notie.input

インプットですね. テキストを入力できます. コールバックは yes を選択したときだけ呼ばれて, 第一引数に入力した内容が渡されます.

notie.input('Title text', 'Submit button text', 'Cancel button text', 'type', 'placeholder', submit_callback, 'Optional pre-filled value');

runstant