Twitter Bootstrap + JSF 2 - 活动菜单风格

Question

<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模板化,所以我不必将它包含在每个页面上？

Answer 1

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

所以,这应该使它对所有页面都是通用的:

<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范围的某个地方有一个页面集合,那就更干了:

<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中具有无关紧要性.