jQueryUI Modal - 添加多个按钮

jQueryUI Modal - Adding multiple buttons

本文关键字：按钮 添加 Modal jQueryUI      更新时间：2023-09-26

当使用jQuery UI时，模态的按钮可以在初始化后设置，如下所示：

$( ".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 个按钮，而不会丢失任何现有按钮？

像这样尝试：

var buttons = {};
if (canClose) {
     buttons.Close = function() { $(this).dialog("close"); }
}
if (canAlert) {
    buttons.Alert = function() { alert('Hello'); }
}
$(".selector" ).dialog( "option", "buttons", buttons );

因此，您只创建一次对话框。当然，按钮需要两个不同的名称，否则第二个将覆盖第一个。但是，没有几个具有相同文本的按钮，这只是好的GUI设计。;)

使用按钮数组选项创建两个按钮：

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

我设法通过预先创建一个数组，然后将其分配给模态按钮属性来实现我的目标：

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 );
相关文章：