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

Question

我的模态对话框完美运行（意味着我可以调整每个选项），但按钮图标选项无效。这是我用来生成对话框的代码：

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

我已经查看了我能找到的每个相关的Stack Overflow问题 - 例如this one。除了在打开时将元素附加到按钮上，我也不知道如何解决这个问题。当我在文档中的其他位置创建元素并为其提供正确的类时，图标会正确显示。

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

<uses-permission android:name="android.permission.CAMERA" />

我假设应该有＆＃39; [object Object]以外的东西  在图标属性中。为什么会这样？我正在使用jQuery UI v.1.12.0和jQuery v.3.0.0。而且我没有使用Bootstrap。

Answer 1

显然，问题是jquery-ui 1.12.0中的一个错误。如果你在小提琴中用1.11.4代替1.12.0，问题就会消失。

我在自己的测试环境中运行了你的代码（上面发布的代码，而不是你小提琴中的代码），一切正常。 （我在5月下载了1.11.4，这是最新的稳定版本。）似乎button()方法在调用dialog()时没有被调用。正如你猜测的那样，object Object元素中的icons不应该是<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> 。我的按钮代码如下所示：

buttons

看起来这可能是一个真正的真正的错误＆＃34;在jQuery-UI 1.12.0中。 ：）

编辑：看起来实际上这是一个真正的真实功能＆＃34;在jQuery-UI 1.12.0中，还有许多其他更改，其中一些更改破坏了与以前版本的兼容性。请参阅Harpo＆＃34;新语法＆＃34;链接。使用菜单的任何人（特别是菜单，旧的菜单将不再起作用），无线电按钮/复选框或其他一些东西都会想要阅读它。

至于在按钮上获取两个图标，使用新语法仍然可以，但您无法使用dialog()方法中的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');
        });
    }
});

然后：

$_POST['emailAddress'] = strtr(trim($_POST['emailAddress']), array("\n"=>'', "\r" => ''));

Answer 2

jQuery UI 1.12引入了new syntax for button icons，我已经确认已修复此问题（请参阅this jsFiddle）。目前，它不接受已弃用的选项;一个PR has been submitted来解决这个问题。有关详细信息，请参阅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

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

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

谢谢...：）