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中的主题，当我将一个'red'类添加到包装器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文件链接时，按钮的样式根本没有。疯！我把头发拉了出来。我哪里错了？当然，他们应该轻松下载JUST the theme文件夹并引用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;"  />

Answer 2

Skoders对。

您必须在JQuery表示法中使用元素id，class或tagname。

对于班级：.class
对于id：#id
对于标记名：table

你最好选择类的方式，因为它不仅比其他方式更优雅，而且更可用（它可以在多个对象上使用）并且你不会搞乱任何布局元素，如div或table 。毕竟，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”目录中的样式表。

jQuery在一个页面上有多个主题

2 个答案: