jQuery-ui Dialog 使い方

[ Javascript, CSSのセット ]

jQuery-ui とテーマのCSS をセットします。他のjQuery-uiプラグインでも同じ


  <!-- jQuery本体 -->
  <script type="text/javascript" src="Script/js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="Script/js/jquery-migrate-3.0.0.min.js"></script>

  <!-- jQuery-ui -->
  <script type="text/javascript" src="Script/js/jquery-ui-1.9.2.custom.min.js"></script>
  
  <!-- jQuery-ui themes -->
  <link rel="stylesheet" type="text/css" href="Script/css/jquery-ui-themes-1.8.23/themes/${themanm}/jquery-ui.css" charset="UTF-8"/>
  <link rel="stylesheet" type="text/css" href="Script/css/jquery-ui-themes-1.8.23/themes/${themanm}/jquery.ui.all.css" charset="UTF-8"/>

[ コード例 (表示)]

下のようなのを外出しのjsに記述

単純ダイアログ


/**
 * 汎用単純ダイアログ ボタンテキスト指定
 * @param {type} obj divのid
 * @param {type} title タイトル
 * @param {type} msg メッセージ
 * @param {type} btntxt ボタンのテキスト
 * @returns {undefined} なし
 */
function simpleDialog2(obj, title, msg, btntxt) {
  var btns = {};
  btns[btntxt] = function () {
    $(this).dialog("close");
  };
  $(obj).html(msg);
  $(obj).dialog({
    title: title,
    modal: false,
    buttons: btns
  });
}

YES/NO ダイアログ、サイズ指定付


/**
 * 汎用確認ダイアログ サイズ指定
 * @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 confirmDialogWithWH(obj, title, msg, btntxt1, btntxt2, func, w, h) {

  var btns = {};
  btns[btntxt1] = function () {
    $(this).dialog("close");
    func();
  };
  btns[btntxt2] = function () {
    $(this).dialog("close");
  };
  $(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
  });

}

[ コード例 (ページ) ]

YESで実行したい処理は、確認ダイアログ表示の前に入れる


 var exec = function () {
   // ここに処理を入れる //
 };
 
 // 確認を入れる //
 confirmDialogWithWH($('#alertdialog'), '経緯度解除確認',
         nm + '<br><br>' + cellcontent + '\n',
         'する', 'しない', exec, 350, 200);