在包含的导航菜单中突出显示当前页面作为活动链接答案

【问题标题】：Highlighting current page as active link in included navigation menu在包含的导航菜单中突出显示当前页面作为活动链接
【发布时间】：2012-06-21 02:33:16
【问题描述】：

我在侧边栏中有一个静态菜单，它包含在每个 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 解决方案也是可以接受的。

【问题讨论】：

标签： jsf jsf-2 menu

【解决方案1】：

在EL中获取当前视图ID如下

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

而不是一遍又一遍地复制粘贴同一段代码。

【讨论】：

谢谢BaluSC。！如果没有你，JSF 的新手会做什么:-) 感谢你耐心回答所有这些菜鸟问题......
当菜单项通过 ajax 更新部分页面时，您能提出一些解决方案吗？而不是完整的页面被刷新。我可以通过单击菜单时的 javascript 回调来做到这一点。但还有什么更好的方法。
谢谢，@BalusC，你总是救我们。是时候 Stack Exchange 创建一个 BalusC 响应社区了。 kkk
谢谢@BalusC！真的这是一个额外的魔法，但是如何使它与菜单和子菜单一起工作？
@Spartan: 有 Page 一个代表子页面的 List<Page> pages 属性。

【解决方案2】：

我使用了@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>

【讨论】：

【解决方案3】：

我的解决方案是基于自定义组件：

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

【讨论】：

一个简单的 facelet 标签在这里也足够了