jquery - 哪里可以找到 jstree jquery 插件图像？

Question

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

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

Answer 1

jsTree 将核心 CSS 注入(inject)到页面中，如果您查看源代码，您会看到它...默认情况下它使用默认主题，并查找相对于 .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>元素它设置背景，然后对于各种类型的节点它只会调整 Sprite 图的位置，例如:

.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 Sprite 的工作原理，您使用一张图像并查看其中的一小部分...不同的图标是与图标大小相同的小部分，只是从图像中的不同位置开始。