html - 合金树视图右键单击选项

Question

我正在使用 jQuery Fancytree 为网页导航创建树视图。我真的很喜欢 AlloyUI 的树形视图，但似乎没有任何右键单击选项。有谁知道具有右键单击下拉菜单选项的基于 JavaScript/HTML 的树视图库？

Answer 1

如果你想在 AlloyUI 中使用自定义右键上下文菜单TreeView，你应该使用 YUI 的event-contextmenu模块。

通过对"The contextmenu Event Fix"的示例进行一些小的更改，我们可以使其适用于 AlloyUI TreeView：

<div id="treeView" />
<div id="contextMenu" />
<script>
     YUI().use('aui-tree-view', 'event-contextmenu', 'overlay', function (Y) {

        var treeView = new Y.TreeView({
            // ... your TreeView code here
        }).render();

        var contextMenu = new Y.Overlay({
            boundingBox: '#contextMenu',
            bodyContent: "<span class=\"context-menu\">Context Menu</span>",
            visible: false,
            constrain: true
        }).render();

        contextMenu.on('click', function (event) {
            contextMenu.hide();
        });

        treeView.get('boundingBox').on('contextmenu', function (event) {    
            contextMenu.set("xy", [event.pageX, event.pageY]);
            contextMenu.show();
        });
    });
</script>

这是使用此代码和 AlloyUI示例TreeView代码的 JSFiddle 。