0

我想创建一个 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);      
    });


}

样本

4

3 回答 3

2

试试这个：

// 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);
于 2013-10-04T07:14:56.893 回答
0

我对发布的代码做了一些小改动，它工作正常。修改部分突出显示。

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 对话框时添加了一个空按钮集。清除按钮集后，我已将按钮添加到其中。

于 2013-10-05T14:34:36.997 回答
0

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

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

$( ".selector" ).dialog({ 
    buttons: [ { 
        text: "Ok", 
        click: function() { 
            $( this ).dialog( "close" ); 
        } 
    } ] 
});
于 2013-10-04T06:51:40.613 回答