jquery - 如何制作仅自定义图标的 jQuery UI 按钮小部件？

Question

我正在尝试用 jQuery UI 来替代其他 RIA 技术，但我想制作一个仅图标按钮。我知道我们可以使用默认的主题滚轮图标来完成此操作，但我想使用我自己的图标。

我已经成功创建(参见 here )一个带有自定义图标和文本的自定义按钮，但如果我删除文本，它就会变得不成比例且丑陋。

我尝试过只包装 <img>在 <div>然后调用.button()放在上面，但它变得太大了；我真正想要的是有一个像主题附带的图标按钮，但使用我自己的图标。

希望我的表述清楚易懂，

FA

(想想 extJS 仅图标按钮或 Adob​​e Flex(你为什么抛弃我)仅图标按钮)

Answer 1

这似乎对我有用(改编自演示 here 和您提到的答案)。看起来关键是将 text 选项设置为 false:

JavaScript:

$('#button').button({
    text: false, /* Don't include text on the button */
    icons: {
        primary: 'ui-icon-custom'
    }
});

CSS:

#button > span.ui-icon-custom {
    background-image: url(http://placekitten.com/25/25)
}

示例: http://jsfiddle.net/ReKbf/

(对糟糕的占位符图像表示歉意)