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