Skip to content

J
jQuery_R2_Res
切换分支/标签
查找文件
Normal viewHistoryPermalink
index5.html 2.8 KB
编辑Web IDE
Newer Older
yanshaowei's avatar
init
575d9abf
 
yanshaowei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 
<!doctype html>
<html>
	<head>
		<title>jsPlumb 1.5.3 - flowchart connectors demonstration - jQuery</title>
		<link rel="stylesheet" href="topo-all.css">
		<link rel="stylesheet" href="topo.css">
		
		<script src="./lib/jsBezier-0.6.js"></script>
		<script src="./lib/mottle-0.4.js"></script>
        <script src="./lib/biltong-0.2.js"></script>
        <script src="./lib/katavorio-0.4.js"></script>
        <script src="./lib/jquery-1.11.2.min.js"></script>
        <script src="./src/util.js"></script>
        <script src="./src/browser-util.js"></script>
        <script src="./src/dom-adapter.js"></script>
        <script src="./src/jsPlumb.js"></script>
        <script src="./src/endpoint.js"></script>
        <script src="./src/connection.js"></script>
        <script src="./src/anchors.js"></script>
        <script src="./src/defaults.js"></script>
        <script src="./src/connectors-bezier.js"></script>
        <script src="./src/connectors-statemachine.js"></script>
        <script src="./src/connectors-flowchart.js"></script>
        <script src="./src/connector-editors.js"></script>
        <script src="./src/renderers-svg.js"></script>
        <script src="./src/renderers-vml.js"></script>

        <script src="./src/base-library-adapter.js"></script>
        <script src="./src/dom.jsPlumb.js"></script>
		<!-- /JS -->
		
		<!--  demo code -->
		<script src="drawtopo2.js"></script>
		
		<script type="text/javascript">
			jsPlumb.bind("ready", function() {
				
				// 拓扑数据结构根节点位置设置
				var rootPosition = [270, 300];
				var nodeTypeArray = ['VM', 'DEVICE', 'NC', 'VIP'];
				var topoData = {
					type: 'VM', key: '110.75.188.35', 
					rel: [
					     {
					    	 type: 'DEVICE',
					    	 key: '3-120343'
					     },
					    
					     {
					    	 type: 'DEVICE',
					    	 key: '3-120344'
					     },
					    
					     {
					    	 type: 'VIP',
					    	 key: '223.6.250.2',
					    	 rel: [
					    	     { type: 'VM', key: '110.75.189.12' },
					    	     { type: 'VM', key: '110.75.189.13' }
					    	 ]
					     },
					    
					     {
					    	 type: 'NC',
					    	 key: '10.242.192.2',
					    	 rel: [
                                 { type: 'VM', key: '110.75.188.132' },
                                 { type: 'VM', key: '110.75.188.135' }
					    	 ]
					     
					     }
					]
				};
				
				drawTopo(topoData, rootPosition, nodeTypeArray);
				
				var newTopoData = {
					type: 'NC',
			    	key: '10.242.192.2',
			    	rel: [
                           { type: 'VM', key: '110.75.188.140' }
			    	]	
				};
				
                var mergedTopoData = mergeNewTopo(topoData, newTopoData);
				$('#topoRegion').empty();
				drawTopo(mergedTopoData, rootPosition, nodeTypeArray);
			
				
			});
		
		
		</script>
		
	</head>
	<body>		
		
        <div id="topoRegion">
	    </div>
			
	</body>
</html>