如何在创建Jquery对话框UI后添加按钮

Posted 2021-03-28

我想创建一个jquery对话框，需要添加按钮。

我正在使用以下代码在IE中工作正常，但在Mozilla中没有。

任何人都可以弄清楚这里的问题是什么？

function dialog_box(dynDiv, rootTemplate) {
    var dialog_buttons = rootTemplate.buttons;
    var dialog = $("#" + dynDiv.id).dialog({
        hide: "explode",
        title: rootTemplate.etype,
        buttons:'',
        text: rootTemplate.text,
        resizable: true,
        minWidth: 200,
        minHeight: 150,
        close: function () {
            $(dialog).dialog('destroy').remove();
        }
    });


    var buttonSet = $("#" + dynDiv.id).parent().find('.ui-dialog-buttonset');
    $.each(dialog_buttons, function (index, props) {
        var newButton = $('<button></button>', {
            id: "btn" + dynDiv.id + props.id,
            text: props.text
        });
        newButton.button().unbind().on("click", props.handler);

        $(buttonSet).append(newButton);      
    });


}

Sample

答案

试试这个：

// Retrieve buttons hash
var buttons = dialog.dialog("option", "buttons"); 
// Extend the hash (so you're able to keep the old buttons)
$.extend(buttons, { props.text: props.handler } );
// Set it again
dialog.dialog("option", "buttons", buttons);

另一答案

我在发布的代码中做了一些小改动，它运行正常。修改后的部分突出

function dialog_box(dynDiv, rootTemplate) {
        var dialog_buttons = rootTemplate.buttons;
        var dialog = $("#" + dynDiv.id).dialog({
            hide: "explode",
            title: rootTemplate.etype,
            **buttons:[{}],**
            text: rootTemplate.text,
            resizable: true,
            minWidth: 200,
            minHeight: 150,
            close: function () {
                $(dialog).dialog('destroy').remove();
            }
        });


        var buttonSet = $("#" + dynDiv.id).parent().find('.ui-dialog-buttonset');
        **$(buttonSet).empty();**
        $.each(dialog_buttons, function (index, props) {
            var newButton = $('<button></button>', {
                id: "btn" + dynDiv.id + props.id,
                text: props.text
            });
            newButton.button().unbind().on("click", props.handler);

            $(buttonSet).append(newButton);      
        });


    }

因此在创建JqueryUI对话框时添加了一个空按钮集。清除按钮组后，我已经添加了按钮。

另一答案

我认为您可以在创建对话框时使用按钮选项创建按钮作为选项：

http://api.jqueryui.com/dialog/#option-buttons

$( ".selector" ).dialog({ 
    buttons: [ { 
        text: "Ok", 
        click: function() { 
            $( this ).dialog( "close" ); 
        } 
    } ] 
});