Защита стилей jsTree от других экземпляров jsTree - PullRequest
Новая
       6

Защита стилей jsTree от других экземпляров jsTree

0 голосов
/ 10 февраля 2020

Возможно ли добавить префикс имен классов, сгенерированных jsTree jQuery плагином / библиотекой ? Если нет, то есть ли известный путь вперед, чтобы одна страница делилась двумя элементами jsTree, стилизованными по-разному?

Проблема:

У меня есть плагин для контента (на основе PHP) система управления. Этот плагин использует плагин jsTree jQuery для создания нескольких древовидных представлений, которые видны на всех страницах.

Пользовательский интерфейс CMS также использует jsTree на нескольких своих страницах, и наши стили конфликтуют друг с другом.

Генерация DOM достаточно сложна, поэтому простой префикс всех стилей по умолчанию с идентификатором не работает . 

/* 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 линии, и перспектива тщательного и хирургического выяснения, какой класс стилей используется и где, и предоставление более специфического c CSS правила для каждого существующего правила - это больше, чем немного утомительно.

Я спрашиваю если есть известный путь вперед для быстрого / простого использования двух jsTrees с разными стилями на одной странице.

1 Ответ

1 голос
/ 11 февраля 2020

jsTree поддерживает использование тем с его конфигурацией настройки. 

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

Вы можете использовать CSS здесь в качестве шаблона для изменения класса .jstree-default по умолчанию с класс вашей темы .jstree-mycustomtheme. Вы можете иметь несколько CSS таблиц стилей и применять их с конфигурацией темы. Хотя это не самый быстрый подход, это степень, которую jsTree поддерживает в данный момент.

...