jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Context menu on listBox element
This topic contains 2 replies, has 2 voices, and was last updated by branko7171 12 years, 5 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Hey,
I’m trying to make a context menu appear when I click on a listBox element. I’ve used the code provided in the example:var contextMenu = $("#jqxMenu1").jqxMenu({ width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup'}); $("#jqxlistbox1").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; } }); $(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; }
Now, that provides me with a context menu when I click on the “white surface” of listBox1. I don’t know how I can “target” select event on a listBox item.
I’ve tried changing to $(“#jqxlistbox1”).bind(‘select’, function(event), but it doesn’t work.
Another problem is that beside the context menu I get when I click on the “white surface” another context menu appears (from the browser). As I understand the following code should have disabled that:$(document).bind('contextmenu', function (e) { return false; });Can you help? Thanks.
Hi branko7171,
‘mousedown’ event is handled by jqxListBox so you will have to use the ‘mouseup’ instead.
Sample 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> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.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 = getTheme(); var source = [ "Affogato", "Americano", "Bicerin", "Breve", "Café Bombón", "Café au lait", "Caffé Corretto", "Café Crema", "Caffé Latte", "Caffé macchiato", "Café mélange", "Coffee milk", "Cafe mocha", "Cappuccino", "Carajillo", "Cortado", "Cuban espresso", "Espresso", "Eiskaffee", "The Flat White", "Frappuccino", "Galao", "Greek frappé coffee", "Iced Coffee", "Indian filter coffee", "Instant coffee", "Irish coffee", "Liqueur coffee" ]; // Create a jqxListBox $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: theme }); // Create a jqxMenu var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup', theme: theme }); // open the context menu when the user presses the mouse right button. $("#jqxWidget").bind('mouseup', 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; } }); // 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'> </div> <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></body></html>
To learn how to use the jqxListBox’s select event, see this sample:events.htm.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks a lot. It works like I intended it to.
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.