p: selectOneButton tabindex не работает в простых лицах 5.0

Я использую Праймфейс 5.0.
Элемент p:selectOneButton полностью пропускается, когда я перемещаюсь по странице. Фрагмент кода ниже.
Может ли кто-нибудь подсказать, как заставить tabindex работать с p:selectOneButton?

<p:selectOneButton tabindex="50" id="orderAction" value="#{orderController.side}" onchange="toggleBuySell();">
    <f:selectItems value="#{orderDataContainer.actionTypes}"/>
    <p:ajax event="change" update=" messages" process="@this " listener="#{orderController.validateAction}" oncomplete="someAction();"/>
</p:selectOneButton>

primefaces tabindex
person Nav    schedule 07.02.2015    source источник
comment
tabindex не является атрибутом p:selectOneButton. Вы можете попробовать использовать сквозной атрибут: <p:selectOneButton pt:tabindex="50" >   -  person Zim    schedule 07.02.2015
comment
@zim: это может сработать, но тогда вы получите доступ к каждой кнопке выбора?   -  person Kukeltje    schedule 07.02.2015
comment
@Kukeltje: Я так не думаю ... Чтобы получить доступ к каждой кнопке, может потребоваться сделать что-то вроде: <ui:repeat value="#{orderDataContainer.actionTypes}" var="type" varStatus="status"> <f:selectItem value="#{type}" p:tabindex="#{50 + status.index}"/> </ui:repeat> (это не проверено!)   -  person Zim    schedule 07.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

То, что я предложил в своем комментарии, не работает, атрибут passtrough не добавляется к элементам ввода. Однако вы можете сделать это, используя jQuery:

установите widgetVar для вашего selectOneButton
перебирайте его входные данные, чтобы:
удалить их скрытое свойство (иначе они не будут доступны для вкладок)
переместить их за пределы экрана
связать события фокуса и размытия, чтобы выделить соответствующая кнопка (которые являются div)

<p:selectOneButton widgetVar="orderActionWidget" id="orderAction" value="#{orderController.side}" onchange="toggleBuySell();">
    <f:selectItems value="#{orderDataContainer.actionTypes}"/>
    <p:ajax event="change" update=" messages" process="@this " listener="#{orderController.validateAction}" oncomplete="someAction();"/>
</p:selectOneButton>

PF('orderActionWidget').buttons.find('input').each(function(index, value) {
    $(value)
    .attr('tabindex', 50 + index)
    .removeClass('ui-helper-hidden')
    .css('position', 'absolute')
    .css('left', '-1000px')
    .bind({
    focus : function() {
        $(this).parent().addClass('ui-state-hover');
    },
    blur : function() {
        $(this).parent().removeClass('ui-state-hover');
    }
    });
});
person Zim    schedule 07.02.2015
comment
это выбирает первую кнопку, но при выходе из вкладки элемент управления не переходит к следующей кнопке (выберите элемент), а переходит к другому элементу. - person Nav; 09.02.2015
comment
Только что протестировано на витрине Primefaces, и он работает так, как ожидалось. Вы можете проверить свои значения tabindex... Если у вас есть несколько selectOneButton, чтобы применить это, используйте глобальный счетчик вместо .attr('tabindex', 50 + index) - person Zim; 09.02.2015
comment
Это работает, но только частично. Поскольку это фокусируется только на первой кнопке, на вкладке после первой кнопки другие кнопки пропускаются (хотя я вижу tabindex, установленный вашим запросом). На вкладке Shift фокус переходит на последнюю кнопку. Дальнейшая вкладка переключения пропускает другие кнопки. Не уверен, как это решить - person Nav; 09.02.2015
comment
Я думаю, вы можете проверить, есть ли несколько элементов с одним и тем же tabindex. Вы можете перечислить их все, используя: $('*[tabindex]').each(function(){console.log(this)}) - person Zim; 09.02.2015