Добавление горизонтального разделителя / границы в fancytree - PullRequest
Новая
       35

Добавление горизонтального разделителя / границы в fancytree

0 голосов
/ 03 апреля 2019

Я использую fancytree для создания меню навигации, и мне нужно добавить границу / горизонтальный разделитель. Я попытался добавить расширение fancytree, которое позволяет выделить всю строку, а затем добавил следующее, чтобы применить css к событию init : 

    init: function (event, data) {
                  jQuery("span.fancytree-title").css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});
}

В результате:

enter image description here

Мне нужно иметь один горизонтальный разделитель между строками. Я исследовал разметку на fancytree, но не могу найти ни одного элемента, охватывающего всю строку. Любые предложения помогут.

Примечание: для снятия галочек слева я сделал следующее: 

    jQuery(".fancytree-expander").css('background', 'none');

Это убрало складные галочки на левой стороне, если есть лучший способ, пожалуйста, предложите.

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Существует демонстрация Fancytree, которая имитирует внешний вид аккордеона, просто добавляя пользовательские правила CSS: http://wwwendt.de/tech/fancytree/demo/#sample-accordion.html

Accordion Demo

Это не точно то, что вы просили, но может быть хорошей отправной точкой: 

/* Display top level nodes as accordion header. */
ul.fancytree-container >li >.fancytree-node span.fancytree-title {
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  margin: 0;
  background-color: #ddd;
  border: 1px solid #bbb;
  font-weight: 550;
}
/* Hide  expanders for top-level nodes */
ul.fancytree-container >li >.fancytree-node .fancytree-expander {
  display: none;
}
/* Don't indent level-2 nodes */
ul.fancytree-container >li >ul {
  padding-left: 0;
}
0 голосов
/ 04 апреля 2019

Насколько я знаю, на самом деле нет способа сделать разделитель между элементами дерева.

Однако вы можете создать стиль, имитирующий это. Несколько решений, которые я могу придумать: «1003 *»

  • Во время рендеринга узла, визуализируйте элемент <hr /> вверху или внизу вашего элемента
  • Вместо использования border-width, border-color and border-style используйте варианты border-top или border-bottom. В этом случае вам, вероятно, придется немного разобраться с полями и отступами
  • Уберите отступ между предметами и замените его отступами. Затем сделайте ширину границы половиной исходного значения. Поскольку обе линии нарисованы друг против друга, они будут выглядеть как линия, это одна линия

Еще несколько советов, которые я могу вам дать:

  • Избегайте использования jQuery для установки правил CSS. Вместо этого создайте отдельный файл CSS. Это улучшит возможность повторного использования
  • Не знаю, есть ли у вас эта ссылка: http://www.wwwendt.de/tech/fancytree/doc/jsdoc/

Удачи

...