从其他jsTree实例保护jsTree样式

Question

是否可以在jsTree jQuery plugin/library生成的类名前面加上前缀？如果不是，那么有一个已知的途径可以让一个页面共享两个样式不同的jsTree元素？

问题：

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

CMS UI also在其某些页面上使用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规则的前景不那么令人生畏。

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

Answer 1

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

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

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