辅助按钮图标未显示在JQueryUI

2024-05-19 • 问答

我正在学习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个图标，例如讲师的图标？

gmaj1986 回答：辅助按钮图标未显示在JQueryUI

注意：按钮小部件已在1.12中重写。某些选项已更改，您可以在1.11按钮文档中找到旧选项的文档。该小部件过去曾捆绑了对单选和复选框类型输入的支持，现已弃用，请改用checkboxradio小部件。它还用于捆绑buttonset小部件，也已弃用，请改用controlgroup小部件。

因此，快速解决方案是使用较旧的库：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>

这有效。

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

jquery-ui

本文链接：https://www.f2er.com/3119107.html

辅助按钮图标未显示在JQueryUI

gmaj1986 回答：辅助按钮图标未显示在JQueryUI

大家都在问