jQuery UI-使用.button()使用其他图标CSS

Question

想知道是否有人知道一种打击这种缺点的方法。

我在所有按钮操作中使用jQuery UI按钮，而库存图标有点无聊，我更喜欢使用Twitter Bootstrap中的图标集。

在我走得更远之前，我是如何设计按钮的方式：

$('#juiBtnLocked').button({
    disabled: true,
    icons: {
        primary: "ui-icon-locked"
    }
});

看来，图标属性仅接受jQuery UI CSS样式，我不知道为什么这应该因为提供的值是CSS文件中的完整CSS名称，因此从逻辑上讲应该技术上受给出的任何CSS规则。

我的问题是，是否有人成功获得了另一个CSS Sprite代码来使用按钮？

回答有关为什么我不仅使用Twitter按钮的问题，因为这打破了jQuery UI按钮，而且我使用了太多的jQuery UI工具包将其抛弃。如果Twitter对话框更强大，我会略微浏览jQuery UI，但它太有限了。

Answer 1

您只需使用CSS覆盖该类的样式。

.ui-icon-locked {
    background: url(myimage.png) no-repeat 0 0;
}

ui-icon-locked不是CSS规则。它只是HTML类的钩子。样式的默认规则（包括图标）存储在您使用的主题目录中的jquery-ui.css中。

例如，在1.9.1的基本主题的jquery-ui.css中，您可以找到这些：

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
...
.ui-icon-locked { background-position: -192px -96px; }

Answer 2

bažmegakapa所说的是一个很好的答案，这就是为什么我将其标记为答案，但是我找到了另一种使我两种用法的方法。我在这里写它，所以人们知道另一种方法。

使用Twitter bootstrap，您拥有按钮CSS，然后您的按钮JS代码与JQuery UI相似。

我所做的只是从他们的按钮中取出JS代码，然后使用CSS规则来设置我的按钮。现在jQuery UI很高兴，我也是。

我注意到这种方法将在Twitter引导程序中使用其他一些内容。

这实际上是一个更好的解决方案，因为我现在控制了所有HTML，而与制作按钮元素相比，所有HTML都受到了控制，并使用JQuery UI进行了样式和模拟，这有点过高。