Question

使用Primefaces 2.2.1，如果菜单栏的子菜单对于浏览器窗口来说太大，它会出现在菜单栏上方（页面外）并且无法使用。

简单的测试用例：

代码：

<p:menubar>
<p:submenu label="test">
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
...
</p:submenu>
<p:menubar>

如果您将窗口大小减小到一个较小的高度，您可以看到问题。

它也会在展示中发生，尽管子菜单只是隐藏了。

这使得它无法用于某些客户端（ipad）。

任何变通方法或解决方案？

更新：我可以在此页面上重现该问题：http://wijmo.com/widgets/wijmo-open/menu/;如果您将窗口高度减小到略小于菜单大小，则会显示在上面。

Answer 1

你能告诉我们一张照片吗？如果你没有坚持使用2.2.1 ......

，你也可以升级到3.0.M4 version

我已在第3版中测试了您的代码，如果我有很多menuItems，则会出现scroll，以便轻松导航到最后一项。

无论如何，如果你需要为一个subMenu提供这么多的menuItem，我认为设计有点错误！

另一个解决方案是在页面的左上角/部分使用tiered or sliding menu - 我更喜欢滑动菜单以适应这些类型的情况：您可能有一千个子菜单项！ http://www.primefaces.org/showcase-labs/ui/menu.jsf

编辑：由于您无法更改primefaces版本，可能是时候在其他地方寻找解决方案了：

一个jquery解决方案，简单而有效：我在这里写了代码（html，css，javascript），你可以在东南方框中看到结果 - http://jsfiddle.net/4UFmk/。

来源博客：http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

EDIT2：

您不必更改Primefaces（通过PF组件已经使用jquery的方式），因此您可以使用它的内置jquery版本（PF 2为1.4，PF 3为1.6）：

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

所以你可以在primefaces组件中有一个简单的html / jquery解决方案。

EDIT3：

修复Primefaces menuBar实现 - 添加一个jquery函数来修复子菜单（ul）在单击菜单项时的显示方式：

<h:form id='menuForm' >
     <p:menubar>
        <p:submenu label="test">
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          ...
        </p:submenu>
     <p:menubar>
</h:form>
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /> <!-- use the jquery library built-in primefaces -->
<h:outputScript>
// Add the $() function to avoid conflict with primefaces
$ = jQuery;
function mainmenu(){
    $("#menuForm li").click(
        function(e){
            $(e.currentTarget).children("ul").css("top", 28);
        });
}
$(document).ready( function(){ mainmenu(); });
</h:outputScript>

Answer 2

以下是我根据@spauny的建议实施的解决方案。

适用于ID为＆＃34; menuForm＆＃34;的元素下的菜单。（就我而言，这是我的表格）。另外，我只在clickend时显示我的菜单，如果需要，用hover（）替换click（）。

<h:outputScript>
$ = jQuery;
function mainmenu(){
    $("#menuForm li").click(
        function(e){
            $(e.currentTarget).children("ul").css("top", 28);
        });
}
$(document).ready( function(){ mainmenu(); });
</h:outputScript>

菜单错误的解决方法

2 个答案: