javascript - JSTree Proton 主题更改图标以打开和关闭文件夹

Question

我只有一个演示应用程序，其中使用了质子主题的 JSTree。

我想在节点打开时将图标更改为打开文件夹，当节点关闭时将图标更改为文件夹关闭。

同上。 Proton CMS ADMIN PANEL

检查其中的文档节点，它将图标更改为打开和关闭的文件夹。

现在，当我尝试更改图标时，我发现它正在使用 CSS Sprites，当我检查 style.css 时，我发现它也在使用 base64 url​​ 来加载一些图像。

这是它使用过的 Sprite 。

我如何在节点中使用该目录打开和关闭图标？

用于该图标的名称或 css 类是什么？

当我们有 sprite 时，我们如何找到图标名称并加载它？

除此之外，我还想将那个填充的正方形用作叶节点图标。

我可以使用以下 Sprite 代码渲染该图像。

.jstree-folder-open {
background: url('32px.png') no-repeat -531px -23px !important;
}

但仍然无法以正确的大小和正确的方式显示图标。有什么特别的方法吗？

Answer 1

最后我能够通过在 css 中更改背景位置来渲染图像。

这是我找到用于从 sprite 渲染图像的 css 代码的工具。

Sprite Cow

打开您的图像并选择部分。

之后我创建了单独的类并使用了背景位置 css。

.jstree-folder-open {
background-image: url('32px.png') !important;
background-position: -105px -70px !important;
}

.jstree-folder-closed {
background-image: url('32px.png') !important;
background-position: -261px -7px !important;
}

li.jstree-leaf > a > i.jstree-icon {
background-image: url('32px.png') !important;
background-position: -200px -7px !important;
}