添加一个JQuery对话框底部按钮的名称

Question

我试图添加一个名称(不是显示的文本)到底部面板上的按钮，找不到一种方法来做到这一点。

这是我到目前为止所做的…

    $("#dialog-import-from-existing").dialog({
        title: "Import From Existing",
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 500,
        height: 525,
            buttons: {
                **name : "SubmitButton",**
                "Import": function() {
                $('#CreateForm').submit();
                $(this).dialog('close');
            },
            "Cancel": function() {
                //Need to added the js files to Driver studio.
                //$("models-to-add-container").effect("explode");
                $(this).dialog('close');
            }
            }
        });

我想把这个按钮命名为"SubmitButton"。

Answer 1

按钮选项有两个api。您使用的是将按钮标签映射到单击函数的原始的、更简单的API。你也可以使用对象数组，这给了你更多的控制。

$( "#dialog-import-from-existing" ).dialog({
    ...
    buttons: [
        {
            name: "SubmitButton",
            text: "Import",
            click: function() {
                $( "#CreateForm" ).submit();
                $( this ).dialog( "close" );
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
   ]
});

这个API允许你传递任何可以传递给.attr() +事件处理程序的东西。

Answer 2

尝试:

$("#dialog-import-from-existing").dialog({
    ...
    open: function() {
        $(this).parent().find('.ui-dialog-buttonpane button:contains("Import")').
            attr('name', 'SubmitButton');
    }
});

(改进自jQuery UI对话框按钮图标)