一页上的jQuery多个主题答案

【问题标题】：jQuery multiple themes on one page一页上的jQuery多个主题
【发布时间】：2011-11-15 05:44:17
【问题描述】：

这让我发疯了！我在这里关注了似乎不起作用的帖子： http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

我有一个基本主题，例如，它是 jQuery UI 库中的 Smoothness 主题。然后我有一个“红色”主题，基本上将按钮着色为红色。 Here is the theme I created.

所以我去下载我的主题。选择高级设置，将范围设置为“红色”，将我的主题文件夹名称设置为“红色”并下载。首先，我并不完全 100% 确定要复制到我的项目的文件夹是“development-bundle\themes”文件夹（其中包含我的红色文件夹）还是“\css\red”文件夹？

我都试过了。上面的帖子似乎暗示如果我复制我的主题文件夹并链接到我在 css 中的主题，当我将一个“红色”类添加到包装器 div 或元素时它会起作用。所以我在我的文件中链接了这样的主题：

<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" />

基本主题加载和工作所有honkey doorey，但红色主题没有。我有一个这样的按钮：

<input type="submit" id="btn" value="A submit button" class="red" />

我也试过了：

<div class="red">
    <input type="submit" id="btn" value="A submit button" />
</div>

都不行。当我删除 'themes/base/jquery.ui.all.css' css 文件链接时，按钮根本没有样式。疯狂的！我正在拔头发。我哪里错了？当然，他们应该让下载主题文件夹和引用 ui.all 文件变得足够容易。

【问题讨论】：

我没有尝试过，但我知道 jQuery 可以在小事情上崩溃。您是否将.red 作为范围而不仅仅是red？另外，尝试themes/red/ui.all.css" 而不是themes/red/jquery.ui.all.css"。
我昨天在发布之前尝试了 .red 并且没有帮助（我不得不去编辑 thethemeroller 创建的 css 文件以将其全部更改为 .red）。稍后我会尝试更改文件名并通知您。

标签： jquery jquery-ui themes themeroller

【解决方案1】：

我为红色图标添加了一个新的 css 类：

Icons
----------------------------------


/* states and images */

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
.ui-iconRed { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

这里也改变一下：

/* states and images */

.ui-icon { width: 16px; height: 16px; background-image:url(images/ui-icons_469bdd_256x240.png); }

.ui-iconRed { width: 16px; height: 16px; background-image:url(images/ui-icons_470bdd_256x240.png); }

我有一个包含红色和蓝色图像的文件夹。当我想拍摄红色图像时，我只需引用类 iconRed，如下所示：

 <img class="ui-iconRed ui-icon-bullet"  title="Vendido" style="float: left;" />

 //if want a blue just put the normal icon like this:

 <img class="ui-icon ui-icon-bullet" title="Não vendido" style="float: left;"  />

【讨论】：

【解决方案2】：

Skoders 是对的。

您必须在 JQuery 表示法中使用元素 id、类或标记名。

对于一个类：.class
对于 id：#id
对于标记名：table

您最好选择类方式，因为它不仅比其他方式更优雅，而且更实用（它可以用于多个对象）并且您不会弄乱任何布局元素，如 div 或表格.毕竟，css 范围只是将提供的值添加到每个 css 定义中。即

.ui-icon { ... }

变成

.scope .ui-icon { ... }

编辑：确保您包含正确的样式表，我使用以下代码完成了整个工作

<html>
    <head>
        <title>JQuery UI Theme Scope</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
        <link type="text/css" href="css/red/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
        <link type="text/css" href="css/default/jquery-ui-1.8.1.default.css" rel="stylesheet" />
    </head>
    <body>
        <input type="submit" class="ui-state-default ui-corner-all" value="Submit" />
        <div class="red">
            <input type="submit" class="ui-state-default ui-corner-all" value="Submit" />
        </div>
    </body>
</html>

不要链接到“developement-bundle”目录中的样式表，而是使用“css”目录中的样式表。

【讨论】：

我正在使用类。问题是我无法通过设置类名来加载红色范围并覆盖基本主题。