温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Protecting jsTree Styles from Other jsTree Instances
css javascript jquery magento jstree

javascript - 从其他jsTree实例保护jsTree样式

发布于 2020-04-29 11:19:21

是否可以在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规则的前景不那么令人生畏。

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

查看更多

提问者
Alan Storm
被浏览
53
Stephen S 2020-02-11 22:06

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

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

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