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

发布于 2024-09-15 05:10:48 字数 278 浏览 10 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空气里的味道 2024-09-22 05:10:48

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; }

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

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

jsTree injects the core CSS into the page, if you view source you'll see it...by default it uses the default theme, and finds the images relative to the .js location.

You can see it doing this in the source here http://code.google.com/p/jstree/source/browse/trunk/jquery.jstree.js#259

Also in the source you'll see various plugins setting the icons as well, just browser the source for url( to see where all this happens.

As for the images themselves, there's always one image file called d.png for the theme icons, all icons are pulled from here, it's a CSS sprite map, for example let's look at the apple icons:

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

For every <ins> element it sets the background, then for various types of nodes it'll just adjust the position of the sprite map, for example:

.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; }

This is just how CSS sprites work, you use one image and view a little section of it...different icons are the same little section the size of an icon, just starting at a different position in the image.

回复收藏 0 原文

~没有更多了~