jQuery-ui Dialog で、機能豊富なダイアログにしようとして、少しはまったので備忘録しておきます。
デフォルトで下側にあるボタンを上側に配置するのは、セレクタを使って出来ました。
[ コード例 ]
// ボタンメニューを上に置く //
$(".ui-dialog-buttonpane").insertBefore("#alertdialog");
[ 単数ダイアログ画面例 ]
ダイアログ画面から、更にダイアログが現れる場合、
[ 複数ダイアログ画面例 ]
[ 確認ダイアログを閉じた後の状態 ]
閉じたダイアログのボタンが現れてしまいます。
しばらく悩んだ後、わかった原因と解消方法は、jQuery のセレクタの insert で、クラスを指定しているのが原因で、2個目のダイアログのクラスを remove することで解消しました。
[ コード例 ]
/**
* 汎用確認ダイアログ サイズ指定 Close後ボタンクラス削除
* @param {type} obj divのid
* @param {type} title タイトル
* @param {type} msg htmlメッセージ
* @param {type} btntxt1 左ボタン
* @param {type} btntxt2 右ボタン
* @param {type} func Yesの場合の関数を参照渡し
* @param {type} w 幅
* @param {type} h 高さ
* @returns {undefined} なし
*/
function confirmDialogWithWHRemove(obj, title, msg, btntxt1, btntxt2, func, w, h) {
var btns = {};
btns[btntxt1] = function () {
$(obj).dialog("close");
func();
// insert into で上にすると元ダイアログで見えるので //
$(".ui-dialog-buttonpane").eq(1).remove();
};
btns[btntxt2] = function () {
$(obj).dialog("close");
// insert into で上にすると元ダイアログで見えるので //
$(".ui-dialog-buttonpane").eq(1).remove();
};
$(obj).html(msg);
$(obj).dialog({
title: title,
modal: false,
width: w, height: h,
open: function () {
// フォーカスボタンのセット //
$(this).siblings(".ui-dialog-buttonpane").find('button:eq(1)').focus();
},
buttons: btns
});
}
