Блог

Главная - Вопросы по программированию - как перенаправить на новую страницу, щелкнув вкладку tabview

как перенаправить на новую страницу, щелкнув вкладку tabview

#jsf #primefaces #tabview

#jsf #простые интерфейсы #tabview

Вопрос:

У меня есть страница с именем Tabview1, которая состоит из tabview.

    Tabview1.xhtml:
       <p:tabView>
            <p:tab title="1">
               <ui:include src="/Apanel.xhtml"/>
            </p:tab>
            <p:tab title="2">
            </p:tab>
            <p:tab title="3">
            </p:tab>
        </p:tabView>

Я хочу перенаправить на страницу Tabview2.xhtml, если щелкнуть вкладку с именем 2.

 Tabview2.xhtml:
       <p:tabView>
            <p:tab title="1">
            </p:tab>
            <p:tab title="2">
               <ui:include src="/Bpanel.xhtml"/>
            </p:tab>
            <p:tab title="3">
            </p:tab>
        </p:tabView>

Кто может мне помочь?

Ответ №1:

Tabview создает список с одним элементом для каждой вкладки. Каждый <li> содержит <a href="#j_idtXXX"> . Создайте скрипт на своем сайте, который изменит эти ссылки на Tabview2.xhtml. Например, если вы установите идентификатор вашего tabview в «tabview»:

 jQuery("#tabview ul a").first().attr("href", /MyPortal/Tabview2.jsf?tab=0);

Это приведет к тому, что первая вкладка приведет к новой странице, и выберите нужную вкладку на этой странице, если вы настроили параметр view и activeIndex="#{controllerClass.activeIndex}" установили в tabview.

Сейчас я спешу, поэтому у меня было время написать только короткий пример, но если у вас есть некоторые навыки работы с javascript, это не должно быть слишком сложно.

Комментарии:

1. Ваше решение не работает. Я могу изменить атрибут ‘href’ в элементах ‘a’, содержащихся в элементах li. Но щелчок не переводит пользователя на новую страницу. Действие по умолчанию должно быть переопределено через JS, чтобы не запускаться.

Ответ №2:

                <p:tabView>
            <p:tab title="Title1">
               <p:panel>  
                <ui:include src="tabView1.xhtml" />
               </p:panel>
            </p:tab>
            <p:tab title="Title 2">
                 <p:panel>  
                <ui:include src="tabView2.xhtml" />
                 </p:panel>
             </p:tab>           
        </p:tabView>