jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Two menu widgets on a page
Tagged: Context Menu, jqxMenu, Menu
This topic contains 2 replies, has 2 voices, and was last updated by avintagephoto 12 years, 11 months ago.
-
Author
-
I really want to make something simple but seem to have an issue with this. How do I make it so I can have a menu and a context menu on the same page? It seems to only work with one widget per page. Any help would be greatly appreciated.
Hi avintagephoto,
Thank you for writing.
I have tried to reproduce the reported issue, but without avail. I am sending you the code that I use which is actually a modification of the contextmenu.htm demo(included in the download package).
Here’s my 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 id='Description'> This demo demonstrates how to use the jqxMenu widget as a Context Menu. In order to display the jqxMenu as Context Menu, you need to set the 'mode' property to 'popup'. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.default.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = $.data(document.body, 'theme'); if (theme == null || theme == undefined) theme = ''; // Create a jqxMenu var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup', theme: theme }); var menu= $("#jqxMenu2").jqxMenu({ width: '400px', height: '30px' , theme: theme }); // open the context menu when the user presses the mouse right button. $("#jqxWidget").bind('mousedown', function (event) { var rightClick = isRightClick(event); if (rightClick) { var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop); return false; } else contextMenu.jqxMenu('close'); }); // disable the default browser's context menu. $(document).bind('contextmenu', function (e) { return false; }); function isRightClick(event) { var rightclick; if (!event) var event = window.event; if (event.which) rightclick = (event.which == 3); else if (event.button) rightclick = (event.button == 2); return rightclick; } }); </script> <div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 600px;'> <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> <li><a href="#">The Team</a> <ul> <li><a href="#">Brigita</a></li> <li><a href="#">John</a></li> <li><a href="#">Michael</a></li> <li><a href="#">Peter</a></li> <li><a href="#">Sarah</a></li> </ul> </li> <li><a href="#">Clients</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Press</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li>Services <ul> <li><a href="#">Product Development</a></li> <li><a href="#">Delivery</a></li> <li><a href="#">Shop Online</a></li> <li><a href="#">Support</a></li> <li><a href="#">Training & Consulting</a></li> </ul> </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> <li><a href="#">Top Rated</a></li> <li><a href="#">Prices</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">Enquiry Form</a></li> <li><a href="#">Map & Driving Directions</a></li> <li><a href="#">Your Feedback</a></li> </ul> </li> </ul> </div> <div id='jqxMenu2'> <ul> <li><a href="#">Home</a></li> <li>About Us <ul> <li><a href="#">History</a></li> <li><a href="#">Our Vision</a></li> <li><a href="#">The Team</a> <ul> <li><a href="#">Brigita</a></li> <li><a href="#">John</a></li> <li><a href="#">Michael</a></li> <li><a href="#">Peter</a></li> <li><a href="#">Sarah</a></li> </ul> </li> <li><a href="#">Clients</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Press</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li>Services <ul> <li><a href="#">Product Development</a></li> <li><a href="#">Delivery</a></li> <li><a href="#">Shop Online</a></li> <li><a href="#">Support</a></li> <li><a href="#">Training & Consulting</a></li> </ul> </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> <li><a href="#">Top Rated</a></li> <li><a href="#">Prices</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">Enquiry Form</a></li> <li><a href="#">Map & Driving Directions</a></li> <li><a href="#">Your Feedback</a></li> </ul> </li> </ul> </div> <span style='font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;'> Right-Click here to Open the Menu </span> </div> </div> </body> </html>Here’s also a link to the Demo: Menu and Context Menu
Could you try using the above code to create the Menu and Context Menu in your project? If you still reproduce the issue, could you send us a small demo that demonstrates it? You can send the demo to our Support mail at support@jqwidgets.com. We’ll be happy to help you.Best Regards,
Peter StoevThank you so much! This helped. Had developer’s block! Love the widgets menu that you have created!
=avintagephoto!
-
AuthorPosts
You must be logged in to reply to this topic.