Question

我正在使用的Web应用程序包含带有contextmenu插件的jsTree（v3.1.1）。这一切都正常，但是当我右键单击靠近页面底部的节点时，它会切断一些选项。见下图：

Contextmenu on jsTree getting cut off if too close to the bottom of the browser window

我查看了jsTree API Show at Node，但这只是指定上下文菜单是显示在所选节点下方还是显示在鼠标单击位置。

如果有人可以请我提供一些关于如何计算的指导，如果没有足够的空间让整个上下文菜单显示（所有选项都可见），以这样的方式显示它，使用户能够看到所有选项。如果选择了一个节点并且上下文菜单有足够的空间，则它应该像默认情况下当前一样工作。

所以我知道该怎么做，但这是怎样的＆amp;我不确定如何在我正在努力的jsTree上实现它：

获取所选节点的位置
确定上下文菜单的高度
确定从选择节点到浏览器窗口底部的可用空间
如果可用空间小于上下文菜单的空间，则将上下文菜单显示在节点顶部。如果没有空间问题，请按当前显示。

任何帮助将不胜感激。

Answer 1

当然有一个更优雅的解决方案，但你可能会等待很长时间。作为一个快速修复，我建议简单地将上下文菜单移动到显示后所需的位置。用户无论如何都不会注意到它。请参阅下文并查看小提琴 - Fiddle。可能你想在移动菜单之前检查节点是否在屏幕底部，我还没有完成。

$("#dutchData")
.on("show_contextmenu.jstree", function (e, data) {
        var $node = $('#'+data.node.id),
            $menu = $('.vakata-context').first(),
            nodeTop = $node.offset().top,
            menuTop = nodeTop + $node.height() - $menu.height(),
            menuLeft = 200,
            $subMenu = $menu.find('ul'),
            subMenuTop = $menu.height()-$subMenu.height();

    $menu.offset({left: menuLeft, top: menuTop });
    $subMenu.offset({top: subMenuTop });

})
.jstree({
    "core" : {
       "data" : data,
        "themes": {
            "url": true,
            "icons": true
        }
    },
    plugins: ['contextmenu']
});

由于浏览器窗口上的位置，jsTree Contextmenu不显示所有选项

1 个答案: