Twitter Bootstrap + JSF 2-活动菜单样式 [英] Twitter Bootstrap + JSF 2 - Active menu style

问题描述

<ul class="nav">
    <li class="active"><a href="home.xhtml">Home</a></li>
    <li><a href="about.xhtml">About us</a></li>
    <li><a href="contact.xhtml">Contact us</a></li>                         
</ul>

是否有一种简单的方法可以使用JSF将其模板化，所以我不必在每个页面上都包含它?

Is there an easy way to template this using JSF so I dont have to include it on each page?

推荐答案

您可以在EL中使用#{view.viewId}来获取当前视图ID.

You can use #{view.viewId} in EL to get the current view ID.

因此，这应该使其对所有页面通用:

So, this should make it generic for all pages:

<ul class="nav">
    <li class="#{view.viewId == '/home.xhtml' ? 'active' : ''}"><a href="home.xhtml">Home</a></li>
    <li class="#{view.viewId == '/about.xhtml' ? 'active' : ''}"><a href="about.xhtml">About us</a></li>
    <li class="#{view.viewId == '/contact.xhtml' ? 'active' : ''}"><a href="contact.xhtml">Contact us</a></li>                         
</ul>

如果您在EL范围内的某处有一些页面集合，那就会更干燥:

It'd be more DRY if you have a collection of pages somewhere in the EL scope:

<ul class="nav">
    <ui:repeat value="#{app.pages}" var="page">
        <li class="#{view.viewId == page.viewId ? 'active' : ''}"><h:link value="#{page.title}" outcome="#{page.viewId}" /></li>
    </ui:repeat>
</ul>

请注意，<h:link>将自动在URL中添加上下文路径，因此视图ID中的/无关紧要.

Note that the <h:link> will automatically prepend the context path in the URL, so having / in the view ID doesn't matter.

这篇关于Twitter Bootstrap + JSF 2-活动菜单样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！