如何在 jQuery UI 对话框中设置自定义按钮（文本）？答案

【问题标题】：How to set custom buttons (text) in jQuery UI Dialog?如何在 jQuery UI 对话框中设置自定义按钮（文本）？
【发布时间】：2010-08-20 11:59:07
【问题描述】：

我知道我们可以使用closeText 选项轻松地将Close 按钮文本设置为变量

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel, // <-----
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        Close: function() {
            $(this).dialog('close');
        }
    }
});

但是自定义名称怎么样？

这不起作用:(

var btnResetMapping = 'Reset Mapping';

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        Close: function() {
            $(this).dialog('close');
        },
        btnResetMapping: function() {  // <-----
            // logic here
        },
    }
});

这可以看作是一个奇怪的问题，但我的变量，在代码中是：

var btnResetMapping = '<%= Resources.PARbuttons.btnResetMapping %>';

witch 已从全局资源文件正确加载，并带有适用于本地化的正确句子。

使用它可以正常工作：

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        Close: function() {
            $(this).dialog('close');
        },
        '<%= Resources.PARbuttons.btnResetMapping %>': function() {  // <-----
            // logic here
        },
    }
});

但我将其重构为将 javascript 文件放在它自己的位置（单独的文件），我想，不仅这样做（将 HTML 与 Javascript 分开 - 它是一个始终从INTRANET，从不使用 Internet btw) 但要了解它。

谢谢。

【问题讨论】：

很好。您尝试将 btnResetMapping 中的字符串直接放入对象中？

标签： jquery-ui button jquery-ui-dialog

【解决方案1】：

您可以使用括号表示法，如下所示：

var myButtons = { Close: function() { $(this).dialog('close'); }  };
myButtons[btnResetMapping] = function() { ...logic here... };
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    closeText: btnCancel,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: myButtons
});

只要确保btnResetMapping 被定义之前这段代码运行，你都准备好了:)

【讨论】：