jquery - 用自己的图像更改jQuery UI按钮的图标

目前，我有以下jQuery UI按钮:

$('#button').button(
  {
    label: 'Test',
    icons: {primary: 'ui-icon-circle-plus', secondary: null}
  }
);

我希望将自己的图像用于名为“custom.png”的按钮。

我该如何实现？

最佳答案

自己定义样式，如下所示:

.ui-icon-custom { background-image: url(images/custom.png); }

然后只需在调用.button()时使用它，就像这样:

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

假设您的自定义图标位于CSS下方的images文件夹中...与jQuery UI图标映射通常位于同一位置。创建图标后，它会得到一个类似的类:class="ui-icon ui-icon-custom"，并且该ui-icon类看起来像这样(根据主题，可能是不同的图像):

.ui-icon {
  width: 16px;
  height: 16px;
  background-image: url(images/ui-icons_222222_256x240.png);
}

因此，在您的样式中，您只是覆盖background-image，如果需要，请更改宽度，高度等。

关于jquery - 用自己的图像更改jQuery UI按钮的图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3224537/