Блог

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

JSF-навигация с другим классом CSS для текущего / активного пути

#jsf

#jsf

Вопрос:

Я пытаюсь создать шаблон меню в JSF, где ссылка для текущего каталога имеет другой «текущий» или «активный» класс. В настоящее время код выглядит следующим образом:

 <ul>
    <li><h:outputLink value="#{request.contextPath}/a/">A</h:outputLink></li>
    <li><h:outputLink value="#{request.contextPath}/b/">B</h:outputLink></li>
    <li><h:outputLink value="#{request.contextPath}/c/">C</h:outputLink></li>
</ul>

Я подумываю об использовании чего-то вроде styleClass="#{(thisDir == currentDir) ? currentLinkClass : normalLinkClass}" . Но как мне получить текущий путь? Это вообще правильно, или есть лучший способ сделать это?

Кроме того, я хочу, чтобы ссылки основывались на текущем пути, а не только на странице. Например, myapp/a/1.jsf и myapp/a/2.jsf (то есть myapp/a/*.jsf ) должен вызвать активный класс для A ссылки. (Надеюсь, мое объяснение понятно.) Возможно ли это? Как это должно быть сделано?

Большое вам спасибо!

Ответ №1:

Вы можете использовать #{request.requestURI} для получения URI текущего запроса. При необходимости вы можете использовать несколько функций EL из JSTL fn taglib для выполнения некоторых сравнений / манипуляций со строками в EL.

Ваше предложенное styleClass предложение EL отлично подходит. В любом случае другого простого способа нет. Лучшая оптимизация, которую вы могли бы сделать до сих пор, — это визуализировать эти ссылки в цикле с помощью an <ui:repeat> , чтобы, по крайней мере, исключить дублирование кода.

Ответ №2:

Вы также можете попробовать этот подход, который использует #{view.viewId} :

 <h:outputLink 
  styleClass="#{(view.viewId.equals('/admin/authors.xhtml')) ? 'active' : 'inactive'}"
  value="authors.xhtml">Text</h:outputLink>