按 T​​ab 顺序覆盖fuelux 树

Question

我需要覆盖燃料树的制表顺序 (tabindex) 值。

页面内容按顺序排列：
-Fuelux 树（具有多个项目，以及分支项目）
-成分X

现在，如果我为组件 X 设置任何 tabindex 值（甚至是最大值 32767），该组件 X 将作为页面上的第一项获得选项卡焦点。相反，fuelux 树应该首先得到它。

如何制定正确的订单？

一些例子（您可以将按钮更改为任何其他组件-我对树的Tab顺序设置原理感兴趣）：

    <div class="fuelux menu-tree">
        <ul id="myTreeVerticalNav" class="tree" role="tree">
            <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                <div class="tree-branch-header">
                    <a href="#" class="tree-branch-name">
                        <span class="glyphicon icon-caret glyphicon-play"></span>
                        <span class="glyphicon icon-folder glyphicon-folder-close"></span>
                        <span class="tree-label"></span>
                    </a>
                </div>
                <ul class="tree-branch-children" role="group"></ul>
                <div class="tree-loader" role="alert">Loading...</div>
            </li>
            <li class="tree-item hide" data-template="treeitem" role="treeitem">
                <a href="#" class="tree-item-name" target="_self">
                    <span class="glyphicon icon-item fueluxicon-bullet"></span>
                    <span class="tree-label"></span>
                </a>
            </li>
        </ul>
    </div>

    <button class="btn btn-standard">Component X</button>

Answer 1

您应该能够通过向数据源中的 attr 对象添加键来将 tabindex 属性值添加到树项节点。有关文档，请参见此处：http://getfuelux.com/javascript.html#tree-usage-datasource

这是我制作的一个 CodePen，用于展示如何将选项卡索引添加到树项：http://codepen.io/anon/pen/aNZPEw?editors=0010