jQuery-ui Dialog のボタン位置変更と 2個目 のダイアログのハンドリング

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時点)

 

コメントを残す