将图像添加到 jquery 按钮答案

【问题标题】：Add an image to the jquery button将图像添加到 jquery 按钮
【发布时间】：2012-06-21 15:32:00
【问题描述】：

我想知道如何将图像添加到 jquery 按钮。到目前为止，我在我的项目中使用 jquery ui 按钮，并且我从图形团队获得了自定义图像，所以我想实现它们。

submit.button({ icons: {primary:'ui-icon-trash'}, text: false })

如何为这个 jquery 按钮添加自定义图像？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-button

【解决方案1】：

我只想为按钮分配一个类...

$("#buttonId").button({

    icons: {primary: null},
    text: false

}).addClass("ButtonClass");

那么你的 CSS 类可能看起来像这样......

.ButtonClass
{
    background-image: url(../images/Button.png);   
    background-repeat: no-repeat; 
    border: none;    
}

【讨论】：

【解决方案2】：

<button>Trash</button>
<style>
    .ui-button .ui-button-icon-primary {
        background: url('/my-custom-trash-image.png');
    }
</style>
<script>
    $(function() {
        $('button').button({
            icons: {
                primary: 'ui-icon-trash'
            },
            text: false
        });
    });
</script>

不幸的是，您必须为primary 图标传递一个有效值，即使它不会被使用。

现场示例 - http://jsfiddle.net/aMVrz/

【讨论】：

谢谢，这很容易。但不幸的是，我在这里遇到了问题。我有另一个按钮和另一个图像。在这种情况下，当我设置主图标背景时，两个按钮将采用相同的图像。
给每个按钮一个 id 并在 CSS 中使用它。见jsfiddle.net/aMVrz/1。
我还有另一种情况，图像是 24x24 的，而我当前的按钮不适应图像，它吃掉了图像。按钮不会根据图像大小重新调整大小吗？
它不会因为它被应用为background-size。你最好的选择是做这样的事情 - jsfiddle.net/aMVrz/2。如果你想要更多的间距，你必须在button 上增加padding 并在span 上使用top 和left 值。
你太聪明了..它就像一个魅力:) 非常感谢！