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

Posted 2023-02-22

【中文标题】使用自己的图像更改 jQuery UI 按钮的图标

【英文标题】：Change the icon of a jQuery UI button with own image

【发布时间】：2011-03-14 13:32:27

【问题描述】：

目前我有以下 jQuery UI 按钮：

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

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

我怎样才能做到这一点？

【参考方案1】：

看看 Nick Craver 的评论。我按原样尝试了他的答案，但它仍然没有帮助我。问题（我假设）是 ui-icon-custom 类位于类列表的末尾，并且似乎没有将其覆盖为原始 ui-icon 类背景图像。

我所做的就是将 !important 添加到图标 css 的末尾

.ui-icon-custom  background-image: url(images/custom.png) !important; 

您可能必须更改高度和宽度属性，但这对我有用。

【讨论】：

在与它斗争了几个小时后，最后的改变也为我做了。

又遇到了这个问题 :) 最后的更改为我节省了数小时的挫败感。

不使用 !important 的另一种方法是增加选择器的特异性 .ui-state-default .ui-icon-custom 应该可以工作。这样做的原因是在 jquery.ui.theme.css 中，选择器是：.ui-state-default .ui-icon。通过在选择器中只使用一个类，您的 CSS 将比 jQuery 主题更具体，并且不会被应用。 coding.smashingmagazine.com/2007/07/27/… 您可能还需要确保您的 CSS 文件在 jquery.ui.theme.css 之后加载（根据您的 html 中的 <link /> 标签）

供参考，jquery.ui.theme.css 中的定义位于here （这可能会随着文件的更新而改变。）

【参考方案2】：

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

.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，如果需要更改宽度、高度等。

【讨论】：

将图标大小更改为超过 32 左右并非易事，此外，1.8.1 版本中存在一个错误：bugs.jqueryui.com/ticket/5603

【参考方案3】：

也许我在 OP 中遗漏了一些东西，但这对我来说没有太大问题。您可以将按钮定义为 DIV 并在其中放置一个表格。没有覆盖 css，您仍然可以使用 jquery 定义的图标和您自己的自定义大小的图标。您还可以将图标放置在文本周围的任何位置（顶部、左侧、右侧等）。

$(document).ready(function()

    $('#btn').button();
);

---

<div id='btn'>
<table>
<tr>
<td><img src='images/custom.png'   /></td>
<td>Search</td>
</tr>
</table>
</div>

【讨论】：

很好的答案，它可以更好地控制按钮外观，同时仍然利用 jQuery UI .button() 构造。

这个答案简单明了，而且很有魅力。非常感谢。

这太过分了，你为什么不直接使用？与使用笨重的桌子相比，它的工作量要少得多，而且要整洁得多。

@php-jquery-programmer：有什么例子可以说明你的想法吗？

【参考方案4】：

在 jquery ui css 文件中搜索 ui-icon-circle-plus 类，然后将其复制为您自己的图像。

【参考方案5】：

如果只是在按钮上显示的图像，没有标签或文本，我会这样做：

$('#button').button();

将此图像元素替换为按钮：

<img src="images/custom.png"   id="button">

但如果你更喜欢使用标签或文本，上面的 tschlarm 解释会更好。

【参考方案6】：

查看此链接：

http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

.bouton-image  background: #004963; width: 80px; 
.ui-icon-wifi 
   width: 80px;
   height: 80px;
   background-color: #004963;
   background-image: url(../images/icones/icone_wifi_ispsm_mobile.png);
   background-position: 40% 40%;

<a title="" class="bouton-image" data-role="button" data-icon="wifi" data-iconpos="notext" data-inline="true"></a>

在“data-icon”中放任何你想要的东西，jquery 会为你创建类。

【参考方案7】：

容易或容易

#bildwechseln 
background-image: url('../images/my-png/bild.png');
width: 140px;
height: 140px;

<button id="bildwechseln"></button>

来自德国的问候