解決菜單問題的方法

使用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

解決菜單問題的方法

回答

相關問題