Skip to content

Make custom events

Define something that happens on click and on hover. XBlocks support jQuery, which can probably make this easier for you (check out $.hover() and $.click() or $.on()

Proposed data attributes

Any cell (node or edge) can be given the special data attributes onhover and/or onclick. (You can edit attributes in the grapheditor by right-clicking on a node and choosing "Edit Data..." in the context menu.) These special attributes are interpreted by our javascript code to set up the interaction.

The value of these attributes describes what action should happen for that event:

  • popup=3 will look up the cell with id 3, and (1) make it invisible on load; (2) make it visible again when the event happens (currently either hover or click); and (3) make it invisible again when the corresponding "closing event" happens (currently: mouseout for onhover, and another click for onclick).

The numerical id's of the nodes are not directly visible in the grapheditor (we should build an interface so you don't have to deal with id's manually, see #16 (closed) ). You can see them by inspecting the mxGraph xml representing your diagram (but we don't have an easy way to show that xml at the moment I'm afraid). The id's are taken from an integer counter though, so you can guess at them for the moment.

Edited by Arie Peterson