概要
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 を書きましたが、まだまだ捨てたもんじゃないなと思いました。
この記事は、別記事への布石として書きました。
↓の方にある*「この記事は以下の記事からリンクされています」* からリンクされてると思います。