jQuery UI模式对话框：按钮图标不出现

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

$('#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'); 
       } 
      } 
     ] 
    });

我已经看过了我能找到的所有相关堆栈溢出问题 - 例如， this one。除了将元素附加到打开的按钮上，我不知道如何解决这个问题。当我在文档的其他地方创建元素并给他们适当的课程时，图标显示正确。

这里的HTML打开的对话框时，jQuery的生成按钮：

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

我猜想应该有比其他东西“的翻译：中的图标属性。这是为什么发生？我正在使用jQuery UI v。1.12.0和jQuery v。3.0.0。，并且我没有使用Bootstrap。

来源

2016-07-24 Harpo Jaeger

更新：这里是别人的报告几乎完全从一个而jQuery的论坛同样的问题后面：HTTPS：/ /forum.jquery.com/topic/adding-icons-to-dialog-buttons-and-setting-focus –

你检查过浏览器的控制台是否有错误？你有链接，我们可以看到，或者你可以创建一个jsFiddle或堆栈片段？ – j08691

在控制台上没有错误，但我会做一个jsFiddle，谢谢。支持。 –

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"); 
     } 
    }] 
});

来源

2016-07-25 12:33:56

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

我在自己的测试环境中运行了你的代码（上面发布的代码，而不是你的小提琴中的代码），并且一切正常。（我在五月份下载了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中的“真正的真正的bug”。 :)

编辑：看起来实际上这是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'); 
     }); 
    } 
});

来源

2016-07-24 21:45:20 BobRodes

谢谢！我认为我应该能够降级到1.11.4而不会破坏其他事情。所以现在的问题是：我该如何报告这个错误/帮助补丁呢？我只是打开一个新的GH问题（https://github.com/jquery/api.jqueryui.com/issues）还是我需要以某种方式使用jQuery的Trac？ –

我不知道，但谷歌搜索“jQuery的用户界面报告错误”揭示此页：https：//bugs.jqueryui.com/。我会从那里开始。 – BobRodes

好的，我会这样做，如果他们也问我，就提交GH问题。再次感谢你的帮助。 –

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

使用样式进行更改了进去......

谢谢... :)

来源

2016-07-25 14:14:20

这不回答这个问题。 –

jQuery UI模式对话框：按钮图标不出现

回答

相关问题