1

我正在尝试创建树视图的 jquery 插件 jstree。它工作正常，但我无法了解它的一些内部工作原理。还有一件（看似）简单的事情让我发疯了：文件夹图标等的图像来自哪里？我的意思是，即使我没有定义主题，结果中的文件夹仍然有默认图标。如果我将主题更改为苹果，则图标会更改。但我不知道这些图像来自哪里。我本来希望在主题 css 文件中找到对它们的引用，但我没有。

如果有人可以解释这一点，最好将我指向它们以及如何参考和更改它们，我将不胜感激！具体来说，我希望能够更改图标，以便有一个用于关闭文件夹的图标和另一个用于打开文件夹的图标。

4

1 回答 1

3

jsTree 将核心 CSS 注入页面，如果您查看源代码，您会看到它……默认情况下，它使用默认主题，并查找相对于.js位置的图像。

您可以在此处的源代码中看到它执行此操作http://code.google.com/p/jstree/source/browse/trunk/jquery.jstree.js#259

同样在源代码中，您还会看到各种设置图标的插件，只需浏览源代码url(即可查看所有这些发生的位置。

至于图像本身，d.png主题图标总是有一个图像文件，所有图标都是从这里拉出来的，它是一个CSS sprite map，例如让我们看一下苹果图标：

.jstree-apple ins { background-image:url("d.png"); background-repeat:no-repeat; }

它为每个<ins>元素设置背景，然后对于各种类型的节点，它只会调整精灵图的位置，例如：

.jstree-apple .jstree-open > ins { background-position:-72px 0; }
.jstree-apple .jstree-closed > ins { background-position:-54px 0; }
.jstree-apple .jstree-leaf > ins { background-position:-36px 0; }

这就是 CSS 精灵的工作方式，您使用一张图像并查看其中的一小部分......不同的图标是相同大小的图标部分，只是从图像中的不同位置开始。

于 2010-08-16T11:24:54.097 回答