Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

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

投稿日:

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

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

alertify.js

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

jQueryを動かすために STEP1

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

<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>

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

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

HTMLを設置します STEP5

<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" />

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

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

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

jsファイルを設置します

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

jsファイルを設置します

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

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

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

まとめ

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

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.