カテゴリー: JavaScript

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
  });

}

jQuery最高の教科書 [ シフトブレイン ] 価格：2838円（税込、送料無料) (2022/12/27時点) 楽天で購入