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

使用buttons array选项创建两个按钮：

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 );

jQueryUI模态 - 添加多个按钮

3 个答案: