jQuery 一个页面上有多个主题

Question

这让我抓狂!我已经关注了这里的帖子，但似乎不起作用: 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 文件变得足够容易。

Answer 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;"  />