使用自己的图像更改 jQuery UI 按钮的图标 [英] Change the icon of a jQuery UI button with own image

问题描述

目前我有以下 jQuery UI 按钮:

Currently I have the following jQuery UI button:

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

我希望为名为custom.png"的按钮使用自己的图像.

I wish to use own image for the button called 'custom.png'.

我如何才能做到这一点?

How I can achieve that?

推荐答案

自己定义一个样式，像这样:

Define a style yourself, like this:

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

然后在调用.button()的时候直接使用，像这样:

Then just use it when calling .button(), like this:

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

这假设您的自定义图标位于 CSS 下方的图像文件夹中……与 jQuery UI 图标映射通常位于同一位置.当图标被创建时，它得到一个这样的类:class="ui-icon ui-icon-custom"，并且那个 ui-icon 类看起来像这样(也许是一个不同的图像，取决于主题):

This assumes that your custom icon is in the images folder beneath your CSS...the same place as the jQuery UI icon map typically is. When the icon's created it gets a class like this: class="ui-icon ui-icon-custom", and that ui-icon class looks like this (maybe a different image, depending on theme):

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

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

So in your style you're just overriding that background-image, if needed change the width, height, etc.

这篇关于使用自己的图像更改 jQuery UI 按钮的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！