java - 菜单错误的解决方法

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>

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

它也发生在展示柜中，尽 pipe 菜单随后被简单地隐藏了。

这使得它无法用于某些客户端 (ipad)。

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

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

Answer 1

你能给我们看一张图片吗？如果你不坚持使用 2.2.1，你也可以升级到 3.0.M4 版本...

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

无论如何，如果一个子菜单需要这么多的菜单项，我认为这个设计有点不对!

另一种解决方案是在页面的左 Angular/部分使用分层或滑动菜单 - 我更喜欢滑动菜单，正好适合这些类型的情况:你可以有上千个子菜单项! 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

编辑2:

您不必从 Primefaces 进行更改(顺便说一下，PF 组件已经在使用 jquery)，因此您可以使用它的内置 jquery 版本(1.4 用于 PF 2，1.6 用于 PF 3):

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

因此您可以在 primefaces 组件中拥有一个简单的 html/jquery 解决方案。

编辑3:

修复 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>