jqueryuiのdialog

質問

複数指定したいのですが簡単な方法ってありますでしょうか？
具体的には基本的な設定は全ダイアログで共通なのですがbuttonsの設定をそれぞれで変えたく思っています。

想定のパターンとしては以下の通りです。
・OkとCancelボタン
・Okボタン
・ボタンなし

単純に必要な分だけ同様に加えればできるかと思うのですがあまりにも単調な気が・・・

現在のhtmlとjsは以下の通りです。詳しい方がいらっしゃいましたら宜しくお願い致します。

<a href="#" id="dialog_link">Open Dialog</a>
<div id="dialog" title="title">内容</div>

// Dialog
$('#dialog').dialog({
autoOpen: false,
buttons: {
"Ok": function() {
//処理
},
"Cancel": function() {
//処理
}
}
});

// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});

回答No.3

noname#94983

あー、細かいところで書き間違いがいくつかあるが、とりあえず以下で動くと思う。

// Dialog
function showDlg(n){

var open;
var size;
var btns;

switch(n){
case 0:
open = false,
size = 400,
btns = {};
break;
case 1:
open = true,
size = 500,
btns = {
"Ok":function(){
$(this).dialog("close");
}
};
break;
case 2:
open = false,
size = 600,
btns = {
"Ok":function(){
$(this).dialog("close");
},
"Cancel":function(){
$(this).dialog("close");
}
};
break;
}

$('#dialog').dialog({
autoOpen: open,
width: size,
modal: true,
buttons: btns
});

$('#dialog').dialog('option', 'autoOpen', true);
$('#dialog').dialog('option', 'width', size);
$('#dialog').dialog('option', 'buttons', btns);
$('#dialog').dialog('open');

}

$(document).ready(function(){

// Dialog Link
$('#dialog_link0').click(function(ev){
showDlg(0); // ボタンなしで表示
return false;
});

$('#dialog_link1').click(function(ev){
showDlg(1); // "ok"ボタンを表示
return false;
});

$('#dialog_link2').click(function(ev){
showDlg(2); // "ok","cancel"ボタンを表示
return false;
});

});

まだ読み込んでないタグのDOMを利用した初期化処理は、$(document).readyでやらないとうまく機能しないので注意。他は、だいたいケアレスミスなのでよく見てほしい。

回答No.2

noname#94983

＞箇所のみautoOpenをtrueにしたく以下のように設定してみましたがうまくいきません。
＞このような事をする場合どうすればいいのでしょうか？

そのような場合には、

dialog('option',属性,値)

こんな感じで呼び出して、明示的にプロパティの値を変更すればいいと思う。dialog('option','autoOpen',true)とかで修正できるはず。（今、ちと手元に環境がないので試してないが）

補足

ご丁寧にお返事頂きありがとうございます。
最初のサンプルの見よう見まねではありますが以下のように設定したところjsが機能しなくなってしまいました。

// Dialog
function showDlg(n){

var open;
var size;
var btns;

switch(n){
case 0:
open: false,
size: 400,
btns = {};
break;
case 1:
open: true,
size: 500,
btns = {
"Ok":function(){
$(this).dialog("close");
}
};
break;
case 2:
open: false,
size: 600,
btns = {
"Ok":function(){
$(this).dialog("close");
},
"Cancel":function(){
$(this).dialog("close");
}
};
break;
}

$('#dialog').dialog({
autoOpen: open,
width: size,
modal: true,
buttons: btns
});

$('#dialog').dialog('option', 'autoOpen', open);
$('#dialog').dialog('option', 'width', size);
$('#dialog').dialog('option', 'buttons', btns);
$('#dialog').dialog('open');

}

// Dialog Link
$('#dialog_link0').click(function(){
showDlg(0); // ボタンなしで表示
return false;
});

$('#dialog_link1').click(function(){
showDlg(1); // "ok"ボタンを表示
return false;
});

$('#dialog_link2').click(function(){
showDlg(2); // "ok","cancel"ボタンを表示
return false;
});

また、気になる事があるのですかた上記からsizeの定義を全て外すと動作するのですがダイアログに
表示する内容が最初から表示されてしまいます。
※一度ダイアログを開いて閉じると表示されなくなるようです

<div id="dialog" title="title" style="display: none;">
ダイアログの内容
</div>

としdisplay: none;を入れるとひとまず解決できるのですがデモでは表示されなかったので
どうにかならないものかと。。。

回答No.1

noname#94983

つまり、呼び出す際に、表示するボタンなどをカスタマイズして表示できるようにしたい、ということだろうか。ならば、表示する前に必要な設定を行えばいい。

function showDlg(n,msg){
var btns;
switch(n){
case 0:
btns = {};
break;
case 1:
btns = {"Ok":function(){alert('ok');$(this).dialog("close");}};
break;
case 2:
btns = {"Ok":function(){alert('ok');$(this).dialog("close");},"Cancel":function(){alert('cancel');$(this).dialog("close");}};
break;
}
$('#dialog').text(msg);
$('#dialog').dialog({modal:true,buttons:btns});
$('#dialog').dialog('option','buttons',btns);
$('#dialog').dialog('open');
}

例えば、こんな感じで、ダイアログを呼び出す際の設定などを行ってから表示するように調整しておく。この場合だと、

showDlg(0,'テスト0'); // ボタンなしで表示
showDlg(1,'テスト1'); // "ok"ボタンのみ表示
showDlg(2,'テスト2'); // "ok","cancel"ボタンを表示

こんな具合に表示するボタンとメッセージを設定できる。

お礼

お返事ありがとうございます。
説明不足なようでしたが思い通りの事ができました！1つ質問なのですがOKボタンのみを表示する
箇所のみautoOpenをtrueにしたく以下のように設定してみましたがうまくいきません。
このような事をする場合どうすればいいのでしょうか？

function showDlg(n, msg){

var btns;
var open;

switch(n){
case 0:
open: false,
btns = {};
break;
case 1:
open: false,
btns = {
"Ok":function(){
$(this).dialog("close");
}
};
break;
case 2:
open: true,
btns = {
"Ok":function(){
$(this).dialog("close");
},
"Cancel":function(){
$(this).dialog("close");
}
};
break;
}

$('#dialog').text(msg);
$('#dialog').dialog({
autoOpen: open,
buttons:btns
});
$('#dialog').dialog('option', 'buttons', btns);
$('#dialog').dialog('open');

}

$('#dialog_link').load(function(){
showDlg(1); // "ok"ボタンを表示
return false;
});