Where to find jstree jquery plugin images?

Question

I'm trying out jstree, the jquery plugin to create a treeview. It works fine, but I can't get some of the inner workings of it. And one (seemingly) simple thing bothers me like crazy: Where do the images for the folder icons etc come from? I mean, even if I don't define a theme there are still default icons for the folders in the result. And if I change the theme to, say, apple, the icons change. But I have no idea where these images come from. I would have expected to find references to them in the theme css files, but I don't.

If anyone can explain this, and preferably point me to them and how to reference and change them I would be grateful! Specifically, I want to be able to change the icons so that there is one icon for a closed folder and another one for an open folder.

Answer 1

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.