Resaltar la página actual como un enlace activo en el menú de navegación incluido

Tengo un menú estático en la barra lateral que incluyo en cada página JSF. El menú parece así:Resaltar la página actual como un enlace activo en el menú de navegación incluido

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

Adición de un class="active" a la <li> aspectos más destacados del menú. ¿Cómo hago para asegurarme de que el elemento seleccionado se resalte dinámicamente en JSF2?

Sé que PrimeFaces y RichFaces tienen componentes listos para esto, pero primero quiero probar una solución pura JSF 2. Una solución de JavaScript del lado del cliente puro también es aceptable.

Fuente

2012-06-19 Ravi S

Puede obtener la vista actual de identificación en EL de la siguiente manera

#{view.viewId}

lo tanto, esto debe hacer

class="#{view.viewId eq '/index.xhtml' ? 'active' : ''}"

Sería más fácil de sostener todos esos enlaces en algunos List<Page> para que puede hacer algo como

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

en lugar de copiar la misma pieza de código sobre y más.

Fuente

2012-06-19 04:44:54 BalusC

Gracias BaluSC.! ¿Qué harían los recién llegados a JSF sin ti :-) Apreciar tu paciencia al responder a todas estas preguntas de novato ... –

De nada. – BalusC

puede sugerir alguna solución cuando el elemento del menú actualice la página parcial a través de ajax. y no la página completa se actualiza. Puedo hacerlo con una devolución de llamada de javascript en el menú clic. pero ¿cuál podría ser un mejor enfoque? –

He usado idea @BalusC además de su otra punta en 12473461 pero con algunas modificaciones :

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

Fuente

2013-07-23 21:44:54

Mi solución se basa en un componente personalizado:

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

utiliza en código:

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

Fuente

2014-05-26 09:05:29 Globator

Una simple etiqueta facelet sería suficiente aquí también – stg

Resaltar la página actual como un enlace activo en el menú de navegación incluido

Respuesta

Cuestiones relacionadas