[JS]アラートやコンファームなどの通知ダイアログとユーザーのアクションを表示するパネルも簡単に実装するスクリプト -alertifyjs

サイト構築 -JavaScript

Post on:2012年12月5日

alertifyjsの特徴

alertifyjsは簡単にカスタマイズができる通知システムを実装できるJavaScriptです。

alert, confirm, promptの全通知ダイアログはフルカスタマイズが可能。
通知システムもカスタマイズが可能。
OKとCancelの両方のボタンにコールバックに対応。
ダイアログを連携させることも可能。

alertifyjsのデモ

alertifyjsのデモページ

ブルーのボタンをクリックすると、通知ダイアログがアニメーションで表示されます。

alertの通知ダイアログを表示

ユーザーのアクションを通知システムとして、下部にパネルで表示します。

promptの通知ダイアログと通知システムを表示

alertifyjsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="assets/js/lib/alertify/alertify.min.js"></script>

Step 2: HTML

通知ダイアログをクリックで表示するボタンを実装します。

<nav class="button-group">
	<a class="button-primary" href="#" id="alert">Alert Dialog</a>
	<a class="button-primary" href="#" id="confirm">Confirm Dialog</a>
	<a class="button-primary" href="#" id="prompt">Prompt Dialog</a>
</nav>

Step 3: CSS

alertifyjsでは、通知スタイル用の外部スタイルシートが用意されています。
※必要に応じて、スタイルシートをご利用ください。

<link rel="stylesheet" href="assets/js/lib/alertify/alertify.core.css" />
<link rel="stylesheet" href="assets/js/lib/alertify/alertify.default.css" />

Step 4: JavaScript

まずは、簡単なalertのダイアログから。

alertify.alert( message, function () {
    // after clicking OK
});

OKとCancelのあるconfirmのダイアログ。

alertify.confirm( message, function (e) {
    if (e) {
        //after clicking OK
    } else {
        //after clicking Cancel
    }
});

最後はpromptボックス付きの通知ダイアログ。

alertify.prompt( message, function (e, str) {
    if (e) {
        // after clicking OK
        // str is the value from the textbox
    } else {
        // after clicking Cancel
    }
});