<!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">
<!-- DEP -->
<script src="../jsPlumb/jquery-1.9.0-min.js"></script>
<script src="../jsPlumb/jquery-ui-1.9.2-min.js"></script>
<!-- /DEP -->
<!-- JS -->
<!-- support lib for bezier stuff -->
<script src="../jsPlumb/jsBezier-0.6-min.js"></script>
<!-- jsplumb geom functions -->
<script src="../jsPlumb/jsplumb-geom-0.1.js"></script>
<!-- jsplumb util -->
<script src="../jsPlumb/util.js"></script>
<!-- base DOM adapter -->
<script src="../jsPlumb/dom-adapter.js"></script>
<!-- main jsplumb engine -->
<script src="../jsPlumb/jsPlumb.js"></script>
<!-- endpoint -->
<script src="../jsPlumb/endpoint.js"></script>
<!-- connection -->
<script src="../jsPlumb/connection.js"></script>
<!-- anchors -->
<script src="../jsPlumb/anchors.js"></script>
<!-- connectors, endpoint and overlays -->
<script src="../jsPlumb/defaults.js"></script>
<!-- connector editors -->
<script src="../jsPlumb/connector-editors.js"></script>
<!-- bezier connectors -->
<script src="../jsPlumb/connectors-bezier.js"></script>
<!-- state machine connectors -->
<script src="../jsPlumb/connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="../jsPlumb/connectors-flowchart.js"></script>
<!-- SVG renderer -->
<script src="../jsPlumb/renderers-svg.js"></script>
<!-- canvas renderer -->
<script src="../jsPlumb/renderers-canvas.js"></script>
<!-- vml renderer -->
<script src="../jsPlumb/renderers-vml.js"></script>
<!-- jquery jsPlumb adapter -->
<script src="../jsPlumb/jquery.jsPlumb.js"></script>
<!-- /JS -->
<!-- demo code -->
<script src="drawtopo.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>
没有合适的资源?快使用搜索试试~ 我知道了~
jsPlumb 绘制拓扑图实例.rar
共25个文件
js:22个
css:2个
html:1个
需积分: 5 0 下载量 102 浏览量
2024-05-23
12:05:00
上传
评论
收藏 215KB RAR 举报
温馨提示
jsPlumb 绘制拓扑图实例
资源推荐
资源详情
资源评论
收起资源包目录
jsPlumb 绘制拓扑图实例.rar (25个子文件)
xtopodemo
jsPlumb
connectors-bezier.js 3KB
dom-adapter.js 10KB
jsBezier-0.6-min.js 4KB
dom.jsPlumb.js 14KB
connectors-flowchart.js 19KB
drag.js 2KB
jquery.jsPlumb.js 12KB
connection.js 27KB
util.js 18KB
renderers-canvas.js 19KB
endpoint.js 57KB
renderers-vml.js 19KB
jquery-ui-1.9.2-min.js 232KB
jquery-1.9.0-min.js 91KB
jsplumb-geom-0.1.js 8KB
connectors-statemachine.js 13KB
jsPlumb.js 112KB
anchors.js 53KB
renderers-svg.js 20KB
connector-editors.js 16KB
defaults.js 63KB
topodemo
drawtopo.js 14KB
topo.css 561B
topodemo.html 3KB
topo-all.css 2KB
共 25 条
- 1
资源评论
qq_40152977
- 粉丝: 0
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功