フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

jQuery UIで確認ダイアログを表示する

概要

window.confirm1のかわりに、jQuery UI の Dialogで確認ダイアログを表示してみましょう。

確認環境

Version
jQuery 1.12.4
jQuery UI 1.12.1

実装コード

以下の様にshowConfirmDialog関数を定義します。
引数として、messageの他に各ボタンクリック時のコールバック関数を渡すようにしましょう。

showConfirmDialog.js
/**
 * 確認ダイアログを表示します。
 * @param  {String} message ダイアログに表示するメッセージ
 * @param  {Function} [okFunction] OKボタンクリック時に実行される関数
 * @param  {Function} [cancelFunction] Cancelボタンクリック時に実行される関数
 */
function showConfirmDialog(message, okFunction, cancelFunction) {
  // Dialogを破棄する関数
  var _destroyDialog = function(dialogElement) {
    dialogElement.dialog('destroy'); // ※destroyなので、closeイベントは発生しない
    dialogElement.remove(); // ※動的に生成された要素を削除する必要がある
  };

  // Dialog要素(呼び出し毎に、動的に生成)
  var $dialog = $('<div></div>').text(message);

  // 各ボタンに対応する関数を宣言
  // ※Dialogを破棄後、コールバック関数を実行する
  var _funcOk     = function() { _destroyDialog($dialog); if (okFunction)     { okFunction();     } };
  var _funcCancel = function() { _destroyDialog($dialog); if (cancelFunction) { cancelFunction(); } };

  $dialog.dialog({
    modal: true,
    title: '確認',

    // 「閉じる」の設定
    // ※Cancel時の処理を「閉じる」に仕込むことで、Cancelと「閉じる」を同一の挙動とする
    closeText: 'Cancel',
    closeOnEscape: true,
    close: _funcCancel,

    // 各ボタンの設定
    buttons: [
      { text: 'OK',     click: _funcOk },
      { text: 'Cancel', click: function() { $(this).dialog('close'); } } // Dialogのcloseのみ
    ]
  });
}

このコードのポイントは以下です。

  • Dialog 用の要素を動的に生成している
    • Dialog を閉じるときに、要素を削除する必要がある
  • Dialog を「閉じる」挙動と、Cancel ボタンクリック時の挙動を同一にしている

詳細はコード中のコメントをご参照ください。

使い方

こんな感じです。

See the Pen jquery.ui-confirm by pale2f (@pale2f) on CodePen.

最後に

久しぶりに jQuery を書きましたが、まだまだ捨てたもんじゃないなと思いました。

この記事は、別記事への布石として書きました。
↓の方にある「この記事は以下の記事からリンクされています」 からリンクされてると思います。

[紹介元] jQueryタグが付けられた新着記事 – Qiita jQuery UIで確認ダイアログを表示する

コメント

記事に戻る

コメントを残す