Как я могу превратить интерактивное дерево в сенсорный интерфейс? - PullRequest
Новая
       12

Как я могу превратить интерактивное дерево в сенсорный интерфейс?

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

В настоящее время я использую jsTree , чтобы показать определенные элементы (список).Как я могу сделать так, чтобы такой интерфейс работал на устройстве, использующем сенсорные возможности?

Проблема, с которой я сталкиваюсь, заключается в том, что <li> слишком малы, чтобы использовать их для сенсорных возможностей.цель.Я попытался отредактировать высоту моих <li>, но это, кажется, сломало дерево: 

$(document).ready(function() {
  $.jstree.defaults.core.themes.variant = "large";
  // 6 create an instance when the DOM is ready
  $('#jstree').jstree({
    "plugins": ["wholerow"]
  });
  // 7 bind to events triggered on the tree
  $('#jstree').on("changed.jstree", function(e, data) {
    console.log(data.selected);
  });
  // 8 interact with the tree - either way is OK
  $('button').on('click', function() {
    $('#jstree').jstree(true).select_node('child_node_1');
    $('#jstree').jstree('select_node', 'child_node_1');
    $.jstree.reference('#jstree').select_node('child_node_1');
  });
});
#jstree > ul > li {
  /* height: 50px ; */  /* <-- Not workoing */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="jstree">
  <!-- in this example the tree is populated from inline HTML -->
  <ul>
    <li>Root node 1
      <ul>
        <li id="child_node_1">Child node 1</li>
        <li data-jstree='{"icon":"//jstree.com/tree.png"}'>Child node 2</li>
      </ul>
    </li>
    <li>Root node 2</li>
  </ul>
</div>
<button>demo button</button>

JSFiddle

Кто-нибудь случайно узнал, как можно редактировать внешний вид jsTree?

...