Question

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

Answer 1

如果您想使用AlloyUI＆＃39; 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>

以下是JSFiddle使用此代码和AlloyUI TreeView example code。

alloyui树视图右键单击选项

1 个答案: