美しい 通知バーが簡単に実装出来るJSプラグイン「notie.js」



ユーザー登録システム等を実装したサービスを作っていると、
POST処理を行った時に画面上で通知メッセージを表示させたい時があります。

fadeOutする通知メッセージを表示するのが一般的ですがそれ用のCSSを書いたり等、
作業が増えてしまいます。

そのような時に便利なJavascripプラグインが「notie.js」です。

notie.js
 

このnotie.jsを使うと、上のgif動画のように 通知メッセージが簡単に実装出来ます。

使い方もシンプルです。

// 主な使い方

// alert
notie.alert(style {int}, 'message', second {int});

// confirm
notie.confirm('message', 'ok-button-text', 'cancel-button-text', callback {function}, second {int});



// スタイル1 1.5秒間表示
notie.alert(1, 'Good Choice!', 1.5);

 

// スタイル2 メッセージにはHTMLタグも使えます
notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);



// スタイル3  2.5秒間表示
notie.alert(3, 'Error.', 2.5);

 

// スタイル4  2秒間表示
notie.alert(4, 'Information.' 2);



<span id="confirm-exp" type="button" class="btn btn-default" name="button">Confirm</span>

<script type="text/javascript">
  // jqueryが使われたと想定しています

  // id="confirm-exp"ボタンが押された時の処理
  $('#confirm-exp').on('click', function(){

      notie.confirm('この操作で確定しますか?', 'OK', 'Cancel', function(){
        // OKボタンが押された時の処理
        notie.alert(1, 'Success! 1.5秒後に閉じます!', 1.5);
      });
  });
</script>



基本的な使い方は上記の様な感じです。

このnotie.jsは リリースされて間もないので、
導入するにはgithubのnotie.jsのページからzipファイルをダウンロードするか、
" git clone "コマンドを使って導入する必要があります。

実際にダウンロードして試してみたのですが、使い勝手が良く
何らかのPOST処理をした後に通知メッセージとして使える と感じました。

今後はbowerからインストールも出来るようになると思うので 
一度チェックしてください!

この記事のカテゴリ
プログラミング

この記事のタグ