Необычное изменение цвета подсветки выбранного в данный момент элемента в selectMode 3 - PullRequest
Новая
       40

Необычное изменение цвета подсветки выбранного в данный момент элемента в selectMode 3

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

Я использую fancytree selectMode 3, так что родительский элемент также получает флажок, и конечный пользователь знает о состоянии навигации (508 штук). Проблема, с которой я сталкиваюсь при выделении узла с помощью навигации по клавиатуре, если в папке 2 или более дочерних элемента, цвет выделения остается тем же во время навигации по клавиатуре и затрудняет идентификацию пользователя, в данный момент находящегося на каком узле.
Смотрите скриншот ниже: enter image description here

Кодовая ссылка:
https://codepen.io/cksachdev/pen/YMxqGO?editors=1011

Фрагмент кода из кода ручки: 

keydown: function(event, data) {
    switch (event.which) {
      case 32: // [space]
        data.node.toggleSelected();
        break;
      case 13: // [enter]
        data.node.toggleSelected();
        break;
      case 40:
      case 38:
      case 37:
      case 39:
        // Change the background to show a different highlight
        // highlightNode(data);
        break;
    }
  }
});

function highlightNode(data) {
  var node = data.node;
  if (node.data) {
    var $span = jQuery(node.span);
    $span
      .find("span.fancytree-title")
      .text(node.title)
      .css({
        background: "red"
      });
  }
}

Я попытался установить цвет подсветки, обнаружив клавиши со стрелками влево, вправо, вверх и вниз, но не дает желаемого результата. Фон применяется после посещения узла с помощью клавиатуры.

Я попытался найти событие before, чтобы я мог получить ссылку как на предыдущий узел, так и на следующий узел, а затем сбросить стиль на предыдущем узле и применить новый стиль следующего узла.

Любые предложения.

1 Ответ

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

Я бы предложил просто добавить собственное правило CSS, например ::10000 

.fancytree-plain span.fancytree-active span.fancytree-title,
.fancytree-plain.fancytree-treefocus.fancytree-container span.fancytree-active pan.fancytree-title{
    background-color: #0d0;
    border-color: #080;
}

(Что касается Раздела 508: Fancytree уже поддерживает WAI-ARIA.)

...