如何应用多个jQuery UI主题 [英] How to apply multiple jQuery UI themes

问题描述

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

导致使用！important ，因为它似乎是强制样式覆盖的最可靠的方法 - 但是这种方法是不太可取的。

I have resulted to using !important as it seems to be the surest way to force style overrides - but this method is not very desirable.

推荐答案

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

Yes, but it depends on what you mean.

假设您希望元素A使用主题X样式，元素B使用主题Y. jQuery Theme Roller具有内置的功能。当您去下载主题（此处），请点击右侧的高级主题设置。在这里，您可以设置CSS Scope。这将允许您应用来自特定主题的jQuery UI类（即 ui-corners-all 等）。以下是此选项的说明：

Let's say you want element A to be styled with Theme X, and element B with Theme Y. jQuery Theme Roller has this feature built in. When you go to download a theme (here), click Advanced Theme Settings on the right. Here, you can set the "CSS Scope". This will let you apply the jQuery UI classes (i.e. ui-corners-all, etc.) from a specific theme. Here is the description they give for this option:

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

This field allows you to specify a CSS scope to limit your theme to a particular portion of a page. This is helpful when using multiple themes on a page. If you don't provide a CSS scope, your theme will apply to all UI elements on a page.

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

In most situations, you won't need to specify a CSS scope. Please Note: If you provide a CSS scope, you will not get an example page included in your download.

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

请在
下载中为主题文件夹指定
名称。如果您计划
在页面上使用多个主题，这将非常有用。它
默认为主题。

This field allows you to specify a name for the theme folder in your download. This is helpful if you plan to use multiple themes on a page. It defaults to "theme".

然而，如果你想创建一个全新的主题，借用位您有两个选项：自己编辑CSS和图像文件（不推荐），或使用主题滚轮工具创建自己的。

If, however, you want to create a brand new theme, borrowing bits and pieces from several themes, you have two options: edit the CSS and image files yourself (not recommended), or use the Theme Roller tool to create your own.

如何使用：

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

CSS Scope is just a CSS selector. Let's say that theme X should apply only to all elements with class aClass. In this case, your CSS Scope would be .aClass. So, if you want to add rounded corners from theme X to an element (assuming your CSS Scope has been set to .aClass), your HTML would like something like this:

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

这篇关于如何应用多个jQuery UI主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！