网络拓扑图js插件——jTopo应用

最新推荐文章于 2024-05-13 13:43:35 发布

懒人笔记—001

最新推荐文章于 2024-05-13 13:43:35 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签： jTopo

原文链接：https://www.cnblogs.com/wuln/p/7156250.html

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jTopo官网：http://www.jtopo.com/

1、特点：

基于HTML5 Canvas，不依赖其他库

2、应用：

效果：

源码github地址

在HTML页面中引入jtopo.min.js文件，添加一个canvas：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>绘制拓扑图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/base.css">     
    <script type="text/javascript" src="js/jtopo-min.js"></script>
    <script type="text/javascript" src="js/toolbar.js"></script>      
    <link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <ul id="contextmenu" style="display: none;">  
      <li><a>顺时针旋转</a></li>
      <li><a>逆时针旋转</a></li> 
      <li><a>放大</a></li>
      <li><a>缩小</a></li>        
      <li><a>节点详情</a></li> 
      <li><a>编辑节点</a></li>       
      <li><a>删除该节点</a></li>
    </ul>
    <ul id="linemenu" style="display: none;">        
      <li><a>删除该连线</a></li>
    </ul>
    <ul id="detail" style="display:none;background-color :#d3d3d3;"></ul>
    <div class="container">
      <div id="content">
        <div class="row clearfix">
          <div class="span2">                                                 
            <div class="coms" id="components">                                                  
              <div class="component" title="exchanger" trigger="manual">                                       
                <a class=" icon exchanger"></a>      
              </div>
              <div class="component" title="server" trigger="manual">                                                       
                <a class=" icon server"></a>           
              </div>
              <div class="component" title="subnetwork" trigger="manual">                                       
                <a class=" icon subnetwork"></a>              
              </div>
              <div class="component" title="node" trigger="manual">                             
                <a class=" icon node"></a>                       
              </div>  
              <div class="linkline" title="greenline" trigger="manual">                                                       
                <span class=" line greenline" id='1'></span>           
              </div>
              <div class="linkline" title="orangeline" trigger="manual">                                       
                <span class=" line orangeline" id='2'></span>              
              </div>
              <div class="linkline" title="redline" trigger="manual">                             
                <span class=" line redline" id='3'></span>                       
              </div>                                       
            </div>
          </div>
          <div class="span10">  
            <canvas width="850" height="400" id="target"></canvas>  
                                 
          </div>
        </div> <!-- row -->               
      </div> <!-- /content -->              
    </div> <!-- /container -->
    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
    <script src="js/com.js"></script>
  </body>
</html>

根据自身需求，控制节点、连线等的样式；

给节点、连线添加右键菜单；

可以通过添加鼠标事件实现拖拽组件绘制拓扑图；

节点、连线、右键菜单、拓扑图的数据可用json格式在前后端传递。

懒人笔记—001

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
网络拓扑图js插件——jTopo应用

jTopo官网：http://www.jtopo.com/ 1、特点：基于HTML5 Canvas，不依赖其他库2、应用：效果：源码github地址在HTML页面中引入jtopo.min.js文件，添加一个canvas：<!DOCTYPE html><html> <head> <meta charset...
复制链接

扫一扫

专栏目录