jQuery UI Widgets Forums Navigation Menu, Context Menu jqxmenu RTL issue

This topic contains 4 replies, has 2 voices, and was last updated by  raj 9 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxmenu RTL issue #57601

    raj
    Participant

    Hi all,

    Here last menu has sub items, i need rtl options for lastmenu only, not for all the menu items. How we can achieve this, consider the following code to resolve my issue.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
        <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
        <link href="../Assets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
        <link href="../Assets/Styles/css/font-awesome.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#menu").jqxMenu({ width: '125px', mode: 'vertical', autoCloseOnClick: false });
            });
    
        </script>
    </head>
    <body>
        <div id="menu" style="float:right;">
            <ul style="padding-right: 4px; padding-left: 4px; cursor: pointer">
                <li><span>First</span></li>
                <li><span>Second</span></li>
                <li><span>Third</span></li>
                <li><span>Fourth</span></li>
                <li><span>Fifth</span>
                    <ul id="columnfield" style="padding-right: 4px; padding-left: 4px; cursor: pointer">
                        <li><span>
                            <input type="checkbox" id="checkbox1" />First </span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox2" />Second</span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox3" />Third</span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox4" />Fourth</span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox5" />Fifth</span></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    </html>
    • This topic was modified 9 years, 8 months ago by  raj. Reason: Coding alignment
    jqxmenu RTL issue #57604

    Dimitar
    Participant

    Hello raj,

    Right-to-left can only be applied to the whole menu. However, you may use the method setItemOpenDirection to change the open direction of some item’s pop-up (example).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxmenu RTL issue #57608

    raj
    Participant

    Hi Dimitar,
    Thanks for your quick support, I can achieved what i excepted, but It is possible to change the arrow position to left side. please refer the code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="../Assets/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
        <script src="../Assets/jqwidgets/jqx-all.js" type="text/javascript"></script>
        <link href="../Assets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
        <link href="../Assets/Styles/css/font-awesome.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#menu").jqxMenu({ width: '125px', mode: 'vertical', autoCloseOnClick: false });
                $("#menu").jqxMenu('setItemOpenDirection', 'Home', 'left', 'down');
    
                // create checkboxes
                //            $("#checkbox1").jqxCheckBox({ checked: true });
                //            $("#checkbox2").jqxCheckBox({});
                //            $("#checkbox3").jqxCheckBox({});
                //            $("#checkbox4").jqxCheckBox({});
                //            $("#checkbox5").jqxCheckBox({});
    
                $("#lblcreategroup").click(function () {
                    $("#btnsave").show();
                    $(this).hide();
                    $(txtgroup).show();
                })
    
                var temp = "<li><i class=\"fa fa-html5\"></i><span style=\"\">Export HTML</span></li><li><i class=\"fa fa-file-pdf-o fa-fw\" style=\"margin-left: -3px;\"></i><span style=\"padding-left: 5px;\">Export PDF</span></li>";
                $("#grouphorizontalline").append('<li><span id="currentgroup" style="padding-left: 3px; font-style: italic;" onclick="setcurrentgroup()">Current Group</span> </li>');
    
            });
        </script>
    </head>
    <body>
        <div id="menu" style="float:right;">
            <ul style="padding-right: 4px; padding-left: 4px; cursor: pointer">
                <li><span>First</span></li>
                <li><span>Second</span></li>
                <li><span>Third</span></li>
                <li><span>Fourth</span></li>
                <li id="Home"><span>Fifth</span>
                    <ul id="columnfield" style="padding-right: 4px; padding-left: 4px; cursor: pointer">
                        <li><span>
                            <input type="checkbox" id="checkbox1" />First </span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox2" />Second</span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox3" />Third</span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox4" />Fourth</span></li>
                        <li><span>
                            <input type="checkbox" id="checkbox5" />Fifth</span></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    </html>
    jqxmenu RTL issue #57632

    Dimitar
    Participant

    Hi raj,

    Unfortunately, the arrow direction can only be changed by setting rtl to true, but, as I stated, this would affect the whole menu.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxmenu RTL issue #57700

    raj
    Participant

    Hi Dimitar

    Thanks for your kind support.

    Best Regards,
    Raj

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.