如何应用多个 jQuery UI 主题

Posted 2023-03-06

【中文标题】如何应用多个 jQuery UI 主题

【英文标题】：How to apply multiple jQuery UI themes

【发布时间】：2011-05-14 02:55:44

【问题描述】：

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

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

【问题讨论】：

你的意思是完全切换样式表还是同时使用不同表单中的点点滴滴？

我不太确定你想做什么。理想情况下，您只需要一个主题，至少这是它背后的想法。

@dpmguise：我的意思是把它们混在一起，也就是小块。

@daff：我理解整个 CSS 框架的想法和好处。但我需要更多的灵活性。例如，我希望能够更改按钮的颜色...最好是在 ui-button-2 之类的衍生主题中...我不知道。

【参考方案1】：

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

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

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

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

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

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

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

如何使用：

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

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

【讨论】：

你能提供一个如何使用范围的例子吗？这个解释很好，但我更像是一只猴子，看到猴子做的人。

感谢您的精彩回答。一直在尝试解决这个问题！

【参考方案2】：

如果将此技术应用于覆盖并附加到正文的 UI 小部件 - 对话框、日期选择器、自动完成......

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

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

【参考方案3】：

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