Question

我使用primefaces版本4.我想知道是否有人处理菜单栏从右到左对齐。怎么办呢？是否有其他菜单来处理从右到左，没有与primefaces的混淆？对不起我的英语。

Answer 1

您有两种选择：如果您想要阿拉伯语言页面的rtl方向菜单，您可以使用此

<f:view locale="#{sample.locale}">
  <p:inputText />
  <p:SomeOtherComponents...>
</f:view>

更多信息：http://code.google.com/p/primefaces/issues/detail?id=3890

如果您只想在左侧放置带有项目的菜单栏，则可以使用<p:toolbar>

更多信息：http://www.primefaces.org/showcase/ui/toolbar.jsf

借口google翻译我的英语。

Answer 2

如果您正在讨论p:menuitem内p:menubar的对齐方式，请查看提供的example。他们是通过将有关的p:menuitem包裹在其中来实现的：

<f:facet name="options">

</f:facet>

Answer 3

我编写了一个JS方法来切换弹出的菜单项，以及子菜单的箭头。

function rtlMenu() { 
    //Setup id's 
    //Variables, menu arrow arrow, parent array name etc.
    var menuEl = document.getElementsByClassName('ui-widget-content ui-menu-list ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow');
    var menuHrefs = document.getElementsByClassName('ui-menuitem-link ui-corner-all');
    var allMenuItems = document.getElementsByClassName("ui-menuitem-text");                 
    var menuArrows = document.getElementsByClassName('ui-icon ui-icon-triangle-1-e');

    var clonedArrow = null;
    var cnt = 0;

    var arrowName = "theMenuArrowParentSpanElement";
    var idName = "temp_id_menu_item_rtl_rebuild_";
    var aIdName = "temp_href_menu_rtl_popup_";

    var firstALink = aIdName + "0";
    var firstName = idName + "0";

    //align all menu items right 
    for ( var ami = 0 ; ami < allMenuItems.length; ami++) { 
        var menuItemel = allMenuItems[ami];                                         
        menuItemel.style.float = "right";
    }                       

    //Give menus id's                   
    for ( x=0; x < menuEl.length; x++) {                    
        menuEl[x].id = idName + x;                      
    }   

    //Give a-link's id's
    for ( y=0; y < menuHrefs.length; y++) {                     
        menuHrefs[y].id = "temp_href_menu_rtl_popup_" + y;
    }   

    //Click main menu - Init primefaces menu scripts                    
    $( "#" + firstALink ).click();

    //Show first menu                   
    $( "#" + firstName ).show();

    //Popup submenus - This init the menu position CSS
    for ( y=0; y < menuHrefs.length; y++) {                     
        $( "#" + menuHrefs[y].id  ).mouseenter();
    }

    //Set menu's right from left using left values set to right
    //Only Top level
    for ( x=0; x < menuEl.length; x++) {                        
        var origLeft = document.defaultView.getComputedStyle( menuEl[x] , null).left ;
        numericLeft = origLeft;

        var menuTopParentTag = menuEl[x].parentNode.parentNode.parentNode.tagName;

        if ( parseInt(numericLeft) < 0 
             &&
             menuTopParentTag != "UL" && 
             menuTopParentTag != "LI" 
        ) {     
            //Main menus with negative - Do nothing 
            continue;
        } else { 
            if ( menuTopParentTag == "UL" || 
                 menuTopParentTag == "LI" ) {
                 //Sub menus - Do nothing 
                 continue;
            }  
            //Main menus - Shift left
            menuEl[x].style.right = origLeft;
            menuEl[x].style.left = "";
        }
    }   

    //Popup submenus - This init the menu position CSS
    for ( y=0; y < menuHrefs.length; y++) {                     
        $( "#" + menuHrefs[y].id  ).mouseenter();
    }

    //Set menu's right from left using left values set to right
    //Only sub levels
    for ( x=0; x < menuEl.length; x++) {                        
        var origLeft = document.defaultView.getComputedStyle( menuEl[x] , null).left ;
        numericLeft = origLeft;

        var menuTopParentTag = menuEl[x].parentNode.parentNode.parentNode.tagName;

        if ( parseInt(numericLeft) < 0 
             &&
             menuTopParentTag != "UL" && 
             menuTopParentTag != "LI" 
        ) {     
            //Main menus with negative - Do nothing 
            continue;
        } else { 
            if ( menuTopParentTag != "UL" && 
                 menuTopParentTag != "LI" ) {
                 //Main menus - Do nothing 
                 continue;
            }  
            //Sub menus - Shift left
            menuEl[x].style.right = origLeft;
            menuEl[x].style.left = "";
        }
    }   

    //Hide the menu's again, if this is done earlier, the menu positions are wrong
    for ( y=0; y < menuHrefs.length; y++) {                     
        $( "#" + menuHrefs[y].id  ).mouseenter();
        $( "#" + menuHrefs[y].id  ).mouseleave();
    }

    //Move menu popout arrow icons 
    //Make sure this is not an infinate loop
    //Because we are removing the children the array needs to be re- initialized, it removes from the array as well. 

    //Name the parents to get parent array
    //Clone a arrow element
    for ( var ar = 0 ; ar < menuArrows.length; ar++) { 
        var arrowElement = menuArrows[ar];
        clonedArrow = arrowElement.cloneNode(true);

        arrowElement.parentElement.name = arrowName;
    }   

    //Remove the arrows, make sure it is not an endless loop
    while ( (cnt < 2000) && (menuArrows.length > 0) ) { 
        cnt++;      
        var arrowElement = menuArrows[0];
        var arrowElementParent = menuArrows[0].parentElement;

        arrowElementParent.removeChild(arrowElement);   
        menuArrows = document.getElementsByClassName('ui-icon ui-icon-triangle-1-e');                  
     }

    //Get parent array
    var allArrowParents = document.getElementsByName(arrowName);

    //Rotate cloned object 
    clonedArrow.className += " rotate180Arrow ";
    clonedArrow.style.float = "left";

    //Add arrow back as first child of parents 
    for ( var arp = 0 ; arp < allArrowParents.length; arp++) { 
        var arrowParent = allArrowParents[arp];
        //Insert new object as the cloned object                        
        arrowParent.insertBefore(clonedArrow.cloneNode(true), arrowParent.firstChild);
    }   

}

