網絡拓撲圖js插件——jTopo應用

時間 2019-11-19

標籤網絡拓撲插件 jtopo 應用欄目系統網絡简体版

原文原文鏈接

jTopo官網：http://www.jtopo.com/ javascript

一、特色：css

基於HTML5 Canvas，不依賴其餘庫html

二、應用：html5

效果：java

源碼github地址node

在HTML頁面中引入jtopo.min.js文件，添加一個canvas：jquery

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>繪製拓撲圖</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta name="description" content="">
 8     <meta name="keywords" content="">
 9     <meta name="author" content="">
10     <link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
11     <link rel="stylesheet" type="text/css" href="css/base.css">     
12     <script type="text/javascript" src="js/jtopo-min.js"></script>
13     <script type="text/javascript" src="js/toolbar.js"></script>      
14     <link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet">
15     <!--[if lt IE 9]>
16     <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
17     <![endif]-->
18   </head>
19 
20   <body>
21     <ul id="contextmenu" style="display: none;">  
22       <li><a>順時針旋轉</a></li>
23       <li><a>逆時針旋轉</a></li> 
24       <li><a>放大</a></li>
25       <li><a>縮小</a></li>        
26       <li><a>節點詳情</a></li> 
27       <li><a>編輯節點</a></li>       
28       <li><a>刪除該節點</a></li>
29     </ul>
30     <ul id="linemenu" style="display: none;">        
31       <li><a>刪除該連線</a></li>
32     </ul>
33     <ul id="detail" style="display:none;background-color :#d3d3d3;"></ul>
34     <div class="container">
35       <div id="content">
36         <div class="row clearfix">
37           <div class="span2">                                                 
38             <div class="coms" id="components">                                                  
39               <div class="component" title="exchanger" trigger="manual">                                       
40                 <a class=" icon exchanger"></a>      
41               </div>
42               <div class="component" title="server" trigger="manual">                                                       
43                 <a class=" icon server"></a>           
44               </div>
45               <div class="component" title="subnetwork" trigger="manual">                                       
46                 <a class=" icon subnetwork"></a>              
47               </div>
48               <div class="component" title="node" trigger="manual">                             
49                 <a class=" icon node"></a>                       
50               </div>  
51               <div class="linkline" title="greenline" trigger="manual">                                                       
52                 <span class=" line greenline" id='1'></span>           
53               </div>
54               <div class="linkline" title="orangeline" trigger="manual">                                       
55                 <span class=" line orangeline" id='2'></span>              
56               </div>
57               <div class="linkline" title="redline" trigger="manual">                             
58                 <span class=" line redline" id='3'></span>                       
59               </div>                                       
60             </div>
61           </div>
62           <div class="span10">  
63             <canvas width="850" height="400" id="target"></canvas>  
64                                  
65           </div>
66         </div> <!-- row -->               
67       </div> <!-- /content -->              
68     </div> <!-- /container -->
69     <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
70     <script src="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
71     <script src="js/com.js"></script>
72   </body>
73 </html>