jquery - 如何应用多个 jQuery UI 主题

Question

有没有人有任何技术/提示/技巧来帮助我在一个应用程序中组织和实现多个 jQuery UI 主题？

我已经使用!important它，因为它似乎是强制样式覆盖的最可靠方法 - 但这种方法不是很理想。

Answer 1

是的，但这取决于你的意思。

假设您希望元素 A 使用 Theme X 设置样式，而元素 B 使用 Theme Y 设置样式。jQuery Theme Roller 内置了此功能。当您下载主题（此处）时，单击右侧的Advanced Theme Settings 。在这里，您可以设置“CSS Scope”。ui-corners-all这将允许您从特定主题应用 jQuery UI 类（即等）。以下是他们对此选项的描述：

此字段允许您指定 CSS 范围以将主题限制在页面的特定部分。这在页面上使用多个主题时很有帮助。如果您不提供 CSS 范围，您的主题将应用于页面上的所有 UI 元素。

在大多数情况下，您不需要指定 CSS 范围。请注意：如果您提供 CSS 范围，则下载中不会包含示例页面。

您还可以更改主题文件夹名称：

此字段允许您为下载的主题文件夹指定名称。如果您计划在一个页面上使用多个主题，这将很有帮助。它默认为“主题”。

但是，如果您想创建一个全新的主题，从几个主题中借用一些零碎的东西，您有两个选择：自己编辑 CSS 和图像文件（不推荐），或者使用主题滚轮工具创建自己的。

如何使用：

CSS Scope 只是一个 CSS 选择器。假设主题 X 应该仅适用于所有具有 class 的元素aClass。在这种情况下，您的 CSS 范围将是.aClass. 因此，如果您想将主题 X 中的圆角添加到元素（假设您的 CSS Scope 已设置为.aClass），您的 HTML 会像这样：

<div class='ui-rounded-corners aClass'>
    Content    
</div>

Answer 2

如果您将此技术应用于覆盖并附加到正文的 ui 小部件 - 对话框、日期选择器、自动完成...，您将遇到一些问题。

在自动完成的情况下，您可以执行以下操作来获取具有作用域类的父元素 - 将作用域类添加到自动完成本身的 UL 是不够的。

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});

Answer 3

搜索了几个小时，终于从FilamentGroup找到了方法，并附有教程和工作示例。