Обходной путь для ошибки меню - PullRequest
Новая
       8

Обходной путь для ошибки меню

1 голос
/ 03 декабря 2011

При использовании 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/;если вы уменьшите высоту окна до размера, немного меньшего размера меню, оно появится выше.

Ответы [ 2 ]

1 голос
/ 05 декабря 2011

Можете ли вы показать нам изображение? Также вы можете перейти на 3.0.M4 version, если вы не застряли с 2.2.1 ...

Я протестировал ваш код в версии 3, и если у меня много menuItems, появляется scroll для легкой навигации к последнему элементу.

Во всяком случае, я думаю, что дизайн как-то не так, если вам нужно так много пунктов меню для одного подменю!

Другим решением было бы использовать tiered or sliding menu в левом углу / части страницы - я предпочитаю скользящее меню именно для этих типов ситуаций: у вас может быть тысяча подменю! http://www.primefaces.org/showcase-labs/ui/menu.jsf

EDIT: Так как вы не можете изменить версию простых лиц, возможно, пришло время искать решение в другом месте:

  • решение 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 внутри основных компонентов.

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>
0 голосов
/ 06 декабря 2011

Вот решение, которое я реализовал на основе предложений @spauny.

Оно работает для меню в элементе с id = "menuForm" (в моем случае это моя форма).Кроме того, я отображаю мои меню только при нажатии, замените 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>
...