Mettre en surbrillance la page en cours en tant que lien actif dans le menu de navigation inclus

J'ai un menu statique dans la barre latérale qui je inclure dans chaque page JSF. Le menu ressemble à ceci:

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

L'ajout d'un class="active" à la <li> met en évidence le menu. Comment puis-je assurer de l'élément sélectionné est mis en évidence de façon dynamique dans JSF2?

Je sais PrimeFaces et RichFaces ont ready made composants pour cela, mais je veux essayer un pur JSF 2 tout d'abord la solution. Une pure côté client JavaScript solution est également acceptable.

source d'informationauteur Ravi S

  1. 30

    Vous pouvez obtenir le point de vue actuel IDENTIFIANT en EL comme suit

    #{view.viewId}

    Donc, cela devrait faire

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

    Il serait plus facile de tenir tous ces liens dans certains List<Page> de sorte que vous pouvez juste faire quelque chose comme

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

    au lieu de copypasting le même morceau de code.

  2. 1

    J'ai utilisé @BalusC idée, plus son autre extrémité à Douze million quatre cent soixante treize mille quatre cent soixante et un mais avec quelques modifications:

    <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>
  3. 0

    Ma solution est basée sur des composants personnalisés:

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

    Utilisé dans le code:

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