javascript - jQuery UI 模态对话框 : button icons do not appear

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 .除了在打开时将一个元素附加到按钮之外，我不知道如何解决这个问题。当我在文档的其他地方创建元素并为它们指定适当的类时，图标会正确显示。

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

<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 中的一个“真正的真正错误”。 :)

编辑:看起来这实际上是 jQuery-UI 1.12.0 中的一个“真正的正版功能”，还有许多其他更改，其中一些更改与以前版本的兼容性中断。请参阅 Harpo 的“新语法”链接。任何使用菜单(特别是菜单，旧的将不再起作用)、单选按钮/复选框或其他一些东西的人都会想阅读它。

至于在按钮上设置两个图标，使用新语法仍然可以实现，但是您不能使用 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');
        });
    }
});