保护 jsTree 样式免受其他 jsTree 实例的影响

Question

是否可以为 jsTree jQuery 插件/库生成的类名添加前缀？如果没有，是否有一条已知的前进路径可以让单个页面共享两个样式不同的 jsTree 元素？

问题：

我有一个(基于 PHP(内容管理系统的插件。 该插件使用 jsTree jQuery 插件来创建几个在所有页面上可见的树视图。

CMSUI也在其一些页面上使用jsTree，我们的样式彼此冲突。

DOM 生成非常复杂，简单地在所有默认样式前面加上 ID是行不通的。

/* my 2008 era CSS tricks are no help, this does not work */
#an-id-on-the-div-that-contains-mytrees .jstree-node,
#an-id-on-the-div-that-contains-mytrees .jstree-children,
#an-id-on-the-div-that-contains-mytrees .jstree-container-ul {
display: block;
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}

默认的CSS文件超过1000行，仔细和外科手术地找出在哪里使用哪个样式类，并为每个现有规则提供更具体的CSS规则的前景有点令人生畏。

我问是否有一条已知的前进道路，可以在同一页面上快速/轻松地使用两个具有不同样式的 jsTrees。

Answer 1

jsTree 支持在其设置配置中使用主题。

$('#jstree').jstree({
"core" : {
"themes": { "name": "mycustomtheme", "dots": true, "icons": true }
}
});

您可以使用此处的默认 CSS 作为模板来修改主题类.jstree-mycustomtheme的默认类.jstree-default。您可以拥有多个 CSS 样式表，并将它们与主题配置一起应用。虽然这不是最快的方法，但这是jsTree目前支持的范围。