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

Question

我正在尝试将jQuery UI作为其他RIA技术的替代品,但我想制作一个仅限图标的按钮.我知道我们可以使用默认的主题滚轮图标,但我想使用自己的图标.

我已成功创建(请参阅此处)带有自定义图标和文本的自定义按钮,但如果我删除该文本则会变得不成比例且难看.

我试过把<img>a 包裹起来<div>然后再调用.button()它但它变得太大了; 我真正想要的是拥有一个像主题一样的图标按钮,而不是使用我自己的图标.

希望我已经清楚易懂了,

F A

(想想extJS icon-only按钮或Adobe Flex(你为什么要离弃我)只有图标的按钮)

Answer 1

这似乎对我有用(改编自这里的演示和你提到的答案).看起来关键是将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/

(为可怕的占位符图像道歉)