js画图开发库--mxgraph--[events-事件.html]
?js画图开发库--mxgraph--[events-事件.html]?
?
演示鼠标悬停，双击，拖拽，右键点击等事件。
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><title>事件</title><!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 --><script type="text/javascript">mxBasePath = '../src';</script><!-- 引入支持库文件 --><script type="text/javascript" src="../src/js/mxClient.js"></script><!-- 示例代码 --><script type="text/javascript">// 程序在此方法中启动 function main(){// 设置一个创建新连接的图标mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);// 检查浏览器支持if (!mxClient.isBrowserSupported()){mxUtils.error('Browser is not supported!', 200, false);}else{var container = document.createElement('div');container.style.position = 'absolute';container.style.overflow = 'hidden';container.style.left = '0px';container.style.top = '0px';container.style.right = '0px';container.style.bottom = '0px';container.style.background = 'url("editors/images/grid.gif")';// 禁用内置右键下拉菜单 mxEvent.disableContextMenu(container);// 修复Internet Explorer忽略的样式 if (mxClient.IS_QUIRKS){document.body.style.overflow = 'hidden';new mxDivResizer(container);}document.body.appendChild(container);// 在容器中创建图形var graph = new mxGraph(container);// 启用工具提示，新连接平滑移动graph.setPanning(true);graph.setTooltips(true);graph.setConnectable(true);// 自动处理平行边 var layout = new mxParallelEdgeLayout(graph); var layoutMgr = new mxLayoutManager(graph); layoutMgr.getLayout = function(cell){if (cell.getChildCount() > 0){return layout;}};// 启动鼠标悬停提示var rubberband = new mxRubberband(graph);var keyHandler = new mxKeyHandler(graph);// 设置连接线选择的样式var style = graph.getStylesheet().getDefaultEdgeStyle();style[mxConstants.STYLE_ROUNDED] = true;style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;graph.alternateEdgeStyle = 'elbow=vertical';// 安装一个自定义的工具提示单元格graph.getTooltipForCell = function(cell){return 'Doubleclick and right- or shiftclick';}// 安装右键点击处理程序graph.panningHandler.factoryMethod = function(menu, cell, evt){return createPopupMenu(graph, menu, cell, evt);};//在图形中创建默认组件 var parent = graph.getDefaultParent();// 开启更新事务graph.getModel().beginUpdate();try{var v1 = graph.insertVertex(parent, null, 'Doubleclick', 20, 20, 80, 30);var v2 = graph.insertVertex(parent, null, 'Right-/Shiftclick', 200, 150, 120, 30);var v3 = graph.insertVertex(parent, null, 'Connect/Reconnect', 200, 20, 120, 30);var v4 = graph.insertVertex(parent, null, 'Control-Drag', 20, 150, 100, 30);var e1 = graph.insertEdge(parent, null, 'Tooltips', v1, v2);var e2 = graph.insertEdge(parent, null, '', v2, v3);}finally{// 结束更新事务graph.getModel().endUpdate();}}};// 创建下拉菜单function createPopupMenu(graph, menu, cell, evt){if (cell != null){menu.addItem('Cell Item', 'editors/images/image.gif', function(){mxUtils.alert('MenuItem1');});}else{menu.addItem('No-Cell Item', 'editors/images/image.gif', function(){mxUtils.alert('MenuItem2');});}menu.addSeparator();menu.addItem('MenuItem3', '../src/images/warning.gif', function(){mxUtils.alert('MenuItem3: '+graph.getSelectionCount()+' selected');});};</script></head><!-- 在页面加载后调用的方法。容器是动态创建的 --><body onload="main();"></body></html>?
?
?