jQueryUI Modal-添加多個按鈕

Question

使用jQuery UI時，可以在init之后設置模態按鈕，如下所示：

$( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );

但是我想做的是根據邏輯條件添加多個按鈕：

if ( canClose ){
    $( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );
}

if ( canAlert ){
    $( ".selector" ).dialog( "option", "buttons", { "Ok": function() { alert('Hello'); } } );
}

但是，上面的代碼無法正常工作，因為它每次都會重置按鈕數組。

如何在不丟失任何現有按鈕的情況下使用邏輯添加X個按鈕？

Answer 1

像這樣嘗試：

var buttons = {};

if (canClose) {
     buttons.Close = function() { $(this).dialog("close"); }
}

if (canAlert) {
    buttons.Alert = function() { alert('Hello'); }
}

$(".selector" ).dialog( "option", "buttons", buttons );

因此，您只創建一次對話框。 當然，按鈕需要兩個不同的名稱，否則第二個將覆蓋第一個。 但是，然后，沒有幾個帶有相同文本的按鈕，那就是很好的GUI設計。 ;）

Answer 2

使用按鈕數組選項創建兩個按鈕：

if ( canClose && canAlert )
    $( ".selector" ).dialog( "option", "buttons", [
        {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        },
        {
            text: "Ok",
            click: function() { alert('Hello'); }
        }
    ] );

Answer 3

我設法通過預先創建一個數組，然后將其分配給模式按鈕屬性來實現我的目標：

var buttons = new Array();

if ( occurance.canEdit ){
    buttons[buttons.length] = { text: "Edit", click: function(){ editOccurance(data[0],data[1]); } };
}

if ( occurance.canDelete ){
    buttons[buttons.length] = { text: "Delete", click: function(){ deleteOccurance(data[0],data[1]); } };
}

$( "#dialogOccurance" ).dialog( "option", "buttons", buttons );