jQuery UI 模态对话框：不显示按钮图标

Question

我的模态对话框工作完美（意味着我可以调整每个选项），除了按钮图标选项没有效果。这是我用来生成对话框的代码：

$('#alert_div')
    .attr("title", "Delete all instances?")
    .text("Are you sure you want to delete all instances of this event between the specificed dates?  This cannot be undone.")
    .dialog({
        modal: true,
        draggable: false,
        position: { my: "top", at: "center", of: window },
        buttons: [
            {
                text: "No",
                icons: { primary: "ui-icon-check" },
                click: function() {
                    $(this).dialog('close');
                    console.log('Clicked no.');
                }
            },
            {
                text: "Yes",
                click: function () {
                    $(this).dialog('close');
                    console.log('Clicked yes');
                }
            }
        ]
    });

我查看了所有我能找到的相关 Stack Overflow 问题——例如this one。除了在打开时将一个元素附加到按钮之外，我不知道如何解决这个问题。当我在文档的其他地方创建元素并为它们提供正确的 class 时，图标会正确显示。

这是打开对话框时为按钮生成的 HTML jQuery：

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>

我假设除了'[object Object] 在图标属性中。为什么会这样？我使用的是 jQuery UI v. 1.12.0 和 jQuery v. 3.0.0.，我没有使用 Bootstrap.

Answer 1

显然，问题是 jquery-ui 1.12.0 中的错误。如果您在 fiddle 中用 1.11.4 替换 1.12.0，问题就会消失。

我在我自己的测试环境中运行你的代码（你上面发布的代码，不是你 fiddle 中的代码），一切正常。（我在 5 月份下载了 1.11.4，当时它是最新的稳定版本。）似乎在调用 dialog() 时没有调用 button() 方法。正如您正确推测的那样，icons 元素中不应有 object Object。我的按钮代码如下所示：

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
    <span class="ui-button-text">No</span>
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>

看起来这可能是 jQuery-UI 1.12.0 中的 "real genuine bug"。 :)

编辑：看起来这实际上是 jQuery-UI 1.12.0 中的 "real genuine feature"，以及许多其他更改，其中一些更改与以前版本的兼容性中断.参见 Harpo 的 "new syntax" link。任何使用菜单（特别是菜单，旧的将不再起作用）、radiobuttons/checkboxes 或其他一些东西的人都会想阅读它。

至于在一个按钮上得到两个图标，用新的语法还是可以的，但是你不能用dialog()方法中的buttons参数来实现。相反，您必须以标准方式制作按钮，为图标添加跨度。（升级文档说您可以将第二个图标范围放在标记中，并使用 icon 参数作为曾经是主要图标的参数，但我无法让它在这种情况下工作.) 所以，对于标记：

<div id="alert_div">
    <button id="okButton">
        <span class="ui-icon ui-icon-check"></span>
        Ok
        <span class="ui-icon ui-icon-circle-check"></span>
    </button>
</div>

然后：

$('#alert_div').dialog({
    open: function(e, ui) {
        $('#okButton')
        .button()
        .on('click', function() {
            $(this).dialog('close');
        });
    }
});

Answer 2

jQuery UI 1.12 引入了一个 new syntax for button icons, which I have confirmed fixes this problem (see this jsFiddle). Currently, it doesn't accept the deprecated options; a PR has been submitted to fix that. See my bug report 以获取详细信息。以下代码适用于 jQuery UI 1.12 和 jQuery 3.1.0：

$("#alert_div")
.attr("title", "Error")
.text("Please choose a calendar and enter both start and end dates.")
.dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: { my: "top", at: "top", of: window },
    buttons: [{
        text: "OK",
        icon: "ui-icon-check",
        click: function() {
            $(this).dialog("close");
        }
    }]
});

Answer 3

请看看这是示例，我们可以对它做任何事情..

使用样式对其进行更改...

谢谢...:)

jQuery UI 模态对话框：不显示按钮图标

jQuery UI modal dialog: button icons do not appear

javascript

jquery

jquery-ui

jquery-ui-dialog

jquery-ui-button