如何应用多个jQuery UI主题

Question

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

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

Answer 1

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

假设您要使用主题X设置元素A的样式，使用主题Y设置元素B的样式。jQueryTheme Roller内置了此功能。当您下载主题（here）时，单击高级主题设置在右边。在这里，您可以设置“ CSS范围”。这可以让您应用特定主题的jQuery UI类（即ui-corners-all等）。这是他们对此选项的说明：

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

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

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

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

但是，如果要创建一个全新的主题，从几个主题中借用点点滴滴，则有两个选择：自己编辑CSS和图像文件（不推荐），或使用主题滚轮工具创建自己的主题。

使用方法：

CSS Scope只是CSS选择器。假设主题X仅应应用于类aClass的所有元素。在这种情况下，您的CSS范围将为.aClass。因此，如果您想将主题X的圆角添加到元素（假设CSS范围已设置为.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中找到了解决方法，并附有教程和实际示例。