javascript - 如何添加到<p:submenu>的链接？

如何添加到<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属性，因此将被忽略，我该怎么办？

最佳答案

我正面临这个问题，我发现很多人说这不可能，因为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）我用专有的<p:submenu>定义了每个styleClass

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的浏览器一起工作。

关于javascript - 如何添加到<p:submenu>的链接？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13872197/

SubMenu

javascript - 如何添加到<p:submenu>的链接？