了解安装和相关配置后，开始连线。
注：以下代码全部使用jsPlumb调用api，开发过程中最好用上文提到的getInstance方法生成jsPlumb的独立实例调用api。
程序化连接
jsPlumb.connect({source:"element1", target:"element2"});
创建了一个从'element1'到'element2'的连接。jsPlumb.connect方法的参数可以设置源端点、目标端点、锚点、端点样式等，若没有设置会显示默认值：
- 端点(Endpoint)：默认是“Dot”，半径为10，填充颜色为“＃456”
- 锚点(Anchors)：默认是Bottom
- 连接器(Connector)：默认值为“Bezier”连接器，线宽8px，颜色为“＃456”
因此，这个调用的渲染效果为：
一个8px Bezier，颜色为“＃456”，从'element1'的底部中心到'element2'的底部中心的连线，每个Endpoint都是一个10px半径的Dot Endpoint，颜色为“＃456”。
增加一些配置：
jsPlumb.connect({
source:"element1",
target:"element2",
anchors:["Right", "Left" ],
endpoint:"Rectangle",
endpointStyle:{ fill: "yellow" }
});
连接类型
当鼠标放在连接上或者点击连接，希望连接改变样式时，可以通过设置连接类型实现。
端点或连接可以分配零个或多个类型，它们按照分配顺序尽可能精细地合并。支持的API：
hasTypeaddTyperemoveTypetoggleTypesetTypeclearTypes
(1) 点击连接时，设置连接example提供的样式:
jsPlumb.registerConnectionType("example", {
paintStyle:{ stroke:"blue", strokeWidth:5 },
hoverPaintStyle:{ stroke:"red", strokeWidth:7 }
});
var c = jsPlumb.connect({ source:"someDiv", target:"someOtherDiv" });
c.bind("click", function() {
c.setType("example");
});
(2) 点击连接时切换连接样式：
jsPlumb.registerConnectionTypes({
"basic": {
paintStyle:{ stroke:"blue", strokeWidth:5 },
hoverPaintStyle:{ stroke:"red", strokeWidth:7 },
cssClass:"connector-normal"
},
"selected":{
paintStyle:{ stroke:"red", strokeWidth:5 },
hoverPaintStyle:{ strokeWidth: 7 },
cssClass:"connector-selected"
}
});
var c = jsPlumb.connect({ source:"someDiv", target:"someOtherDiv", type:"basic" });
c.bind("click", function() {
c.toggleType("selected");
});
(3) 完整的API示例：
jsPlumb.registerConnectionTypes({
"foo":{ paintStyle:{ stroke:"yellow", strokeWidth:5, cssClass:"foo" } },
"bar":{ paintStyle:{ stroke:"blue", strokeWidth:10 } },
"baz":{ paintStyle:{ stroke:"green", strokeWidth:1, cssClass:"${clazz}" } },
"boz":{ paintStyle: { stroke:"${color}", strokeWidth:"${width}" } }
});
var c = jsPlumb.connect({
source:"someDiv",
target:"someOtherDiv",
type:"foo"
});
// see what types the connection has.
console.log(c.hasType("foo")); // -> true
console.log(c.hasType("bar")); // -> false
// add type 'bar'
c.addType("bar");
// toggle both types (they will be removed in this case)
c.toggleType("foo bar");
// toggle them back
c.toggleType("foo bar");
// getType returns a list of current types.
console.log(c.getType()); // -> [ "foo", "bar" ]
// set type to be 'baz' only
c.setType("baz");
// add foo and bar back in
c.addType("foo bar");
// remove baz and bar
c.removeType("baz bar");
// what are we left with? good old foo.
console.log(c.getType()); // -> [ "foo" ]
// now let's add 'boz', a parameterized type
c.addType("boz", {
color:"#456",
width:35
});
console.log(c.getType()); // -> [ "foo", "boz" ]
// now clear all types
c.clearTypes();
console.log(c.getType()); // -> [ ]
注：除了hasType之外的每个方法都可以使用以空格分隔的类型列表来处理
(4) 连接类型对象中支持的参数
连接类型并非支持Connection中的每个参数 ，以下是连接类型对象中支持的属性列表：
-
anchor: 用于连接的两端 -
anchors: 用于连接的每一端 -
detachable: 连接是否可以使用鼠标拆卸 -
paintStyle: -
hoverPaintStyle: -
scope: -
cssClass: 用于设置连接器元素的类 -
parameters: - 当添加/设置具有参数的Type时，将覆盖具有相同键的任何现有参数。删除具有参数的Type时，不会从连接器中删除其参数 -
overlays: - 将多个类型应用于连接器时，将获得跨各种类型定义的所有overlays的并集。注意当使用jsPlumb.connect创建连线并提供'type'时，相当于调用'addType'，将获得设置的Type和提供的任何其他类型定义的Overlays构造函数 endpoint
删除节点
-
jsPlumb.remove
从DOM中删除元素，与元素关联的Connections和Endpoints也会被删除。
var conn = jsPlumb.connect({source:"element1", target:"element2"});
jsPlumb.remove("element1");
*jsPlumb.empty
将删除某个元素下的所有子元素，以及与子元素关联的Connections和Endpoints
<ul id="list">
<li id="one">One</li>
</ul>
var conn = jsPlumb.connect({source:"one", target:"someOtherElement"});
...
jsPlumb.empty("list");
注：除了hasType之外的每个方法都可以使用以空格分隔的类型列表来处理
端点类型
可以在创建时以编程方式为端点分配一个或多个类型。
端点和连接类型之间唯一真正的区别是允许的参数。端点列表：
paintStyle-
endpointStyle: 如果paintStyle提供此选项，则优先 hoverPaintStyle-
endpointHoverStyle: 如果hoverPaintStyle提供此项，则优先 MaxConnections-
connectorStyle: 使用此端点的任何连接器的样式 -
connectorHoverStyle: 从此端点悬停连接的绘制样式 -
connector: 连接器定义，比如: StateMachine或[ "Flowchart", { stub:50 } ] -
connectionType: 这允许您指定从此端点进行的连接的连接类型。 -
scope: 端点只支持一个范围。因此，如果应用了多个类型，则将从定义一个类型的最后一个类型中获取范围 -
cssClass: 与连线的CSS类相同 -
parameters: 当添加/设置具有参数的Type时，将覆盖具有相同键的任何现有参数。删除具有参数的Type时，不会从连接器中删除其参数。 -
overlays: 将多个类型应用于端点时，将获得跨各种类型定义的所有overlays的并集。
注：传递给Connections的参数只对源端点生效，目标端点不生效
使用端点类型的示例：
jsPlumb.registerEndpointTypes({
"basic":{
paintStyle:{fill:"blue"}
},
"selected":{
paintStyle:{fill:"red"}
}
});
var e = jsPlumb.addEndpoint("someElement", {
anchor:"TopMiddle",
type:"basic"
});
e.bind("click", function() {
e.toggleType("selected");
});
注: 不会影响现有的Connections，仅影响在端点上设置新类型后创建的Connections。
删除连接
删除单个连接
var conn = jsPlumb.connect({source:"element1", target:"element2"});
jsPlumb.detach(conn);
调用jsPlumb.detach删除连接时，与该连接关联的端点会不会被删除，取决于建立连接的方式。
以下情况，端点被删除：
- 使用jsPlumb.connect创建连接，没有设置deleteEndpointsOnDetach: false
- 连接由用户在配置的元素上通过鼠标创建的，该元素makeSource没有设置deleteEndpointsOnDetach: false。
以下情况，端点不被删除：
- 使用jsPlumb.connect创建连接，设置deleteEndpointsOnDetach: false
- 端点由addEndpoint创建，连接由用户通过鼠标创建
- 连接由用户在配置的元素上通过鼠标创建的，该元素makeSource设置deleteEndpointsOnDetach: false
单个元素中删除所有连接
jsPlumb.deleteConnectionsForElement(el, [params])
el可以是：
- 表示元素id的String
- 一个DOM元素
- 表示单个元素的选择器
params是可选的，可能包含：
fireEvent - 是否触发断开连接事件。默认值为true。
注：端点被删除情况同上
连接所有连接
jsPlumb.detachEveryConnection();
注：端点被删除情况同上
删除端点
删除单个端点
var ep = jsPlumb.addEndpoint(someElement, { ... });
...
jsPlumb.deleteEndpoint(ep);
ep可以是：
- 一个String，表示端点的UUID（添加端点时，可以为该端点设置uuid）
- 一个实际的Endpoint对象（如上所示）
删除所有端点
jsPlumb.deleteEveryEndpoint();
注：该方法会删除所有端点和所有连接
参考：
http://jsplumb.github.io/jsplumb/overlays.html
下一篇：拓扑图编辑器-jsplum事件
