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

Question

是否可以为 jsTree jQuery plugin/library 生成的 class 名称添加前缀？如果没有，是否有已知的前进路径让单个页面共享两个样式不同的 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 行，并且可以仔细和手术地找出在何处使用哪种样式 class 并为每个样式提供更具体的 CSS 规则的前景现有规则有点令人生畏。

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

Answer 1

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

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

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

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

Protecting jsTree Styles from Other jsTree Instances

javascript

jquery

css

magento

jstree