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-ui テーマの動的変更

1)  JSPの自作カスタムタグを使った select を使う


<%@ taglib uri="/WEB-INF/htmythema.tld" prefix="MyThema" %>

2) 1) を使いたいところに配置


// マイテーマ選択用 //
      var themasel = "<MyThema:mythema realdir='' themaval='<%=cfg.getSeltheme()%>' />";

          // == 生成完了した時 == //
          gridComplete: function () {

      var THEMA_DIV = "<div style='float:right' id='mythemadiv'></div>";    

            // マイテーマ選択用 //
            $("#t_others").append(THEMA_DIV);
            $('#mythemadiv').html("MyTheme " + themasel);
            // テーマ変更 => リロード //
            $('#themasel').on('change', function () {
              $('#thmnm').val($(this).val());
              $('#thmchgform').submit();
            });

    <%-- テーマ変更用 --%>
    <%--<MyThema:mythema realdir="" themaval="<%=cfg.getSeltheme()%>"/>--%>
    <form id="thmchgform" method="post" action="export.jsp">
      <input type="hidden" name="thmchg" value="yes" />
      <input type="hidden" name="thmnm" id="thmnm" value="" />
    </form> 

3) 変更リクエストのactionは自ページで、変更内容はクッキーとセッションにセット (どっち使っても良いが、実際はセッションを使ってる)


  // テーマ変更で来た場合 //
  if (request.getParameter("thmchg") != null) {

    //  セッションに格納 //
    String thmnm = request.getParameter("thmnm");
    cfg.setSeltheme(thmnm);

    // クッキーに保存 //
    Cookie cookie = new Cookie("thema", thmnm);
    cookie.setMaxAge(60 * 24 * 60 * 60); //有効期間を60日間に設定
    response.addCookie(cookie);

  }

[ 画面例 ]

jQuery-ui テーマの設定と読込

[ 設定と読込 ]

    1. データベースにマスタを用意

CREATE TABLE `m_themacol` (
	`NM_THEMA` VARCHAR(20) NOT NULL COMMENT 'テーマ名',
	`NM_MENUCOL` VARCHAR(7) NOT NULL DEFAULT '' COMMENT 'メニュー背景色',
	`IS_DARKTHEME` TINYINT(4) NOT NULL DEFAULT '0',
	`TM_ADD` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '追加時刻',
	`TM_UPDT` DATETIME NOT NULL DEFAULT '2000-01-01 00:00:00' COMMENT '最終更新時刻',
	PRIMARY KEY (`NM_THEMA`)
)
COMMENT='jQueryUIテーマ別色設定'
COLLATE='sjis_japanese_ci'
ENGINE=InnoDB
;
  1. Startupのサーブレットでデータベースを読込、public static な変数に格納
  2. JSPで読込み、pageContextに格納
  3. スタイルシートのファイル名またはディレクトリ名のテーマ名部分を、pageContextの変数にする

jQuery-ui AutoComplete の使い方

テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示します。

[ コードサンプル ]


        // ++++ 港名サジェスト ++++ //
        // == 日本 == //
        /* テキストボックスのidに対して、autocompleteを設定 */
        $('#ldnm').autocomplete({
          //minLength: 3, <== 必要に応じてセット、デフォルトは1
          source: function (req, resp) {
            
            /* 検索レスポンスを返すサーブレットにaJaxでリクエスト 
               レスポンスはJSON型式文字列配列
            */
            $.ajax({
              url: "GetASItems",
              type: "POST",
              cache: false,
              dataType: "json",
              data: {tp: 'exp', jf: 'j', ldlk: $('#ldnm').val(), dclk: '', cntrycd: curcntrycd, dcnm: $('#dcnm').val()},
              success: function (o) {
                resp(o);
              },
              error: function (xhr, ts, err) {
                resp(['']);
              }
            });
          }
        });
        // == 海外 == //
        $('#dcnm').autocomplete({
          source: function (req, resp) {
            $.ajax({
              url: "GetASItems",
              type: "POST",
              cache: false,
              dataType: "json",
              data: {tp: 'exp', jf: 'f', ldlk: '', dclk: $('#dcnm').val(), cntrycd: curcntrycd, ldnm: $('#ldnm').val()},
              success: function (o) {
                resp(o);
              },
              error: function (xhr, ts, err) {
                resp(['']);
              }
            });
          }
        });

[ 画面例 ]

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

jQuery-ui Dialog について

ページで確認用ダイアログ、カスタムフォームなどを配置するための jQuery-ui のプラグインです。LightBoxと同じく、星の数ほどありますが、jQuery-ui 標準でシンプルなコードで済み、将来的不安がない事、業務アプリとしては、おしゃれなのは不要と判断し、採用してます。

本家 Home : https://jqueryui.com/dialog/

本家ドキュメント : http://api.jqueryui.com/dialog/

[ 画面例 ]

シングルボタン

マルチボタン

応用例 (ログインフォーム)

応用例 (テキストエリアの入力値送信)

応用例 (ファイルアップロード)

応用例 (登録フォーム)

jQuery-ui LightBox 使い方

[ Javascript, CSSのセット ]


  <script type="text/javascript" src="Script/js/lightbox.js" charset="UTF-8"></script>
  <link rel='stylesheet' href='Script/css/lightbox.css' />

[ コード例 ]

リンクタグの属性に、rel=’lightbox[imagegroup]’ を入れることで、LightBox がアフェクトする


        // サムネイル画像読込完了した時 //
        loadComplete: function () {

          // ストレッチ画像とライトボックスリンク //
          var IMG_HTML = "<a href='%HSRC%' rel='lightbox[imagegroup]' target='new' class='stshide'>" +
                  "<Img src='%SRC%' width='200px' height='150px' style='object-fit: contain;'></img></a>";


          // 画像表示とライトボックスリンク //
          /* html を置換て、LightBoxのリンクに行けるようにする */
          imguri = 'tmpimages/' + thumbdir + '/' + $(this).text();
          imguriact = 'tmpimages/' + thumbdir + '/' + $(this).text().slice(2);

          html = IMG_HTML.replace('%SRC%', imguri).replace('%HSRC%', imguriact);
          $(this).html(html);

jQuery-ui LightBox について

サムネイル画像とかで、クリックすると画像がふわっと現れるようにする、jQuery-uiのプラグインです。
同様のプラグインは他にも、星の数ほどありますが、特に画像を販売目的で使うわけでないので、落ち着いてシンプルな仕様のLightBoxを採用しています。

本家 Home : https://lokeshdhakar.com/projects/lightbox2/

説明ページ : https://kigiroku.com/frontend/lightbox.html

[ 画面例 ]