css - jQuery UI - 使用不同的图标 css 和 .button()

Question

想知道是否有人知道克服这个缺点的方法。

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

在我进一步介绍之前，我是如何设置按钮样式的:

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

似乎 icons 属性只接受 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 类的钩子(Hook)。样式(包括图标)的默认规则存储在您正在使用的主题目录中的 jquery-ui.css 中。

例如，在 jquery-ui.css of the base theme of 1.9.1你可以找到这些:

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