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 回答