我们在生产环境中使用它。将菜单从ltr移动到rtl是通过不使菜单100％宽度，然后使用垫片并将菜单放置在具有2列的面板网格中来实现的，该空间占据100％的空间。从菜单栏中删除边框并将其添加为panelgrid的边框。

<!-- Menubar -->
                        <h:panelGrid columns="2" styleClass="ui-menu ui-menubar ui-widget ui-widget-content ui-corner-all ui-helper-clearfix"
                                     style=" width:100%; padding: 0px; border-collapse: collapse; border:none; " dir="#{textBundle['html.direction']}"  >

                            <h:panelGroup style="white-space: nowrap; width:100%; " >                                   

                                <h:panelGrid columns="1"  style="white-space: nowrap; padding: 0px; border:none; border-collapse: collapse;  " 
                                             dir="#{textBundle['html.direction']}"  >

                                    <p:menubar id="menuBar" model="#{menuController.model}" rendered="true"
                                               autoDisplay="false" style="padding: 0px; white-space: nowrap; border:none; background:none; " />                                             

                                </h:panelGrid>                                  
                            </h:panelGroup>
                            <h:panelGroup style="overflow:hidden; width:100%; " ></h:panelGroup>
                        </h:panelGrid>

我们正在使用阿拉伯语和RTL语言环境设置为埃及的客户使用此功能。

如何将菜单面从右到左对齐？

3 个答案: