了解安裝和相關配置后，開始連線。
注：以下代碼全部使用jsPlumb調用api，開發(fā)過程中最好用上文提到的getInstance方法生成jsPlumb的獨立實例調用api。
程序化連接
jsPlumb.connect({source:"element1", target:"element2"});
創(chuàng)建了一個從'element1'到'element2'的連接。jsPlumb.connect方法的參數(shù)可以設置源端點、目標端點、錨點、端點樣式等，若沒有設置會顯示默認值：
- 端點(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" }
});
連接類型
當鼠標放在連接上或者點擊連接，希望連接改變樣式時，可以通過設置連接類型實現(xiàn)。
端點或連接可以分配零個或多個類型，它們按照分配順序盡可能精細地合并。支持的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) 連接類型對象中支持的參數(shù)
連接類型并非支持Connection中的每個參數(shù) ，以下是連接類型對象中支持的屬性列表：
-
anchor: 用于連接的兩端 -
anchors: 用于連接的每一端 -
detachable: 連接是否可以使用鼠標拆卸 -
paintStyle: -
hoverPaintStyle: -
scope: -
cssClass: 用于設置連接器元素的類 -
parameters: - 當添加/設置具有參數(shù)的Type時，將覆蓋具有相同鍵的任何現(xiàn)有參數(shù)。刪除具有參數(shù)的Type時，不會從連接器中刪除其參數(shù) -
overlays: - 將多個類型應用于連接器時，將獲得跨各種類型定義的所有overlays的并集。注意當使用jsPlumb.connect創(chuàng)建連線并提供'type'時，相當于調用'addType'，將獲得設置的Type和提供的任何其他類型定義的Overlays構造函數(shù) endpoint
刪除節(jié)點
-
jsPlumb.remove
從DOM中刪除元素，與元素關聯(lián)的Connections和Endpoints也會被刪除。
var conn = jsPlumb.connect({source:"element1", target:"element2"});
jsPlumb.remove("element1");
*jsPlumb.empty
將刪除某個元素下的所有子元素，以及與子元素關聯(lián)的Connections和Endpoints
<ul id="list">
<li id="one">One</li>
</ul>
var conn = jsPlumb.connect({source:"one", target:"someOtherElement"});
...
jsPlumb.empty("list");
注：除了hasType之外的每個方法都可以使用以空格分隔的類型列表來處理
端點類型
可以在創(chuàng)建時以編程方式為端點分配一個或多個類型。
端點和連接類型之間唯一真正的區(qū)別是允許的參數(shù)。端點列表：
paintStyle-
endpointStyle: 如果paintStyle提供此選項，則優(yōu)先 hoverPaintStyle-
endpointHoverStyle: 如果hoverPaintStyle提供此項，則優(yōu)先 MaxConnections-
connectorStyle: 使用此端點的任何連接器的樣式 -
connectorHoverStyle: 從此端點懸停連接的繪制樣式 -
connector: 連接器定義，比如: StateMachine或[ "Flowchart", { stub:50 } ] -
connectionType: 這允許您指定從此端點進行的連接的連接類型。 -
scope: 端點只支持一個范圍。因此，如果應用了多個類型，則將從定義一個類型的最后一個類型中獲取范圍 -
cssClass: 與連線的CSS類相同 -
parameters: 當添加/設置具有參數(shù)的Type時，將覆蓋具有相同鍵的任何現(xiàn)有參數(shù)。刪除具有參數(shù)的Type時，不會從連接器中刪除其參數(shù)。 -
overlays: 將多個類型應用于端點時，將獲得跨各種類型定義的所有overlays的并集。
注：傳遞給Connections的參數(shù)只對源端點生效，目標端點不生效
使用端點類型的示例：
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");
});
注: 不會影響現(xiàn)有的Connections，僅影響在端點上設置新類型后創(chuàng)建的Connections。
刪除連接
刪除單個連接
var conn = jsPlumb.connect({source:"element1", target:"element2"});
jsPlumb.detach(conn);
調用jsPlumb.detach刪除連接時，與該連接關聯(lián)的端點會不會被刪除，取決于建立連接的方式。
以下情況，端點被刪除：
- 使用jsPlumb.connect創(chuàng)建連接，沒有設置deleteEndpointsOnDetach: false
- 連接由用戶在配置的元素上通過鼠標創(chuàng)建的，該元素makeSource沒有設置deleteEndpointsOnDetach: false。
以下情況，端點不被刪除：
- 使用jsPlumb.connect創(chuàng)建連接，設置deleteEndpointsOnDetach: false
- 端點由addEndpoint創(chuàng)建，連接由用戶通過鼠標創(chuàng)建
- 連接由用戶在配置的元素上通過鼠標創(chuàng)建的，該元素makeSource設置deleteEndpointsOnDetach: false
單個元素中刪除所有連接
jsPlumb.deleteConnectionsForElement(el, [params])
el可以是：
- 表示元素id的String
- 一個DOM元素
- 表示單個元素的選擇器
params是可選的，可能包含：
fireEvent - 是否觸發(fā)斷開連接事件。默認值為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事件
