JQueryUI 中未显示辅助按钮图标

Question

我正在学习 JQuery 教程，我打算在其中显示带有主要和次要图标的 JQuery 按钮。讲师按钮如下所示：

对我来说相同的代码会显示如下按钮：

我的代码：

<!Doctype HTML>

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>

    <body>
        <button id="button1">Button 1</button>

        <script>
            $('#button1').button({
                icons: {
                    primary: 'ui-icon-mail-closed',
                    secondary: 'ui-icon-caret-1-e'
                }
            })
        </script>
    </body>
</html>

现在，当我注释掉 primary: '...' 选项时，我可以看到辅助按钮，但不能同时看到这两个按钮。 JQueryUI变了吗？我怎样才能像老师一样在按钮上显示2个图标？

Answer 1

Note: The button widget was rewritten in 1.12. Some options changed, you can find documentation for the old options in the 1.11 button docs. This widget used to bundle support for inputs of type radio and checkbox, this is now deprecated, use the checkboxradio widget instead. It also used to bundle the buttonset widget, this is also deprecated, use the controlgroup widget instead.

所以快速修复是使用旧库：1.11.4。示例：

$(function() {
  $('#button1').button({
    icons: {
      primary: 'ui-icon-mail-closed',
      secondary: 'ui-icon-caret-1-e'
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button1">Button 1</button>

这有效。

另一种方法是手动添加元素或使用控制组。

JQueryUI 中未显示辅助按钮图标

Secondary button icon not showing in JQueryUI

jquery-ui