Переопределение дерева топлива в порядке табуляции

Мне нужно переопределить значение порядка табуляции (tabindex) для дерева топлива.

Содержимое страницы по порядку:
-Дерево Fuelux (с несколькими элементами, а также разветвленными элементами)
-Компонент X

Теперь, если я установлю любое значение tabindex (даже максимальное значение 32767) для компонента X, этот компонент X получит фокус вкладки как первый элемент на странице. Вместо этого дерево топлива должно получить его первым.

Как сделать правильный порядок?

Некоторый пример (вы можете изменить кнопку на любой другой компонент - меня интересует принцип настройки порядка вкладок в дереве здесь):

    <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>

tree tabindex fuelux
person Spec    schedule 11.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны иметь возможность добавлять значения атрибута tabindex к узлам элементов дерева, добавляя ключ к объекту attr в источнике данных. Документацию см. здесь: http://getfuelux.com/javascript.html#tree-usage-datasource

И вот CodePen, который я сделал, чтобы показать, как добавить индекс вкладок к элементам дерева: http://codepen.io/anon/pen/aNZPEw?editors=0010

person futuremint    schedule 11.03.2016
comment
Спасибо! В конце концов, это было просто, как я и боялся. :) - person Spec; 11.03.2016
comment
Достаточно интересно, что вкладка по-прежнему проходит через элементы дерева топлива в конце для дополнительного раунда (поэтому вкладка запускает сначала дерево топлива, затем мой собственный компонент, а затем еще один раунд в дереве топлива). Должна быть какая-то принудительная настройка табуляции для дерева. - person Spec; 12.03.2016