jQuery UI の Dialog を使って確認用モーダルダイアログを実装するには

June 16, 2008

jQuery UI (http://ui.jquery.com/) には便利なコンポーネントがある。このダイアログを使ってユーザーへの確認に使うモーダルダイアログを作りたい。
設定仕様に幅がある分、わかりずらいところがある。ということで下記のように手軽に使える用に関数を作ってみた。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
* 確認ダイアログ
*
* message : ダイアログのメッセージ本文
* title : ダイアログのタイトル
* buttonok : OKボタンのテキスト
* buttoncancel : キャンセルボタンのテキスト
* response : コールバック関数を指定する。引数 cancel にボタン選択の結果が入る。
* OK ならば false キャンセルならば true となる。
*/
function confirmDialog(message, title, buttonok, buttoncancel, response){
var _dlg = $('<div>'+message+'</div>');
var _buttons = {};
_buttons[buttonok] = function(){$(this).dialog('close');response(false)};
_buttons[buttoncancel] = function(){$(this).dialog('close');response(true)};
_dlg.dialog({
modal:true,
draggable:false,
title:title,
height:130,
width:320,
buttons:_buttons,
overlay:{ opacity:0.3, background:'#225B7F' }
});
}
/* Sample */
confirmDialog('この処理を続行しますか?', '確認', 'OK', 'キャンセル',
function(cancel){
if (cancel) return;
/*------------
処理を書く
------------*/
});

ダイアログのベースとなる div は Document DOM ツリーに存在していなくてもいいので生成して、dialog() を呼び出すだけで動く。これは便利だ。dialog の引数で様々な設定が可能である。上記の例では見た目を一つのアプリで統一するので幅、高さなど固定で定義している。あとは modal 化と背景がクリックできないことを明示するために overlay を設定している。
ちょっとわかりづらいのは、buttons で表示ボタンがという設定できるのだが、ボタンのラベル値がキーであり、対となる値が選択時に走る関数の定義となるところだ。定義の例では、ボタン名としてキーを変数値にしたいために map[key] = func としてセットしている。

tilfin freelance software engineer