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

Question

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

问题是：

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

CMS UI还在其几个页面上使用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文件超过1,000行，仔细和通过手术确定在何处使用哪个样式类并为每条现有规则提供一个更具体的CSS规则的前景非常令人望而生畏。

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

Answer 1

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

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

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