YUI TreeView 右键显示 ContextMenu

最新推荐文章于 2020-10-27 09:34:01 发布

TIYILON

最新推荐文章于 2020-10-27 09:34:01 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

文章标签： yui function object tree div json

本文链接：https://blog.youkuaiyun.com/TIYILON/article/details/1510783

本文介绍如何在YUI的TreeView中集成ContextMenu，并详细解释了如何正确设置触发元素以确保菜单仅在节点文本区域显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

YUI的example没有带这个方面的例子。
我首先是自己摸索了一下。失败。
所以还是上了group去看看前人的总结。
有一个例子如下：

Re: [ydn-javascript] Re: Adding Context menu to Tree

chandhrudu,

I'm sorry -- I may be misunderstanding your question.?I posted to this thread a response to zmische about the Implementation Gallery...I did not post about a code sample for integrating ContextMenu with TreeView.牋

However, to answer the latter question...

(function(){

var init = function() {

//build a TreeView instance with one node:

var tree = new YAHOO.widget.TreeView("treediv");

var root = tree.getRoot();

var node1 = new YAHOO.widget.TextNode("Label for first node.", root);

tree.draw();

//get the element that we want to attach

//a context menu to; in this case, we'll

//attach it to the element encompassing

//the first (only) node in the tree:

var myContextEl = node1.getEl();

//create a ContextMenu with the TreeView's

//node as its trigger:

var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", { trigger: myContextEl } );

oContextMenu.addItem("cut");

oContextMenu.addItem("copy");

oContextMenu.addItem("paste");

oContextMenu.render(document.body);

}

YAHOO.util.Event.on(window, 'load', init);

})();

</script>

<body>

</body>

</html>

This will create a one-node TreeView instance which, when you right-click on the node, pops up a context menu.

Regards,

Eric

但这意味着，一个树有多少个节点，就需要构建多少个ContextMenu。

后来才发现ContextMenu构造时，trigger是允许传入数组的。所以问题的焦点在于传入什么样类型的数组。

首先按照上文，没注意看，直接拿Node来塞。失败。
然后接着试着用Node.getEl()来塞。还是失败。其实失败的原因是因为Tree还没有draw，就调用node.getEl。这个时候是拿不到想要的东西的。所以先tree.draw。然后再node.getEl()。

问题开始简单化
声明一个数组，把node.getEl()都丢(push)进去，然后再构造一个ContextMenu，把数组当作trigger属性传入。
表面上，一切问题都解决了……

但是……事情再次发生变化，点击非节点的旁边区域（比如节点文字右侧），照样还是弹出了ContextMenu。这显然不是俺们想要的。所以继续研究一下……
我们需要的是右键菜单弹在节点文本区域，所以应该要获得那个<a/>。
这个时候api文档又发挥作用了：
TextNode有个方法