What is the best way to bind e.g. a jquery menu to a cytoscape.js node?

Question

In cytoscapeweb it was possible to configure a context-menu for e.g. nodes (addContextMenuItem). How can I achieve the same with cytoscape.js? I would like to bind a menu for each node. It seems that I have a problem to select the node and then consequently attach a jquery-menu to it. I tried to use the jqueryui menu-widget:

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"} });
});

I get a TypeError: cy.elements(...).menu is not a function

Can somebody point me in the right direction, please? :-) Thank you!

score 0 · Accepted Answer · answered Jun 07 '13 at 19:55

You can't use vanilla jQuery plugins like that, because there is no DOM element for the Cytoscape element. You'll need to create a div with z-index: -1, and then run the jQuery plugin on that. What you really should do, for the sake of reusability, is to create a wrapper extension for Cytoscape.js (http://cytoscape.github.io/cytoscape.js/#extensions/functions) that creates the div for you each time, e.g.

 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
 });

What is the best way to bind e.g. a jquery menu to a cytoscape.js node?

1 Answers1