M-Gate

jQuery UIを使ったダイアログボックスはいろいろとカスタマイズが可能です。
ということで、今回はボタンのデフォルトフォーカスを変更する方法について紹介します。

今回は以前ご紹介した「jQueryとjQuery UIを使った確認ダイアログボックス」と比較して説明します。
確認ダイアログボックスは”OK”と”キャンセル”ボタンが表示されるダイアログですが、通常は左側の”OK”がデフォルトフォーカスとなります。
ですが、以下のソースコードにある23行目～25行目を記載することで、フォーカスをカスタマイズできます。
ポイントは24行目の「button:eq(1)」で、この数字（今回は1）がデフォルトフォーカスの対象となるボタンになります。
もちろん、0が一番上で、2番目が1となりますね。

// 確認ダイアログの表示(JQuery)：ボタンのデフォルトフォーカスを変更
function ShowJQueryConfirmDialog_focus() {
	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( "キャンセルがクリックされました" );
			}
		},
		open: function() {		// キャンセルボタンにフォーカスをあてる
			$( this ).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
		}
	});
}

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

Tweet

Pocket

関連記事:

jQueryとjQuery UIを使った確認ダイアログボックス jQueryとjQuery UIを使った文字入力ダイアログ jQueryとjQuery UIを使った警告ダイアログボックス jQueryのバージョンについて