jQueryとjQuery UIを使った文字入力ダイアログ

JavaScriptの文字入力ダイアログ（prompt();）は、ちょっと何かを入力してもらうUIを作るときには、とても便利な機能ですが、もっとカッコ良いダイアログを表示したい。ダイアログにタイトルを付けたいと思った時に、ちょいと機能不足ですね。
そこで、jQueryとjQuery UIを使って作った、文字入力ダイアログをご紹介いたします。

1.準備編

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

2.文字入力ダイアログの呼び出し

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

// 文字入力ダイアログの表示
function ShowInputDialog() {
	var ret;
	ret = prompt("これは文字入力ダイアログです。入力した文字が表示されます。", "初期入力されている文字列です");
	if (ret==null) {
		alert("キャンセルボタンがクリックされました");
	} else {
		alert("入力された文字は「" + ret + "」です。");
	}
}

はい、とてもシンプルです。promptを呼び出して、入力された文字列を戻り値として処理をしています。キャンセルがクリックされるとnullが返ってくるので、nullをキーにして分岐することでメッセージを変える処理を入れています。
それでは、これをjQuery UIで実現するにはどのように書けば良いのでしょうか。

// 文字入力ダイアログの表示(JQuery)
function ShowJQueryInputDialog() {
	var strTitle = "文字入力ダイアログ";
	var strComment = "これは文字入力ダイアログです。";
	
	// ダイアログのメッセージを設定
	$( "#show_dialog" ).html( '<p>' + strComment + '</p><input type="text" name="inputtxt" id="inputtxt" value="初期入力されている文字列です" />' );

	// ダイアログを作成
	$( "#show_dialog" ).dialog({
		modal: true,
		title: strTitle,
		buttons: {
			"OK": function() {
				$( this ).dialog( "close" );
				ShowJQueryMessageDialog("入力された文字は「" + $( "#inputtxt" ).val() + "」です。");
			},
			"キャンセル": function() {
				$( this ).dialog( "close" );
				ShowJQueryMessageDialog( "キャンセルがクリックされました" );
			}
		}
	});
}

テキストボックスを7行目のcomment部分の記載できてしまうのが、ポイントですね。入力力結果を表示するために、メッセージのみを表示するダイアログを利用しています。このソースコードはこちらで説明しているので、見ていない方はご確認くださいな。

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

Pocket

M-Gate

information for your tasks and life