java - 无法为 Primefaces 的分层菜单滚动 DIV

Question

怎么做auto scroll对于 Primefaces Tiered Menu ？

我想设置 div 宽度 200px .那时，我看不到 primefaces 子菜单。
我想放在前面 sub-menu of tieredMenu .

代码

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:fu="http://java.sun.com/jsf/fileUpload"
    template="/common/commonLayout.xhtml">
    <ui:define name="content">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            $("ul.ui-menu-list.ui-widget-content").css("position", "fixed");
        </script>
        <h:form enctype="multipart/form-data">
            <div style="overflow: auto;width:200px;height:200px;border:3px corsal solid;">
            <p:tieredMenu style="width:150px">  
                <p:submenu label="Ajax Menuitems">  
                    <p:menuitem value="Save"/>  
                    <p:menuitem value="Update"/>  
                </p:submenu>  
                <p:submenu label="Non-Ajax Menuitem">  
                    <p:menuitem value="Delete"/>  
                </p:submenu>  
                <p:separator />  
                <p:submenu label="Navigations">  
                    <p:submenu label="Prime Links">  
                        <p:menuitem value="Prime"/>  
                        <p:menuitem value="PrimeFaces"/>  
                    </p:submenu>  
                    <p:menuitem value="Mobile"/>  
                </p:submenu>  
                <p:separator />  
                <p:submenu label="Navigations">  
                    <p:submenu label="Prime Links">  
                        <p:menuitem value="Prime"/>  
                        <p:menuitem value="PrimeFaces"/>  
                    </p:submenu>  
                    <p:menuitem value="Mobile"/>  
                </p:submenu>  
                <p:separator />  
                <p:submenu label="Navigations">  
                    <p:submenu label="Prime Links">  
                        <p:menuitem value="Prime"/>  
                        <p:menuitem value="PrimeFaces"/>  
                    </p:submenu>  
                    <p:menuitem value="Mobile"/>  
                </p:submenu>  
                <p:separator />  
                <p:submenu label="Navigations">  
                    <p:submenu label="Prime Links">  
                        <p:menuitem value="Prime"/>  
                        <p:menuitem value="PrimeFaces"/>  
                    </p:submenu>  
                    <p:menuitem value="Mobile"/>  
                </p:submenu>  
                <p:separator />  
                <p:submenu label="Navigations">  
                    <p:submenu label="Prime Links">  
                        <p:menuitem value="Prime"/>  
                        <p:menuitem value="PrimeFaces"/>  
                    </p:submenu>  
                    <p:menuitem value="Mobile"/>  
                </p:submenu>  
            </p:tieredMenu>  
            </div>
            <script type="text/javascript">
                $("ul.ui-menu-list.ui-widget-content").css("position", "fixed");
            </script>
        </h:form>
    </ui:define>
</ui:composition>

需要您的建议。

更新为了更清晰，我更新了图片和代码。

我想看看<p:submenu> DIV 的顶部.

Answer 1

这里使用以下 JQuery 脚本，在您关闭 div 标签之后:[将脚本放在 DIV 标签之后]

After Huge effort I finally came up with this script:

 <script type="text/javascript">
            var v = $("li.ui-widget.ui-menuitem.ui-corner-all.ui-menu-parent");
            $(v).bind("mouseover",function(event){
                var target = event.target;
                var mItem;

                if($(target).is("a")){
                    mItem = $(target).siblings("ul.ui-menu-list");
                }
                else if($(target).is("span")){
                    mItem = $(target).parent().siblings("ul.ui-menu-list"); 
                }

                if(mItem!=undefined){
                    var parnt = $(mItem).parent();
                    try{
                        var parpos = $(parnt).offset();
                        var x = parpos.left;
                        var y = parpos.top;
                        $(mItem).css('top',y);
                        $(mItem).css('position','fixed');

                    }catch(err){}
                }
            });
        </script>