了解 jQuery UI 按钮小部件答案

【问题标题】：Understanding jQuery UI Button Widget了解 jQuery UI 按钮小部件
【发布时间】：2019-09-04 15:15:16
【问题描述】：

我希望在更新到最新版本后重新创建以下按钮（按钮小部件从 1.12 开始重写，但是我正在努力根据此处的 api 文档获取正确的语法/类：https://api.jqueryui.com/button/

按钮应该看起来像

但到目前为止，我得到的最接近的是

上面用来显示的代码如下

<button id="btnAddNew" type="button" title="New User Access" role="button" aria-disabled="false"></button>


    $("#btnAddNew").button({
    classes: {
        "ui-button": "ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    },
    icons: {
        primary: "ui-icon-plus"
    },
    label: "New"
});

谁能指出我哪里出错了？

【问题讨论】：

在旁注中，您可能希望摆脱 jQuery UI 并寻找替代库，因为该项目本身已多年未更新并且似乎已死或至少死了。跨度>
是的，我同意，我通常会迁移到引导程序，但我没有该选项，只需要更新现有代码以使其看起来像以前一样。

标签： jquery-ui jquery-ui-button

【解决方案1】：

使用 Cupertino 主题似乎没有问题。我怀疑没有为您的脚本加载 CSS。我会检查以确保它没有收到 404 错误或没有其他样式冲突。

$(function() {
  $("#btnAddNew").button({
    icons: {
      primary: "ui-icon-plus"
    },
    label: "New"
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="btnAddNew" type="button" title="New User Access" role="button" aria-disabled="false"></button>

如果您仍有问题，请提供一个可重现的最小示例：https://stackoverflow.com/help/minimal-reproducible-example

希望对您有所帮助。

【讨论】：