mxGraph 学习笔记 --右键菜单

js画图开发库--mxgraph--[menustyle-右键菜单.html] 

 

 

 

Html代码  收藏代码
  1. <!Doctype html>  
  2. <html xmlns=http://www.w3.org/1999/xhtml>  
  3.     <head>  
  4.     <meta http-equiv=Content-Type content="text/html;charset=utf-8">  
  5.     <title>右键菜单</title>  
  6.   
  7.     <style type="text/css">  
  8.         body div.mxPopupMenu {  
  9.             -webkit-box-shadow: 3px 3px 6px #C0C0C0;  
  10.             -moz-box-shadow: 3px 3px 6px #C0C0C0;  
  11.             box-shadow: 3px 3px 6px #C0C0C0;  
  12.             background: white;  
  13.             position: absolute;  
  14.             border: 3px solid #e7e7e7;  
  15.             padding: 3px;  
  16.         }  
  17.         body table.mxPopupMenu {  
  18.             border-collapse: collapse;  
  19.             margin: 0px;  
  20.         }  
  21.         body tr.mxPopupMenuItem {  
  22.             color: black;  
  23.             cursor: default;  
  24.         }  
  25.         body td.mxPopupMenuItem {  
  26.             padding: 6px 60px 6px 30px;  
  27.             font-family: Arial;  
  28.             font-size: 10pt;  
  29.         }  
  30.         body td.mxPopupMenuIcon {  
  31.             background-color: white;  
  32.             padding: 0px;  
  33.         }  
  34.         body tr.mxPopupMenuItemHover {  
  35.             background-color: #eeeeee;  
  36.             color: black;  
  37.         }  
  38.         table.mxPopupMenu hr {  
  39.             border-top: solid 1px #cccccc;  
  40.         }  
  41.         table.mxPopupMenu tr {  
  42.             font-size: 4pt;  
  43.         }  
  44.     </style>  
  45.   
  46.     <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 ？？这个可以不用？？-->  
  47.     <script type="text/javascript">  
  48.         mxBasePath = '../src';  
  49.     </script>  
  50.   
  51.     <!-- 引入支持库文件 -->  
  52.     <script type="text/javascript" src="../src/js/mxClient.js"></script>  
  53.     <!-- 示例代码 -->  
  54.     <script type="text/javascript">  
  55.         // 程序在此方法中启动   
  56.         function main(container)  
  57.         {  
  58.             // 检查浏览器支持  
  59.             if (!mxClient.isBrowserSupported())  
  60.             {  
  61.                 mxUtils.error('Browser is not supported!', 200, false);  
  62.             }  
  63.             else  
  64.             {  
  65.                 // 禁用浏览器自带右键菜单  
  66.                 mxEvent.disableContextMenu(document.body);  
  67.                   
  68.                 // 去锯齿效果  
  69.                 mxRectangleShape.prototype.crisp = true;  
  70.                   
  71.                 // 在容器中创建图形  
  72.                 var graph = new mxGraph(container);  
  73.   
  74.                 // 创建下拉菜单  
  75.                 new mxRubberband(graph);  
  76.                   
  77.                 // 创建默认窗体  
  78.                 var parent = graph.getDefaultParent();  
  79.                                   
  80.                 // 启动更新事务  
  81.                 graph.getModel().beginUpdate();  
  82.                 try  
  83.                 {  
  84.                     var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);  
  85.                     var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);  
  86.                     var e1 = graph.insertEdge(parent, null, '', v1, v2);  
  87.                 }  
  88.                 finally  
  89.                 {  
  90.                     // 结束更新事务  
  91.                     graph.getModel().endUpdate();  
  92.                 }  
  93.                   
  94.                 // 设置自动扩大鼠标悬停  
  95.                 graph.panningHandler.autoExpand = true;  
  96.   
  97.                 // 覆写右键单击事件  
  98.                 graph.panningHandler.factoryMethod = function(menu, cell, evt)  
  99.                 {  
  100.                     menu.addItem('Item 1', null, function()  
  101.                     {  
  102.                         alert('Item 1');  
  103.                     });  
  104.                       
  105.                     menu.addItem('Item 2', null, function()  
  106.                     {  
  107.                         alert('Item 2');  
  108.                     });  
  109.   
  110.                     menu.addSeparator();  
  111.                       
  112.                     var submenu1 = menu.addItem('Submenu 1', null, null);  
  113.                       
  114.                     menu.addItem('Subitem 1', null, function()  
  115.                     {  
  116.                         alert('Subitem 1');  
  117.                     }, submenu1);  
  118.                     menu.addItem('Subitem 1', null, function()  
  119.                     {  
  120.                         alert('Subitem 2');  
  121.                     }, submenu1);  
  122.                 };  
  123.             }  
  124.         };  
  125.     </script>  
  126. </head>  
  127.   
  128. <!-- 页面载入时启动程序 -->  
  129. <body onload="main(document.getElementById('graphContainer'))">  
  130.   
  131.     <!-- 创建带网格壁纸和曲线的一个容器  -->  
  132.     <div id="graphContainer"  
  133.         style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">  
  134.     </div>  
  135. </body>  
  136. </html>  

 

posted on 2014-02-12 16:20  山庄听泉  阅读(2098)  评论(0)  编辑  收藏  举报

导航