JsPlumb简单样例
JsPlumb简单样例：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.0.js"></script>
<script src="jquery-ui-1.9.2-min.js"></script>
<script src="jquery.jsPlumb-1.4.0-all.js"></script>
<style type="text/css">
.dragActive { border:2px dotted orange; }
.dropHover { border:1px dotted red; }
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
position: absolute;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 250px;
top: 250px;
}
#state3 {
left: 100px;
top: 250px;
}
</style>
<script>
jsPlumb.ready(function() {
jsPlumb.importDefaults({
DragOptions : { cursor: 'pointer', zIndex:2000 },
PaintStyle : { strokeStyle:'#666' },
EndpointStyle : { width:20, height:16, strokeStyle:'#666' },
Endpoint : "Rectangle",
Anchors : ["TopCenter"],
//控制是否有箭头
ConnectionOverlays: [
[ "Arrow", { location: 1 } ],
[ "Label", {
location: 0.1,
id: "label",
cssClass: "aLabel"
}]
]
});
var exampleDropOptions = {
hoverClass:"dropHover",
activeClass:"dragActive"
};
var basicType = {
connector: "StateMachine",
paintStyle: { strokeStyle: "red", lineWidth: 4 },
hoverPaintStyle: { strokeStyle: "blue" },
overlays: [
"Arrow"
]
};
jsPlumb.registerConnectionType("basic", basicType);
var color1 = "#316b31";
var exampleEndpoint1 = {
uuid:101,
endpoint:["Dot", { radius:11 }],//连接点的形状、大小
paintStyle:{ fillStyle:color1 },//连接点的颜色
isSource:true,
scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
connectorStyle:{ strokeStyle:color1, lineWidth:6 },//点与点之间连线颜色
connector: ["Bezier", { curviness:63 } ],//线条形状，可弯曲
maxConnections:1,
isTarget:true,
dropOptions : exampleDropOptions
};
var exampleEndpoint11 = {
uuid:1011,
endpoint:["Dot", { radius:11 }],//连接点的形状、大小
paintStyle:{ fillStyle:color1 },//连接点的颜色
isSource:true,
scope:"green dot",//点击该颜色的时候，其余该颜色的点都会显示虚线框
connectorStyle:{ strokeStyle:color1, lineWidth:6 },//点与点之间连线颜色
connector: ["Bezier", { curviness:63 } ],//线条形状，可弯曲
maxConnections:1,
isTarget:true,
dropOptions : exampleDropOptions,
overlays: [
"Arrow"
]
};
var color2 = "rgba(229,219,61,0.5)";
var exampleEndpoint2 = {
uuid:102,
endpoint:"Rectangle",
anchor:"BottomLeft",//连接点的位置，可以被覆盖
paintStyle:{ fillStyle:color2, opacity:0.5 },
isSource:true,
scope:'yellow dot',
connectorStyle:{ strokeStyle:color2, lineWidth:4 },
connector : "Straight",//线条形状，直线
isTarget:true,
dropOptions : exampleDropOptions,
beforeDetach:function(conn) {
return confirm("Detach connection?");
},
onMaxConnections:function(info) {
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
var exampleEndpoint21 = {
uuid:1021,
endpoint:"Rectangle",
anchor:"BottomLeft",//连接点的位置，可以被覆盖
paintStyle:{ fillStyle:color2, opacity:0.5 },
isSource:true,
scope:'yellow dot',
connectorStyle:{ strokeStyle:color2, lineWidth:4 },
connector : "Straight",//线条形状，直线
isTarget:true,
dropOptions : exampleDropOptions,
beforeDetach:function(conn) {
return confirm("Detach connection?");
},
onMaxConnections:function(info) {
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
//左上角为起点，0.2表示相对x的偏移量，0.5表示相对y的偏移量
var anchors = [[0.2, 0.5, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0], [0.2, 0, 0, -1] ],
maxConnectionsCallback = function(info) {
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
};
var e1 = jsPlumb.addEndpoint("state2", { anchor:"LeftMiddle" }, exampleEndpoint11);
e1.bind("maxConnections", maxConnectionsCallback);
jsPlumb.addEndpoint("state1", exampleEndpoint1);
jsPlumb.addEndpoint("state3", exampleEndpoint2);
jsPlumb.addEndpoint("state1", {anchor:anchors}, exampleEndpoint21);
//固定连线
jsPlumb.connect({uuids:[101, 1011]});
jsPlumb.connect({uuids:[102, 1021]});
//可拖动
jsPlumb.draggable($('._jsPlumb_endpoint_anchor_'));
});
</script>
</head>
<body>
<div id="state1" class="item">state1</div>
<div id="state2" class="item">state2</div>
<div id="state3" class="item">state3</div>
</body>
</html>