jquery - 条件按钮添加到 jQuery 模式

Question

我有一个 jQuery 模式，如果满足条件语句，我想在其中添加一个附加按钮。

原始示例代码（删减）：

$("#dialog").html("<div></div>").dialog({
    title: "Some Title",
    modal: true,
    width: 550,
    buttons: {
        Ok: function() {
            //
        },
        'A Button': function() {
            //
        }
    }
}).dialog('open');

因此，正如您在上面看到的，有一个带有 2 个按钮的模式，但我还想在其中添加一些动态代码，以便在设置变量时能够满足额外的按钮。例如

var some_variable = 0;

$("#dialog").html("<div></div>").dialog({
    title: "Some Title",
    modal: true,
    width: 550,
    buttons: {
        Ok: function() {
            //
        },
        'A Button': function() {
            //
        }
        /* ??? */
        if (some_variable==1) //then add the other button's code here..
        /* ??? */
    }
}).dialog('open');

Answer 1

您可以buttons在创建对话框之前创建对象：

//Create the buttons object
var buttons = {
    Ok: function() {},
    'A Button': function() {}
};

//Add another button to that object if some condition is true
if(something) {
    buttons['B button'] = function() {};
}

//Create the dialog, passing in the existing buttons object
$("#dialog").html("<div></div>").dialog({
    buttons: buttons,
    //Other options
});

Answer 2

目前没有办法只修改一个按钮，但您可以使用 option 方法重置完整的按钮哈希：

如果您的条件满足，则再次重置按钮。

$('#contactform').dialog('option', 'buttons', {...});

http://old.nabble.com/jQuery-dialog-add-remove-button-on-the-fly-td22036498s27240.html

Answer 3

或者，您可以创建所需的所有按钮，然后根据具体情况以及对话框中发生的情况显示或隐藏它们。这样做的一种方法是使用 jqueryui 对话框创建事件。

您可以参考以下工作示例：http: //jsfiddle.net/eCLuy/

$("#dialog").dialog({
    buttons: {
        'prev': {
        text: 'prev',
        id: "prevB",
        click: function() {
            $(this).closest(".ui-dialog").find(".ui-button#prevB").addClass("hidden");            
            $(this).closest(".ui-dialog").find(".ui-button#nextB").removeClass("hidden");               
        }
        },        
        'next': {
            text: 'next',
            id: "nextB",
            click: function() {
                $(this).closest(".ui-dialog").find(".ui-button#prevB").removeClass("hidden");               
                $(this).closest(".ui-dialog").find(".ui-button#nextB").addClass("hidden");            
            }
        }        
    },
    // http://api.jqueryui.com/dialog/#event-create
    // Triggered when the dialog is created.
    // Initialize the dialog with the create callback
    create:function () {
        $(this).closest(".ui-dialog").find(".ui-button#prevB").addClass("hidden");
    }
});