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

Question

How can I add links to <p:submenu /> for use with <p:megaMenu> ? 如何将链接添加到<p:submenu />以与<p:megaMenu> ？

For example: 例如：

<!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>

The <p:submenu /> doen't have the url attribute, so it will be ignored, what can I do instead? <p:submenu />没有url属性，因此将被忽略，我该怎么办？

Answer 1

I was facing this issue, I found lot's of people saying that it was not possible because primefaces doesn't support it, but there's a workaround if you don't mind using a bit of javascript: 我正面临这个问题，我发现很多人说这不可能，因为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>

What I did here was: 我在这里所做的是：

1) I defined every <p:submenu> with an exclusive styleClass 1）我用专有的styleClass定义了每个<p:submenu>

2) If the <p:submenu> is on the first line, I changed the <a> 's href attribute to my link after the DOM is ready: 2）如果<p:submenu>在第一行，则在DOM准备就绪后，将<a>的href属性更改为我的链接：

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

3) If the <p:submenu> is part of a menu, I created an onclick attribute and customized the cursor to pointer since there's no <a> tag there. 3）如果<p:submenu>是菜单的一部分，则由于没有<a>标记，因此我创建了onclick属性并自定义了指针的光标。

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

This resulted in the menu that I needed, and of course, will not work if javascript is disabled, but now the menu will work with javascript enabled browsers. 这产生了我需要的菜单，当然，如果禁用了javascript，该菜单将不起作用，但是现在该菜单将与启用了javascript的浏览器一起工作。

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-12-14 03:46:25

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-12-14 03:46:25

解决方案1
4 已采纳 2012-12-14 03:46:25