cytoscape.js - 将例如 jquery 菜单绑定到 cytoscape.js 节点的最佳方法是什么？

Question

在 cytoscapeweb 中，可以为例如节点（addContextMenuItem）配置上下文菜单。如何使用 cytoscape.js 实现相同的效果？我想为每个节点绑定一个菜单。似乎我在选择节点时遇到问题，然后将 jquery-menu 附加到它。我尝试使用 jqueryui 菜单小部件：

cy.on('cxttapstart ', 'node', function(e){
              var ci=e.cyTarget.data();
              cy.elements("node[id='"+ci.id+"']").menu({ position: { my: "right top", at: "left-5 top+5"} });
});

我得到一个TypeError: cy.elements(...).menu is not a function

有人可以指出我正确的方向吗？：-） 谢谢！

Answer 1

你不能使用这样的原生 jQuery 插件，因为 Cytoscape 元素没有 DOM 元素。您需要创建一个 div z-index: -1，然后在其上运行 jQuery 插件。为了可重用性，您真正应该做的是为 Cytoscape.js ( http://cytoscape.github.io/cytoscape.js/#extensions/functions ) 创建一个包装扩展，每次都会为您创建 div ，例如

 cytoscape('collection', 'menu', function(options){
   var node = this;
   var cy = this.cy();   
   var $container = $( cy.container() );
   var $div = $('<div style="z-index: -1;"></div>');

   $container.append( $div );
   $div.menu( options ); // or something similar

   return this; // chaining
 });