jQuery UI Widgets Forums Navigation Menu, Context Menu Menu item click programmatically

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 11 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Menu item click programmatically #48159

    al3dv
    Participant

    Hi All, I have a question about the menu.

    is it possible to simulate a click on a particular item programmatically.

    When I click on a menu item the page makes some operation, and I want to reproduce the same operations also programmatically when I click in a button inside my page.

    I hope to be clear…and sorry form my english.

    Ale

    Menu item click programmatically #48187

    Dimitar
    Participant

    Hello Ale,

    Here is an example:

    <!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>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical' });
                $('#jqxMenu').on('itemclick', function (event) {
                    $("body").append("Clicked ");
                });
                $("button").click(function () {
                    $("#jqxMenu li:eq(0)").click();
                });
            });
        </script>
    </head>
    <body>
        <div id='content'>
            <button id="button">
                Simulates item click on "Home"</button>
            <div id='jqxWidget' style="margin-top: 10px;">
                <div id='jqxMenu'>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li>About Us
                            <ul>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Our Vision</a></li>
                            </ul>
                        </li>
                        <li>Services </li>
                        <li>Products
                            <ul>
                                <li><a href="#">New</a>
                                    <ul>
                                        <li><a href="#">Corporate Use</a></li>
                                        <li><a href="#">Private Use</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Used</a>
                                    <ul>
                                        <li><a href="#">Corporate Use</a></li>
                                        <li><a href="#">Private Use</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Featured</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

    We hope it is helpful to you.

    Best Regards,
    Dimitar

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

    Menu item click programmatically #48198

    al3dv
    Participant

    Hi Dimitar, thanks for replay.

    Just Last question: if I should be click programmatically on “Private Use”?

    what number/id I have to write there –> $(“#jqxMenu li:eq(?)”).click();

    and in which way I can retreive the id for all items of my menu?

    thanks in advance

    Menu item click programmatically #48251

    Dimitar
    Participant

    Hi al3dv,

    To “click” on Products→New→Private Use, you would have to change the jQuery selection as follows:

    $("button").click(function () {
        $("div.jqx-menu-popup:eq(1) div:eq(1) li:eq(1)").click();
    });

    In the DOM, popup menus are not children of the main menu with top-level items. The selection means: select the second popup menu on the page (div.jqx-menu-popup:eq(1)), then select the first submenu (div:eq(1)) – if you write eq(0), it will select the parent popup menu (with New) and finally select the second item – Private Use (li:eq(1)).

    As for your second question – unfortunately, there is no method for getting the items (and their ids) of a jqxMenu.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.