jQuery 「alertify.js」を使って通知表示、アラートのダイアログを実装するやり方

通知表示、アラートなどを表示させるときに何かいいスクリプトが無いか探してたら、ちょうど良いものがありましたのでalertify.jsを使って実装するやり方を紹介します。

alertify.js

URLhttp://fabien-d.github.io/alertify.js/

ページコンテンツ

1 jQueryを動かすために STEP1
2 ファイルをダウンロード STEP2
3 データを解凍します STEP3
4 HTMLに実際に動く記述を書きます STEP4
5 HTMLを設置します STEP5
6 CSSファイルを設置します STEP6
7 jsファイルを設置します STEP7
8 まとめ

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ファイルをダウンロード STEP2

ファイルをダウンロード

「Download」がありますのでクリックしてください。
「Download」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「Download」をサイトからダウンロードして、zipファイルを解凍します。

データを解凍します

データが入っています。

HTMLに実際に動く記述を書きます STEP4

<script>
		function reset () {
			$("#toggleCSS").attr("href", "css/024/alertify.default.css");
			alertify.set({
				labels : {
					ok     : "OK",
					cancel : "Cancel"
				},
				delay : 5000,
				buttonReverse : false,
				buttonFocus   : "ok"
			});
		}

		// ==============================
		// ダイアログ
		$("#alert").on( 'click', function () {
			reset();
			alertify.alert("警告のダイアログです");
			return false;
		});

	</script>

function reset () {

$("#toggleCSS").attr("href", "css/024/alertify.default.css");

alertify.set({

labels : {

ok : "OK",

cancel : "Cancel"

delay : 5000,

buttonReverse : false,

buttonFocus : "ok"

});

}

// ==============================

// ダイアログ

$("#alert").on( 'click', function () {

reset();

alertify.alert("警告のダイアログです");

return false;

});

</script>

長いですが、一つ一つ見ていくと難しくはありません。
ベーシックのダイアログの記述です。

「$("#toggleCSS").attr("href", "css/024/alertify.default.css");」
このCSSファイルのパスはご自身の環境に合わせてください。

HTMLを設置します STEP5

<a href="#" id="alert">警告のダイアログ</a>

1	<a href="#" id="alert">警告のダイアログ</a>

シンプルです。ボタンを設置するだけで大丈夫です。

CSSファイルを設置します STEP6

解凍したファイルの中に、必要なCSSファイルがあります。

CSSファイルを設置します

「themes」フォルダがあります。

CSSファイルを設置します

「alertify.core.css」「alertify.default.css」のファイルをHTMLに記述します。

<link rel="stylesheet" href="css/024/alertify.core.css" />
<link rel="stylesheet" href="css/024/alertify.default.css" id="toggleCSS" />

1 2	<link rel="stylesheet" href="css/024/alertify.core.css" /> <link rel="stylesheet" href="css/024/alertify.default.css" id="toggleCSS" />

こちらもパスはご自身の環境に合わせてください。

jsファイルを設置します STEP7

解凍したファイルの中に、必要なjsファイルがあります。

jsファイルを設置します

「lib」フォルダがあります。

jsファイルを設置します

「alertify.min.js」のファイルをHTMLに記述します。

<script src="js/024/alertify.min.js"></script>

1	<script src="js/024/alertify.min.js"></script>

こちらもパスはご自身の環境に合わせてください。

まとめ

[サンプル] 通知表示、アラートのダイアログjQuery

よくわからなかった人もいるかもしれませんが、サンプルを作りましたのでぜひ試してみてください。