Question

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

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

Answer 1

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

假设你想要使用Theme X设置元素A，使用Theme Y设置元素B. jQuery Theme Roller内置了此功能。当您下载主题（here）时，请单击右侧的高级主题设置。在这里，您可以设置“CSS范围”。这将允许您从特定主题应用jQuery UI类（即ui-corners-all等）。以下是他们为此选项所做的描述：

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

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

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

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

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

使用方法：

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

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

Answer 2

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

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

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

Answer 3

嘿 - 搜索了几个小时，终于找到了从FilamentGroup做到这一点的方法，并附有教程和工作示例。
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

如何应用多个jQuery UI主题

3 个答案: