按选项卡顺序覆盖 fuelux 树

Question

我需要覆盖 fuelux 树的制表符顺序 (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

按选项卡顺序覆盖 fuelux 树

Overriding fuelux tree in tab order

tree

tabindex

fuelux