加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

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

(2014-03-21 10:37:52)
分类： mxGraph

演示鼠标悬停，双击，拖拽，右键点击等事件。

  1. <</span>html xmlns=http://www.w3.org/1999/xhtml>  
  2.     <</span>head>  
  3.     <</span>meta http-equiv=Content-Type content="text/html;charset=utf-8">  
  4.     <</span>title>事件</</span>title>  
  5.   
  6.       
  7.     <</span>script type="text/javascript">  
  8.         mxBasePath = '../src';  
  9.     </</span>script>  
  10.   
  11.       
  12.     <</span>script type="text/javascript" src="../src/js/mxClient.js"></</span>script>  
  13.       
  14.     <</span>script type="text/javascript">  
  15.         // 程序在此方法中启动   
  16.         function main()  
  17.         {  
  18.             // 设置一个创建新连接的图标  
  19.             mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);  
  20.               
  21.             // 检查浏览器支持  
  22.             if (!mxClient.isBrowserSupported())  
  23.             {  
  24.                 mxUtils.error('Browser is not supported!', 200, false);  
  25.             }  
  26.             else  
  27.             {  
  28.                 var container = document.createElement_x('div');  
  29.                 container.style.position = 'absolute';  
  30.                 container.style.overflow = 'hidden';  
  31.                 container.style.left = '0px';  
  32.                 container.style.top = '0px';  
  33.                 container.style.right = '0px';  
  34.                 container.style.bottom = '0px';  
  35.                 container.style.background = 'url("editors/images/grid.gif")';  
  36.   
  37.                 // 禁用内置右键下拉菜单   
  38.                 mxEvent.disableContextMenu(container);  
  39.   
  40.                 // 修复Internet Explorer忽略的样式   
  41.                 if (mxClient.IS_QUIRKS)  
  42.                 {  
  43.                     document.body.style.overflow = 'hidden';  
  44.                     new mxDivResizer(container);  
  45.                 }  
  46.   
  47.                 document.body.appendChild(container);  
  48.               
  49.                 // 在容器中创建图形  
  50.                 var graph = new mxGraph(container);  
  51.   
  52.                 // 启用工具提示，新连接平滑移动  
  53.                 graph.setPanning(true);  
  54.                 graph.setTooltips(true);  
  55.                 graph.setConnectable(true);  
  56.                   
  57.                 // 自动处理平行边  
  58.                 var layout = new mxParallelEdgeLayout(graph);  
  59.                 var layoutMgr = new mxLayoutManager(graph);  
  60.                   
  61.                 layoutMgr.getLayout = function(cell)  
  62.                 {  
  63.                     if (cell.getChildCount() > 0)  
  64.                     {  
  65.                         return layout;  
  66.                     }  
  67.                 };  
  68.                   
  69.                 // 启动鼠标悬停提示  
  70.                 var rubberband = new mxRubberband(graph);  
  71.                 var keyHandler = new mxKeyHandler(graph);  
  72.   
  73.                 // 设置连接线选择的样式  
  74.                 var style = graph.getStylesheet().getDefaultEdgeStyle();  
  75.                 style[mxConstants.STYLE_ROUNDED] = true;  
  76.                 style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;  
  77.           
  78.                 graph.alternateEdgeStyle = 'elbow=vertical';  
  79.   
  80.                 // 安装一个自定义的工具提示单元格  
  81.                 graph.getTooltipForCell = function(cell)  
  82.                 {  
  83.                     return 'Doubleclick and right- or shiftclick';  
  84.                 }  
  85.                   
  86.                 // 安装右键点击处理程序  
  87.                 graph.panningHandler.factoryMethod = function(menu, cell, evt)  
  88.                 {  
  89.                     return createPopupMenu(graph, menu, cell, evt);  
  90.                 };  
  91.                   
  92.                 //在图形中创建默认组件   
  93.                 var parent = graph.getDefaultParent();  
  94.                                   
  95.                 // 开启更新事务  
  96.                 graph.getModel().beginUpdate();  
  97.                 try  
  98.                 {  
  99.                     var v1 = graph.insertVertex(parent, null, 'Doubleclick', 20, 20, 80, 30);  
  100.                     var v2 = graph.insertVertex(parent, null, 'Right-/Shiftclick', 200, 150, 120, 30);  
  101.                     var v3 = graph.insertVertex(parent, null, 'Connect/Reconnect', 200, 20, 120, 30);  
  102.                     var v4 = graph.insertVertex(parent, null, 'Control-Drag', 20, 150, 100, 30);  
  103.                     var e1 = graph.insertEdge(parent, null, 'Tooltips', v1, v2);  
  104.                     var e2 = graph.insertEdge(parent, null, '', v2, v3);  
  105.                 }  
  106.                 finally  
  107.                 {  
  108.                     // 结束更新事务  
  109.                     graph.getModel().endUpdate();  
  110.                 }  
  111.             }  
  112.         };  
  113.           
  114.         // 创建下拉菜单  
  115.         function createPopupMenu(graph, menu, cell, evt)  
  116.         {  
  117.             if (cell != null)  
  118.             {  
  119.                 menu.addItem('Cell Item', 'editors/images/image.gif', function()  
  120.                 {  
  121.                     mxUtils.alert('MenuItem1');  
  122.                 });  
  123.             }  
  124.             else  
  125.             {  
  126.                 menu.addItem('No-Cell Item', 'editors/images/image.gif', function()  
  127.                 {  
  128.                     mxUtils.alert('MenuItem2');  
  129.                 });  
  130.             }  
  131.             menu.addSeparator();  
  132.             menu.addItem('MenuItem3', '../src/images/warning.gif', function()  
  133.             {  
  134.                 mxUtils.alert('MenuItem3: '+graph.getSelectionCount()+' selected');  
  135.             });  
  136.         };  
  137.     </</span>script>  
  138. </</span>head>  
  139.   
  140.   
  141. <</span>body onload="main();">  
  142. </</span>body>  
  143. </</span>html>  

 

 

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有