解决菜单问题的方法

使用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/;如果您将窗口高度缩小到略小于菜单大小，则会显示在上方。

来源

2011-12-02 ymajoros

请提供一个jsfiddle链接，以便我们可以看看。这太模糊了。 –

我不知道jsfiddle。试过了，但如何有链接到JavaScript我的jsf页面使用？它使用“wijmo菜单”。 – ymajoros

http://www.jsfiddle.net <=添加所有相关的代码，以便我们看到问题。 –

你能告诉我们一张图片吗？你也可以升级到3.0.M4 version如果你没有卡住2.2.1 ...

我测试了你的代码在版本3中，最后一项。

无论如何，我认为设计在某种程度上是错误的，如果你需要这么多menuItems的单个subMenu！

另一个解决方案是在页面的左上角/部分使用tiered or sliding menu - 我更喜欢这些类型的情况下，滑动菜单正是：你可以有一千submenuItems！ 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版本（1.4 PF 2和1.6 PF 3）：

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

所以，你可以有内部一个简单的HTML/jQuery的解决方案primefaces组件。

EDIT3：

杀青Primefaces菜单栏的实现 - 增加了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>

来源

2011-12-05 11:10:20 spauny

这是一个生产应用程序，所以我坚持任何稳定的版本。另外，当从2.x转到3.x时，我担心很多其他问题，所以我宁愿在有时间的情况下这样做。 – ymajoros

对于有趣的想法+1，但我的客户希望有一个适用于ipad的水平菜单。它曾经在2.1上工作，升级到2.2.1打破了这一点。 – ymajoros

@ymajoros我已经用一个实用的解决方案更新了我的答案... – spauny

下面是我实现的解决方案，基于@spauny的建议。

它适用于id =“menuForm”元素下的菜单（在我的情况下，这是我的表单）。此外，我只在clickend时才显示我的菜单，如果需要，请将click（）替换为hover（）。

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

来源

2011-12-06 12:44:45 ymajoros

解决菜单问题的方法

回答

相关问题