【问题标题】:Facelets strategy to identify current selected list item识别当前选定列表项的 Facelets 策略
【发布时间】:2011-11-01 00:29:56
【问题描述】:

我正在寻找一种策略来避免在我的网站上重复代码。

问题是我有一个无序列表,在我编码的每个页面中都会重复。 原因是我有一个列表项,其中包含一个用于标识 currentPage 的锚点。在我编码的每一页中都会重复这一点。 原因是我有一个列表项,其中包含一个用于标识 currentPage 的锚点。 这让我可以使用 css 对其进行调整。

如何定义这样的列表,以便在 facelets 中动态更改它?

<ui:define name="leftBar">
        <ul class="leftNav">
            <li id="home"><a id="**currentPage**" jsfc="h:link" outcome="home">#{global.homeInCaps}</a></li>
            <li id="about"><a jsfc="h:link" outcome="about">#{global.aboutInCaps}</a></li>
            <li id="blog"><a jsfc="h:link" outcome="blog">#{global.blogInCaps}</a></li>
            <li id="tutorials"><a jsfc="h:link" outcome="tutorials">#{global.tutorialsInCaps}</a>
                <ul class="leftSubNav">
                    <li><a jsfc="h:link" outcome="java">#{global.javaNormal}</a>
                        <ul class="leftSubNav">
                            <li><a jsfc="h:link" outcome="setupPath">#{global.path}</a></li>
                        </ul>
                    </li>
                    <li><a jsfc="h:link" outcome="ubuntu">#{global.ubuntuNormal}</a></li>
                    <li><a jsfc="h:link" outcome="virtualbox">#{global.virtualBoxNormal}</a></li>
                </ul>
            </li>
            <li id="contact"><a jsfc="h:link" outcome="contact">#{global.contactInCaps}</a></li>
        </ul>

    </ui:define>

【问题讨论】:

    标签: css jsf facelets


    【解决方案1】:

    在 JSF 中,您可以通过

    获取当前视图 ID
    #{facesContext.viewRoot.viewId}
    

    它将返回视图文件的 webcontent-relative 路径,例如/home.xhtml/about.xhtml 等。您可以借助 EL 中的条件运算符来设置类名来测试它。

    <ui:param name="view" value="#{facesContext.viewRoot.viewId}" />
    
    <li id="home"><a jsfc="h:link" outcome="home" class="#{view == '/home.xhtml' ? 'current' : ''}">#{global.homeInCaps}</a></li>
    <li id="about"><a jsfc="h:link" outcome="about" class="#{view == '/about.xhtml' ? 'current' : ''}">#{global.aboutInCaps}</a></li>
    <li id="blog"><a jsfc="h:link" outcome="blog" class="#{view == '/blog.xhtml' ? 'current' : ''}">#{global.blogInCaps}</a></li>
    ...
    

    然后您可以使用 CSS 设置代表当前页面的链接样式

    .leftNav .current {
        color: pink;
    }
    

    leftNav 不应该是id 吗?

    【讨论】:

    • 非常感谢。我在网上很多地方都非常喜欢你的作品。我知道,当我看到您的回复时,问题就得到了解答……
    • 只是出于兴趣,有没有一种 API 方法可以返回 java.lang.String 格式的完整 URL?我需要根据它所在的目录来测试页面上下文。例如。关于锚点不仅突出显示关于页面,还突出显示 /about 目录中的所有页面?我在IDEA中看不到提供表示url的String的方法...
    • 使用返回HttpServletRequest#getRequestURI()#{request.requestURI}。它不包括协议/主机/端口,但对于这个特殊要求来说,这并不重要,不是吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-08-15
    • 2012-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-11
    相关资源
    最近更新 更多