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

Question

如何將鏈接添加到<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屬性，因此將被忽略，我該怎么辦？

Answer 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>是菜單的一部分，則由於沒有<a>標記，因此我創建了onclick屬性並自定義了指針的光標。

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

這產生了我需要的菜單，當然，如果禁用了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