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.
-
Author
-
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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.