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

アラートやコンファームやプロンプトの通知ダイアログ、ユーザーがOKやCancelをクリックしたことを伝えるパネルを簡単に実装できるスタンドアローンのスクリプトを紹介します。

デモのキャプチャ

alertifyjs
alertifyjs -GitHub

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
    }
});

top of page

©2017 coliss