如何添加到 <p:submenu> 的链接？答案

【问题标题】：How to add a link to <p:submenu>?如何添加到 <p:submenu> 的链接？
【发布时间】：2012-12-02 01:43:33
【问题描述】：

如何添加指向<p:submenu /> 的链接以用于<p:megaMenu>？

例如：

<!DOCTYPE html>
<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    template="/pages/template/homeTemplate.xhtml">

    <ui:define name="content">
        <p:megaMenu>
            <p:submenu label="Home" url="/" />
            <p:submenu label="Category" url="/cats">
                <p:column>
                    <p:submenu label="Category 1" url="/cats/cat1">
                        <p:menuitem value="Item 1" url="/cats/cat1/item1"/>
                        <p:menuitem value="Item 2" url="/cats/cat1/item2"/>
                        <p:menuitem value="Item 3" url="/cats/cat1/item3"/>
                    </p:submenu>
                </p:column>
            </p:submenu>
        </p:megaMenu>  
    </ui:define>

</ui:composition>

<p:submenu /> 没有url 属性，所以会被忽略，我该怎么办？

【问题讨论】：

javascript 和 jquery 有什么关系？
@Swarnajith primefaces 在页面中包含 jQuery，因此也可以使用客户端处理来归档结果。

标签： javascript jquery jsf jakarta-ee primefaces

【解决方案1】：

我遇到了这个问题，我发现很多人说这是不可能的，因为 primefaces 不支持它，但是如果你不介意使用一点 javascript，有一个解决方法：

<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    template="/pages/template/homeTemplate.xhtml">

    <ui:define name="content">
        <p:megaMenu id="megaMenu">
            <p:submenu label="Home" url="/" styleClass="homeLink" />
            <p:submenu label="Category" url="/cats" styleClass="catLink">
                <p:column>
                    <p:submenu label="Category 1" styleClass="cat1Link">
                        <p:menuitem value="Item 1" url="/cats/cat1/item1"/>
                        <p:menuitem value="Item 2" url="/cats/cat1/item2"/>
                        <p:menuitem value="Item 3" url="/cats/cat1/item3"/>
                    </p:submenu>
                </p:column>
            </p:submenu>
        </p:megaMenu>
        <script type="text/javascript">
        $(function(){
            $(".homeLink a:first").attr('href', "#{request.contextPath}/");
            $(".catLink a:first").attr('href', "#{request.contextPath}/cats");
            $(".cat1Link").click(function(){
                window.location.href="#{request.contextPath}/cats/cat1";
            }).css('cursor','pointer');
        });
        </script>
    </ui:define>

</ui:composition>

我在这里所做的是：

1) 我用专属的styleClass 定义了每个<p:submenu>

2）如果<p:submenu>在第一行，我在DOM准备好后将<a>的href属性更改为我的链接：

$(function(){
    $(".homeLink a:first").attr('href', "#{request.contextPath}/");
    $(".catLink a:first").attr('href', "#{request.contextPath}/cats");
});

3) 如果<p:submenu> 是菜单的一部分，我创建了一个onclick 属性并将光标自定义为指针，因为那里没有<a> 标记。

$(".cat1Link").click(function(){
    window.location.href="#{request.contextPath}/cats/cat1";
}).css('cursor','pointer');

这导致了我需要的菜单，当然，如果禁用 javascript，将无法使用，但现在该菜单将适用于启用 javascript 的浏览器。

【讨论】：

在我的解决方案中，我也必须删除 onClick 事件侦听器；可以通过使用 off 来完成，例如 $(".catLink a:first").off("click");