js画图开发库-mxgraph-[events-事件.html] _HTML/CSS

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>