Question

我想根据光标的位置使用jQuery UI制作一个简单的菜单。这完全是我想要的：http://medialize.github.io/jQuery-contextMenu/demo/dynamic-create.html但正如我所说，我想使用jQuery UI。在示例http://jqueryui.com/menu/中，屏幕上的菜单始终是静态的，我如何在dinamically中显示它（在鼠标点击附近显示）？

提前致谢，

卢卡斯。

Answer 1

这是我拼凑的小提琴。

http://jsfiddle.net/uG2EE/

它无论如何都不完美，但它可以满足您的需求（使用jQuery UI，在上下文菜单事件被触发时显示在光标附近 - 或者右键单击）

不幸的是，我不得不将jQuery UI脚本粘贴到脚本窗格中，因此您需要滚动到最底层。这是我为了实现这个目的而添加的JS：

$(function() {
    // Set initial state (isVisible) then initialize menu
    $("#menu").data('isVisible', false).menu();

    // Initialize event handlers
    $(document).on({
        // Click is responsible for closing the menu, when it is visible
        'click': function(e){
            if(e.which === 1 && $('#menu').data('isVisible')){
                $("#menu").css({
                'display' : 'none'
                }).data('isVisible', false);
            }
        },
        // "onContextMenu" event is fired when user right clicks. We prevent the
        // default by calling e.preventDefault(), and then display our jQuery-UI menu
        'contextmenu': function(e){
            var x = e.clientX,
                y = e.clientY;

            e.preventDefault();

            // Check state (isVisible) to see if menu needs to be displayed
            if($('#menu').data('isVisible') === false) {
                $("#menu").css({
                'display' : 'block',
                'left' : x + 10,
                'top' : y + 10
                }).data('isVisible', true);
            }
        }
    });
});

CSS很直接：display:none，position:absolute和宽度。

祝你好运！

jQuery UI - 单击创建菜单

1 个答案: