Выделение текущей страницы в качестве активной ссылки в меню навигации
у меня есть статическое меню на боковой панели, которое я включаю в каждую страницу JSF. Меню выглядит так:
<li class="nav-header">Item 1</li>
<li class="active"><a href="index.xhtml">Item 2</a></li>
<li><a href="new_workload.xhtml">Item 3</a></li>
<li><a href="import_workload.xhtml">Item 4</a></li>
добавлять class="active"
до <li>
высвечивает меню. Как мне убедиться, что выбранный элемент выделен динамически в JSF2?
Я знаю, что у PrimeFaces и RichFaces есть готовые компоненты для этого, но сначала я хочу попробовать чистое решение JSF 2. Чистое решение JavaScript на стороне клиента также приемлемо.
3 ответов
вы можете получить текущий идентификатор вида в EL следующим образом
#{view.viewId}
Итак, это должен делать
class="#{view.viewId eq '/index.xhtml' ? 'active' : ''}"
было бы проще держать все эти ссылки в некоторых List<Page>
, Так что вы можете просто сделать что-то вроде
<li class="nav-header">#{menu.header}</li>
<ui:repeat value="#{menu.pages}" var="page">
<li class="#{view.viewId eq page.viewId ? 'active' : ''}">
<h:link value="#{page.title}" outcome="#{page.viewId}" />
</li>
</ui:repeat>
вместо copypasting один и тот же кусок кода.
я использовал идею @BalusC плюс его другой совет в 12473461 но с некоторые модификации:
<ul>
<li class="#{view.viewId eq '/admin/index.xhtml' ? 'active' : ''}"><h:link value="Main" outcome="main"/></li>
<li class="#{fn:startsWith(view.viewId, '/admin/sess1/') ? 'active' : ''}"><h:link value="Session 1" outcome="sess1"/></li>
<li class="#{fn:startsWith(view.viewId, '/admin/sess2/') ? 'active' : ''}"><h:link value="Session 2" outcome="sess2"/></li>
<li class="#{fn:startsWith(view.viewId, '/admin/sess3/') ? 'active' : ''}"><h:link value="Session 3" outcome="sess3"/></li>
</ul>
мое решение основано на пользовательском компоненте:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:c="http://java.sun.com/jsp/jstl/core" >
<composite:interface>
<composite:attribute name="outcome" />
<composite:attribute name="label" />
</composite:interface>
<composite:implementation>
<li class="menuItem #{view.viewId == cc.attrs.outcome ? 'active' : ''}">
<h:outputText value="#{cc.attrs.label}" rendered="#{view.viewId eq cc.attrs.outcome}"/>
<h:link outcome="#{cc.attrs.outcome}" value="#{cc.attrs.label}" rendered="#{view.viewId ne cc.attrs.outcome}" />
</li>
</composite:implementation>
</html>
в коде:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:my="http://java.sun.com/jsf/composite/my">
...
<ul class="nav">
<my:menuItem outcome="/home.xhtml" label="Home" />
</ul>