使用自己的图像更改 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屋!