かっこいい通知バーが実装できるjQueryプラグイン「overhang.js」

かっこいい通知バーが実装できるjQueryプラグイン「overhang.js」の紹介です。

overhang.jsを使うと 画面上部におしゃれな通知バーを実装できます。

通知以外にも、プロンプト、確認画面。の機能が備わっており 簡単に使うことが出来ます。また、通知バーの色のカスタマイズやコールバック処理も可能。

overhang.jsを入手するには こちら(* Github内のページ) から直接入手する方法と、npm, bowerからの入手にも対応しています。

# npmでインストールする場合
npm install overhang --save

# bowerでインストールする場合
bower install overhang --save

overhang.jsはjQuery, jQuery-uiに依存しているので、２つのライブラリの読み込みが必要になります。

<!-- jQuery 3.1.0でも動作しました -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

overhang.jsを使うにはcssファイルとjavascriptファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<script type="text/javascript" src="dist/overhang.min.js"></script>

タイプの指定

overhang.jsには指定するオプションが用意されおり、typeに値をカラーを割り当てることができます。デフォルトでは青色のsuccess, 赤色のerror, 水色のinfo,オレンジ色のwarn 4種類のタイプのが用意されています。

// このコードはeventを指定していないので、ページ読み込み時に起動します
$("body").overhang({
  type: "success", // success, error, info, warnの四種類
  message: "overhang.jsのデモ！(* 画面上部に表示されます )" // 表示されるメッセージ
  // closeConfirm: true // このオプションを指定するとcloseボタンが表示されます
});

// カスタムカラーを指定する場合
$("body").overhang({
  custom: true,
  textColor: "#FCE4EC", // テキストの色
  primary: "#F06292", // 上段の色
  accent: "#FCE4EC", // 下段の色
  message: "カスタムカラーです！"
});

durationの設定

オプションにdurationを指定すると、指定秒後に通知バーを閉じることもできます。

// 5秒後に通知バーを閉じるサンプル
$("body").overhang({
      type: "info",
      message: "このメッセージは5秒後に消えます！",
      duration: 5 // 秒の指定
      // upper: true //このオプションがあると、英字を大文字に出来ます
    });

プロンプト

オプションにpromptを指定すると、テキスト入力フォームが実装できます。callbackオプションを指定すると、Enterキーを押した後の処理を書くことができます。

// プロンプトの処理
$("body").overhang({
   type: "prompt",
   message: "フォームに何か入力してください",
   callback: function() {
        
   // Enterキーが押された後の処理
        
   // プロンプトに入力されたデータの取得
   var data = $("body").data("overhangPrompt");
        
   alert(data);
}});

confirm

最後にconfirmの紹介です。

オプションにconfirmをいれると、確認機能が実装できます。プロンプトと同様、callbackにyes noの処理を書くことができます。

// confirmのサンプル
$("body").overhang({
   type: "confirm",
   primary: "#40D47E",
   accent: "#27AE60",
   yesColor: "#3498DB",
   message: "コンファームのサンプルです。 YES of NO?",
   callback: function () {
   /**
   * confirmのデータを取得
   * true, falseでデータが返ってきます。
   */
   var selection = $("body").data("overhangConfirm");
        
   if (selection) {
     $("body").overhang({
         type: "info",
         message: "yesが選択されました"
        });
          
      } else {
        $("body").overhang({
           type: "error",
           message: "noが選択されました"
        });
      }
        
      }
    });
    
});

以上がoverhang.jsの紹介でした。

overhang.jsはjQuery, jQuery-uiに依存しているので、その２つのライブラリが入っているのであれば、既存のサイトにも簡単に導入することができます。

また、使い方がシンプルなので、ラッパーも簡単に作れます。

//ラッパーのサンプル
function customAlert(type) {
    var data;

    switch (type) {
        case 'login':
            data = {
                type: 'success',
                message: 'loginしました'
            }
            break;

        case 'logout':
            data = {
                type: 'warn',
                message: 'logoutしました'
            }
            break;

        case 'submit':
            data = {
                type: 'info',
                message: '送信しました'
            }
            break;
    }

    return $('body').overhang({
        type: data.type,
        message: data.message
    });

}

// e.x.p
customAlert('logout');

管理システムの、ログインやログアウトのアラートメッセージとして。フォームからの処理の確認として使えば、カッコよさそうですね！

気になった人はゼヒ×２チェックしてみてください！

Github: paulkr/overhang.js