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
|
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' } }); }
confirmDialog('この処理を続行しますか?', '確認', 'OK', 'キャンセル', function(cancel){ if (cancel) return;
});
|
ダイアログのベースとなる div は Document DOM ツリーに存在していなくてもいいので生成して、dialog() を呼び出すだけで動く。これは便利だ。dialog の引数で様々な設定が可能である。上記の例では見た目を一つのアプリで統一するので幅、高さなど固定で定義している。あとは modal 化と背景がクリックできないことを明示するために overlay を設定している。
ちょっとわかりづらいのは、buttons で表示ボタンがという設定できるのだが、ボタンのラベル値がキーであり、対となる値が選択時に走る関数の定義となるところだ。定義の例では、ボタン名としてキーを変数値にしたいために map[key] = func としてセットしている。
tilfin
freelance software engineer