jQueryとjQuery UIを使った警告ダイアログボックス

JavaScriptの警告ダイアログ（alert();）は、とりあえずメッセージを出すという点では良いのですが、もっとカッコ良いダイアログを表示したい。ダイアログにタイトルを付けたいと思った時に、ちょいと機能不足ですね。
そこで、jQueryとjQuery UIを使って作った、警告ダイアログをご紹介いたします。

1.準備編(ライブラリの読み込み)

まずは、jQueryとjQuery UIを読み込みましょう。もし読んでいない方は、参考までにjQueryの読み込み方についてもご一読ください。
CDNを使って各ライブラリを読み込んでいます。jQuery UIはスタイルシートも一緒に読み込むことを忘れないでください。

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI -->
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2.準備編(表示するHTMLの準備)

意外と忘れがちですが、今回のjQuery UIを使ったダイアログはdiv要素に指定されたidに対してダイアログ表示処理をしています。そのため、必ずdiv要素は書くようにしましょう。
本サンプルでは「id=”show_dialog”」となっているため、jQuery UIを使ったダイアログを呼び出す時には、このdiv要素で指定した「show_dialog」を利用します。

<div id="show_dialog"></div>

参考までに「title=”ダイアログのタイトル”」と指定すると、ダイアログボックスのタイトルが表示されます。

<div id="show_dialog" title="ダイアログのタイトル"></div>

ですが、今回のサンプルでは表示していません。
なぜかというと、同じHTMLページ上で、同じidに対してダイアログを表示すると、ダイアログ呼び出しの中でタイトルを指定しないと更新されないためです。
ここ、、ちょいとはまりました。。後で、詳しく説明します。

3.警告ダイアログの呼び出し

ここで、警告ダイアログがどうなっているのか、確認してみましょう。

// 警告ダイアログの表示
function ShowAlertDialog() {
	alert("これは警告ダイアログです");
}

はい、とてもシンプルです。alertを呼び出しているだけですね。
それでは、これをjQuery UIで実現するにはどのように書けば良いのでしょうか。

// 警告ダイアログの表示（JQuery）
function ShowJQueryAlertDialog() {
	var strTitle = "警告ダイアログ";
	var strComment = "ダイアログのメッセージ\nダイアログを閉じるためにはOKをクリックするか、右上の×ボタンをクリックしてください。";
	
	// ダイアログのメッセージを設定
	$( "#show_dialog" ).html( strComment );

	// ダイアログを作成
	$( "#show_dialog" ).dialog({
		modal: true,
		title: strTitle,
		buttons: {
			"OK": function() {
				$( this ).dialog( "close" );
			}
		}
	});
}

ダイアログを表示するためのメインどころは10行目からになります。
オプションがいろいろと設定できる事が、ありがたいのですが、今回はシンプルに最低限のオプションだけ指定してみました。

modal: モーダルダイアログを指定するためのオプションです。trueを設定するとモーダルダイアログになり、falseを設定するとモーダレスダイアログになります。モーダルダイアログとは、ブラウザ上の他のリンクなどをクリックできないようにし、表示されているダイアログのみを有効にするダイアログ設定であり、モーダレスダイアログは、その逆でブラウザ上の他のリンクも操作できるようにする設定になります。
title: ダイアログのタイトル設定です。タイトルを設定するには、先に説明したようにdiv要素の中でtitle属性を指定することでも動作しますが、同じダイアログ要素（今回はshow_dialog）に対して、複数のダイアログを表示するようにし、それぞれのダイアログが違うタイトルになるときには、このオプションで設定しないと変更されないので、ご注意ください。
buttons: ボタンを表示するときに、ここに記載します。

1.準備編(ライブラリの読み込み)

2.準備編(表示するHTMLの準備)

3.警告ダイアログの呼び出し

コメント