Question

我有一个jQuery模式，如果满足条件语句，我想添加一个额外的按钮。

原始示例代码（缩减）：

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

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

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

或者，您可以创建所需的所有按钮，然后根据具体情况显示或隐藏它们，具体取决于对话框中发生的情况。一种这样的方法是使用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");
    }
});

Answer 3

目前无法修改一个按钮，但您可以重置使用选项方法的完整按钮哈希：

如果您的情况符合，则再次重置按钮。

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

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

条件按钮添加到jQuery模式

3 个答案: