打开jqueryUI对话框后更改按钮中的文本

Question

我如何将取消按钮的文本从“CANCEL”更改为“CLOSE”？谢谢！

$("#dialog").dialog({
    buttons     : [
        {
            text    : 'SAVE',
            click    : function() {}
        },
        {
            text    : 'CANCEL',
            click    : function() {}
        }
    ]    
});
$("#button").click(function(){alert('Please change cancel button text from "CANCEL" to "CLOSE"');});

<div id="dialog"><button id="button">Change cancel button text from "CANCEL" to "CLOSE"</button></div>

- user1032531

---

写“关闭”而不是“取消”？ - Explosion Pills

@ExplosionPills。希望它一开始显示“取消”，但当用户点击按钮后，文本将更改为“关闭”。请注意，该按钮位于对话框内。 - user1032531

你尝试过文档中的setter吗？http://api.jqueryui.com/dialog/#option-buttons - greener

@greener 不是，但现在正在阅读它。 - user1032531

@ greener 也许我不理解，但我认为这并不适用。 - user1032531

Answer 1

为您的对话框指定类名，并从该类中选择UI按钮。

$('#foo').dialog({
    buttons: {
        CANCEL: function() {
            alert(1);
        }
    },
    dialogClass: 'my-dialog'
});
$('.my-dialog .ui-button-text:contains(CANCEL)').text('CLOSE');

- mattn

---

谢谢mattn。我不知道dialogClass。看起来它会起作用。我也不知道你是如何使用...uton-text:contains(CANCEL)的。你能详细说明一下吗？谢谢。 - user1032531

@user1032531 哈哈，写成$.each('.my-dialog .ui-button-text', function(){...})是可能的，但对我来说太长了。;) - mattn

了解打字太多的问题:) 对于这个如何运作仍然不确定。我会进行实验。 - user1032531

ui-button-text类元素未与与您的对话框无关的元素一起定位。因此，它不能使用从对话框类传递的选择器。所以我将dialogClass放入对话框中。然后，您可以通过对话框类来使用选择器。而contains()是一个Sizzle选择器，可以选择包含指定文本的元素。即这段代码可以动态地更改对话框按钮。 - mattn

谢谢，我会尝试一下。抱歉，我有点困了，明天再确认。 - user1032531

Answer 2

这是一件非常简单的事情 :)

$( "#dialog" ).dialog( {
    "buttons" : [
    {
        id: "my-button",
        text: "My button",
        click:function() {
            $("#my-button span").text( "Our button!:)" );
        }
    } ]
} );

- Олег Всильдеревьев

Answer 3

您可以在初始化之外设置按钮的文本（文档）：

$( "#dialog" ).dialog({
    autoOpen: true,
    buttons: [{
        text: "Cancel",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});
$( "#dialog" ).dialog( "option", "buttons", [ { text: "Close", click: function() { $( this ).dialog( "close" ); } } ] );

你还可以将它绑定到一个事件上。

- greener

---

谢谢您的提问。这个代码如何针对取消按钮而不是保存按钮？ - user1032531

不是的。但我猜测您是因为向服务器发送数据（“保存”）而更改文本，并希望向用户显示一个关闭对话框的按钮，我的猜测正确吗？ - greener

基本上就像你所说的。一个新的对话框打开，显示一个带有取消/保存按钮的输入表单。用户点击取消，它显然会关闭。用户点击保存，打开的输入表单变为不可编辑的文本（但附近有一个编辑按钮），并且取消按钮变成关闭。用户点击编辑按钮，关闭对话框按钮从关闭变成取消。 - user1032531

实际上，它是保存/取消，然后是编辑/关闭。保存和编辑有自己的行为，因为取消/关闭是相同的（它们关闭对话框），所以您只想更改文本。似乎mattn的解决方案很适合。或者，编写所有按钮并根据需要隐藏和显示。 - greener

是的，我开始采用创建按钮的方法，但是我认为一定有更好的方式。 - user1032531

Answer 4

重要的是要添加 []

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

- Chris Rosete