更改与自己的形象一个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（），就像这样：

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

这假定您的自定义图标中的图像文件夹下的CSS ...同一个地方的jQuery UI的图标通常地图是。当图标的创建它得到的一类像这样：类=UI图标UI图标定制，而 UI图标类看起来是这样的（也许不同的图像，这取决于主题）：

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); 
}

因此​​，在你的风格你只是覆盖了背景图片，如果需要更改宽度，高度等。

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

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