6

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

我有一个基本主题，例如，它是 jQuery UI 库中的 Smoothness 主题。然后我有一个“红色”主题，基本上将按钮着色为红色。这是我创建的主题。

所以我去下载我的主题。选择高级设置，将范围设置为“红色”，将我的主题文件夹名称设置为“红色”并下载。首先，我并不完全 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 文件变得足够容易。

4

2 回答 2

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;"  />
于 2011-11-14T20:00:39.063 回答
0

斯考德斯是对的。

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

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

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

.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”目录中的样式表。

于 2010-06-01T20:28:08.167 回答