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 11 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Context menu on listBox element #10583

    branko7171
    Member

    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.

    Context menu on listBox element #10596

    Peter Stoev
    Keymaster

    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 &amp; 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 &amp; 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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Context menu on listBox element #10638

    branko7171
    Member

    Thanks a lot. It works like I intended it to.

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

You must be logged in to reply to this topic.