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

jQuery

JavaScriptの確認ダイアログ（confirm();）は、昔からあってシンプルで使いやすいのですが、もっとカッコ良いダイアログを表示したい。ダイアログにタイトルを付けたいと思った時に、ちょいと機能不足ですね。
そこで、jQueryとjQuery UIを使って作った、確認ダイアログをご紹介いたします。

1.準備編

ライブラリの読み込みや表示するためのHTMLの準備については、こちらをご確認ください。

2.確認ダイアログの呼び出し

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

// 確認ダイアログの表示
function ShowConfirmDialog() {
	if (confirm("これは確認ダイアログです。")) {
		alert("OKボタンがクリックされました");
	} else {
		alert("キャンセルボタンがクリックされました");
	}
}

はい、とてもシンプルです。confirmを呼び出しているだけですね。OKがクリックされるとtrueが返ってくるので、戻り値を見てOK、キャンセルの表示制御をしています。
それでは、これをjQuery UIで実現するにはどのように書けば良いのでしょうか。

// 確認ダイアログの表示(JQuery)
function ShowJQueryConfirmDialog() {
	var strTitle = "確認ダイアログ";
	var strComment = "これは確認ダイアログです。";
	
	// ダイアログのメッセージを設定
	$( "#show_dialog" ).html( strComment );
	
	// ダイアログを作成
	$( "#show_dialog" ).dialog({
		modal: true,
		title: strTitle,
		buttons: {
			"OK": function() {
				$( this ).dialog( "close" );
				ShowJQueryMessageDialog( "OKがクリックされました" );
			},
			"キャンセル": function() {
				$( this ).dialog( "close" );
				ShowJQueryMessageDialog( "キャンセルがクリックされました" );
			}
		}
	});
}

クリックされたボタンに対応するメッセージを表示している処理になります。
15行目や19行目でダイアログを閉じているのは、メッセージを表示するのも同じ要素に対するjQuery UIのダイアログにしているためです。
ということで、ここで呼び出しているシンプルなメッセージダイアログについても、参考ソースコードをご紹介いたします。

// メッセージダイアログの表示(JQuery)
function ShowJQueryMessageDialog( strComment ) {
	var strTitle = "メッセージダイアログ";
	
	// ダイアログのメッセージとタイトルを設定
	$( "#show_dialog" ).html( strComment );

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

ここで、一見あれ？と思われるのは12行目のbuttonsオプションの記述ですね。先程の確認ダイアログを呼び出して、続けてこのメッセージダイアログを呼び出すと、ボタンがそのまま表示されてしまいます。そこで、buttonを空にして上書きしているのですね。
この辺、もうちょっとスマートな書き方があるかもしれませんが･･･。

ということで、サンプルのソースコードをこちらにアップロードしましたので、興味がある方はご活用ください。

コメント