zoukankan      html  css  js  c++  java

  • 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;321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">  
    134.     </div>  
    135. </body>  
    136. </html>  
  • 相关阅读:
    Java基础学习篇---------static
    Java基础学习篇---------this、object的学习
    Java基础学习篇---------String、集合的学习
    Java基础学习篇---------多态
    Java基础学习篇---------继承
    Java基础学习篇---------封装
    Java基础学习篇---------多线程
    Handler主线程和子线程相通信
    Handler的使用
    c# DataGridView操作
  • 原文地址：https://www.cnblogs.com/CoffeeHome/p/3546183.html
Copyright © 2011-2022 走看看