如何应用多个 jQuery UI 主题

发布于 2024-10-03 19:45:15 字数 142 浏览 6 评论 0 原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嗳卜坏 2024-10-10 19:45:15

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

假设您希望元素 A 使用主题 X 进行样式设置，元素 B 使用主题 Y 进行样式设置。jQuery Theme Roller 内置了此功能。当您去下载主题时 (此处），点击右侧的高级主题设置。在这里，您可以设置“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>

Yes, but it depends on what you mean.

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:

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.

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.

You can also change the Theme Folder Name:

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".

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.

How to Use:

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>

回复收藏 0 原文

GRAY°灰色天空 2024-10-10 19:45:15

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

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

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

you will have some issues if you apply this technique to ui widgets that overlay and are appended to the body - dialog, datepicker, autocomplete....

in the case of autocomplete, you can do the following to get a parent element with the scoped class - adding the scopped class to the UL of the autocomplete itself is not enough.

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

回复收藏 0 原文