setup
如果不使用jQuery或者類jQuery庫，則傳入的節點得用id的形式,否則jsPlumb會為元素設置一個id。
jsPlumb.ready(function(){ ··· }); //or jsPlumb.bind("ready",function(){ ··· });最好確認jsPlumb加載完畢之后，再開始使用相關功能。
默認情況下，jsPlumb在瀏覽器的窗口中注冊，為整個頁面提供一個靜態實例，所以也可以把它看成一個類，來實例化jsPlumb：
var firstInstance = jsPlumb.getInstance();如果在使用過程中，元素的id產生了新的變化（多是生成了新的節點，舊的節點被刪除了）。則可以：
jsPlumb.setId(el,newId)-
jsPlumb.setIdChanged(oldId,newId)
在使用過程中，每個部分的z-index需要注意，否則連線可能會被覆蓋，jsPlumb會為每個節點設置端點，用於定位端點。
jsPlumb也提供了拖動方法：
var secondInstance = jsPlumb.getInstance(); secondInstance.draggable("some element");重繪，每次使用連線時，都會導致相關聯的元素重繪，但當加載大量數據時，可以使用：
jsPlumb.setSuspendDrawing(true); jsPlumb.setSuspendDrawing(false,true);這里第二個參數的true，會使整個jsPlumb立即重繪。
也可以使用batch：
jsPlumb.batch(fn,[doNotRepaintAfterwards]);這個函數也是一樣，可以先將所有的連接全部注冊好，再一次重繪。
這個方法在1.7.3版本之前名稱為doWhileSuspended.
config defaults
當然，jsPlumb會有一些默認的參數：
分為全局默認參數和連線默認參數，
Anchor : "BottomCenter",//端點的定位點的位置聲明（錨點）：left，top，bottom等 Anchors : [ null, null ],//多個錨點的位置聲明 ConnectionsDetachable : true,//連接是否可以使用鼠標默認分離 ConnectionOverlays : [],//附加到每個連接的默認重疊 Connector : "Bezier",//要使用的默認連接器的類型：折線，流程等 Container : null,//設置父級的元素，一個容器 DoNotThrowErrors : false,//如果請求不存在的Anchor，Endpoint或Connector，是否會拋出 DragOptions : { },//用於配置拖拽元素的參數 DropOptions : { },//用於配置元素的drop行為的參數 Endpoint : "Dot",//端點（錨點）的樣式聲明（Dot） Endpoints : [ null, null ],//多個端點的樣式聲明（Dot） EndpointOverlays : [ ],//端點的重疊 EndpointStyle : { fill : "#456" },//端點的css樣式聲明 EndpointStyles : [ null, null ],//同上 EndpointHoverStyle : null,//鼠標經過樣式 EndpointHoverStyles : [ null, null ],//同上 HoverPaintStyle : null,//鼠標經過線的樣式 LabelStyle : { color : "black" },／／標簽的默認樣式。 LogEnabled : false,//是否打開jsPlumb的內部日志記錄 Overlays : [ ],//重疊 MaxConnections : 1,//最大連接數 PaintStyle : { lineWidth : 8, stroke : "#456" },//連線樣式 ReattachConnections : false,//是否重新連接使用鼠標分離的線 RenderMode : "svg",//默認渲染模式 Scope : "jsPlumb_DefaultScope"//范圍，標識如果是全局則可以使用jsPlumb.importDefaults({···})，
也可以在實例化時，重新定義jsPlumb.getInstance({···})，
Basic Concepts
jsPlumb關鍵點就是連接線，從上面也可以看出，大部分的配置項都是為了線而設。
其分為五個方面：
- Anchor：錨點位置
- Endpoint：端點，連接的起點或終點
- Connector：連線，連接兩個節點的直觀表現，有四種默認類型：Bezier（貝塞爾曲線），Straight（直線），Flowchart（流程圖），State machine（狀態機）
- Overlay：裝飾連接器的組件，類似箭頭之類
- Group：包含在某個其他元素中的一組元素，可以折疊，導致與所有組成員的連接被合並到折疊的組容器上。
Anchor
錨點位置有四種類型：
- Static：靜態，會固定到元素上的某個點，不會移動
- Dynamic：動態，是靜態錨的集合，就是jsPlumb每次連接時選擇最合適的錨
- Perimeter anchors：周邊錨，動態錨的應用。
-
Continuous anchors：連續錨
- Static
jsPlumb有九個默認位置，元素的四個角，元素的中心，元素的每個邊的中點。
- Top(TopCenter),TopRight,TopLeft
- Right(RightMiddle)
- Bottom(BottomCenter),BottomRight,BottomLeft
- Left(LeftMiddle)
- center
可以使用基於數組的形式來定義錨點位置：[x,y,dx,dy,offsetX,offsetY]。
[0,0]表示節點的左上角。
x表示錨點在橫軸上的距離，y表示錨點在縱軸上的距離，這兩個值可以從0到1來設置，0.5為center。
而dx表示錨點向橫軸射出線，dy表示錨點向縱軸射出線，有0，-1，1三個值來設置。0為不放射線。
offsetX表示錨點偏移量x（px），offsetY表示錨點偏移量y（px）。
-
Dynamic Anchors
選擇每當某物移動或在UI中繪制時最合適的位置。var dynamicAnchors = [ [0.2,0,0,0],"Top","Bottom" ]在使用過程中，發現其就是指定錨點應該出現在哪個地方。jsPlumb會選取最近的點，來當作錨點。可以設置多個點，來當作可能出現的錨點。
當然，jsPlumb自帶了默認的參數，AutoDefault。其實與["Top","Right","Bottom","Left"]相同。 - Perimeter Anchors
jsPlumb提供了六種形狀：
- Circle
- Ellipse
- Triangle
- Diamond
- Rectangle
- Square
-
Continuous Anchors
anchor:"Continuous" //or anchor:["Continuous",{faces:["top","left"]}]faces同樣有四個值：
top,left,right,bottom。
將CSS類與Anchors相關聯
var ep = jsPlumb.addEndpoint("ele1",{ anchor:[0,0,0,0,0,0,"test"] });也可以修改前綴：
jsPlumb.endpointAnchorClass="anchor_";Connectors
連接器是實際連接UI元素的線，默認連接器是貝塞爾曲線，也就是默認值是"Bezier";
這里才是畫線的地方，
- Bezier：它有一個配置項，curviness（彎曲度），默認為150.這定義了Bezier的控制點與錨點的距離
- Straight：在兩個端點之間繪制一條直線，支持兩個配置參數：stub，默認為0。gap，默認為0
- Flowchart：由一系列垂直或水平段組成的連接。支持四個參數，stub，默認為30；alwaysRespectStubs，默認為false；gap，默認為0；midpoint，默認為0.5；cornerRadius，默認為0；
- StateMachine：狀態器，支持在同一元素上開始和結束的連接，支持的參數有：margin，默認為5；curviness，默認為10；proximityLimit，默認為80；
Endpoints
端點的配置和外觀參數。
jsPlumb帶有四個端點實現-點，矩形，空白和圖像，可以在使用connect(),addEndpoint(),makeSource()或jsPlumb.makeTarget時使用endpoint參數指定Endpoint屬性。
給端點進行配置
- jsPlumb.connect(),創建連接的時候可以配置端點的屬性
- jsPlumb.addEndpoint(),創建一個新的端點時配置屬性
- jsPlumb.makeSource(),配置元素並隨后從該元素中拖動連接時，將創建並分配一個新的端點
端點的預設類型
-
Dot：支持三個參數：
radius，默認為10px，定義圓點的半徑
cssClass，附加到Endpoint創建的元素的CSS類
hoverClass，一個CSS類，當鼠標懸停在元素或連接的線上時附加到EndPoint創建的元素 -
Rectangle：支持的參數：
width，默認為20，定義矩形的寬度
height，默認為20，定義矩形的高度
cssClass，附加到Endpoint創建的元素的CSS類
hoverClass，當鼠標懸停在元素或連接的線上時附加到EndPoint創建的元素 - image：從給定的URL中繪制圖像，支持三個參數：
src，必選，指定要使用的圖像的URL，
cssClass，附加到Endpoint創建的元素的CSS類
hoverClass，當鼠標懸停在元素或連接的線上時附加到EndPoint創建的元素， -
Blank：空白
Overlays（疊加層）
jsPlumb有五種類型的疊加：
-
Arrow：箭頭，在連接器的某個點繪制的可配置箭頭，可以控制箭頭的長度和寬度,參數有：
width，箭頭尾部的寬度
length，從箭頭的尾部到頭部的距離
location，位置，建議使用0～1之間，當作百分比，便於理解
direction，方向，默認值為1（表示向前），可選-1（表示向后）
foldback，折回，也就是尾翼的角度，默認0.623，當為1時，為正三角
paintStyle，樣式對象 -
Label：在連接點的可配置標簽，參數有
label，要顯示的文本
cssClass，Label的可選css
labelStyle，標簽外觀的可選參數：font，適應canvas的字體大小參數；color，標簽文本的顏色；padding，標簽的可選填充，比例而不是px；borderWidth，標簽邊框的可選參數，默認為0；borderStyle，顏色等邊框參數
location，位置，默認0.5
也可以使用getLabel，和setLabel，來獲取和設置label的文本,可傳函數 -
PlainArrow：箭頭形狀為三角形
只是Arrow的foldback為1時的例子，參數與Arrow相同 -
Diamond：棱形
同樣是Arrow的foldback為2時的例子，參數與Arrow相同 -
Custom：自定義
允許創建自定義的疊加層，需要使用create(),來返回DOM元素或者有效的選擇器（ID）var conn = jsPlumb.connect({ source:"d1", target:"d2", paintStyle:{ stroke:"red", strokeWidth:3 }, overlays:[ ["Custom", { create:function(component) { return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>"); }, location:0.7, id:"customOverlay" }] ] });
作為[0,1]的小數，其表示沿着由連接器內接的路徑的一些成比例的行程，默認值為0.5。
作為大於1的整數，表示從起點沿連接器行進的某些絕對像素數。等於1時，在終點。
作為小於零的整數，其指示沿着連接器從端點向后行進的一些絕對值的像素。等於0時，在起點。
所有疊加層都支持：
getLocation-返回當前位置
setLocation-設置當前位置
添加疊加層
例子：
jsPlumb.connect({ overlays:[ "Arrow", [ "Label", { label:"foo", location:0.25, id:"myLabel" } ] ] });而在addEndpoint和makeSource方法中，則不能使用overlays,需要使用connectOverlays.
也可以使用addOverlay:
var e = jsPlumb.addEndpoint("someElement"); e.addOverlay([ "Arrow", { width:10, height:10, id:"arrow" }]);當然還有獲取疊加層的方法：getOverlay(id)這里的id與元素中的id不同，只是組件在jsPlumb中的唯一標識而已，在控制台打印之后，能看到內部提供了很多方法,另外注意原型鏈中的方法。
在官方的Hiding/Showing Overlays中，向我們展示了setVisible,showOverlay(id),hideOverlay(id)，removeOverlay(id)等方法，當然，因為對象中有DOM元素，我們也可以使用其他方法來控制DOM元素。
Groups
相當於給節點之間加入了分組的概念，一旦分組，那么就可以使用組來控制組下的所有元素。
但這里的分組仍然是在jsPlumb中建立索引，當有相關事例時，再進行介紹。
Drag
如果不使用jsPlumb提供的拖動，則需要使用repaint()來對拖動之后的連線進行重繪。
而當修改了節點的層級，或者偏移則需要使用revalidate(container)來刷新。
Establishing Connections
在上面的例子中，已經介紹了基本的連接方式jsPlumb.connect({source:"element1",target:"element2"})。
這種方式創建的連接線一旦移除，則創建的端點也會自動移除。如果不想端點被移除，則可以繼續加參數，將deleteEndpointsOnDetach設為false。如果不想鼠標能夠移除連接線，則可以在局部配置中將ConnectionsDetachable設為false，或者在connect時，加入detachable:false。
拖放連接
一開始就要創建一個端點來作為源點
var endpoint = jsPlumb.addEndpoint('elementId',{isSource:true})這樣就可以從該端點拉線出去。
如果給另一個創建的點加入isTarget:true，則就可以用上面的點連入這個點。
或者使用makeSource或者makeTarget：
jsPlumb.makeSource("ele1",{ anchor:"Continuous", maxConnections:1 ··· })上述例子中，如果配置了maxConnections，則最多只能出現這個參數的連線，一旦多於這個數目的連線，就可以用onMaxConnections(params,originalEvent)這個回調函數來做其他事.connect與makeSource，makeTarget，都可以配置第三個參數，相當於公共配置參數，與第二個參數類似。
-----------------------------------------------------------------------
在connect中如果使用newConnection：true參數，則會取消makeTarget，makeSoucr，addEndpoint中所添加的配置項,重繪連接線。
而makeTarget也有onMaxConnections方法。
因為makeTarget包括上面介紹的isTarget都可以指向源點元素，所以，如果不想造成回環（自己連自己），則可以在makeTarget中設置allowLoopback：false.如果只想產生一個端點，而不是多個端點，則需要使用uniqueEndpoint:true.
默認情況下，使用makeTarget創建的端點將deleteEndpointsOnDetach設置為true，即刪除連線，端點刪除；如果不要刪除，則需要手動改為false。
--------------------------------------------------------
如果既配置了元素可拖動，又設置了元素可拖放連接，那jsPlumb沒有辦法區分拖動元素和從元素中拖動連接，所以它提供了filter方法。
jsPlumb.makeSource("foo",{ filter:"span", filterExclude:true });則除span元素的其他元素都可以創建拖放連接，filter也接受函數。filter:function(event,element).
也可以使用isTarget("id"),isSource("id")來判斷節點是否成為了源點。
如果配置了source和target之后，想切換源的激活狀態，則可以使用setTargetEnabled(id),setSourceEnabled(id)。
如果想取消makeTarget和makeSource所創建的源點，可以使用：
- unmakeTarget("id")
- unmakeSource("id")
- unmakeEveryTarget
- unmakeEverySource
Drag and Drop scope
如果使用了jsPlumb自帶的drag或者drop，那么給端點配置scope是很有必要的，這意味着之后創建端點只能連接到對應scope的端點。如果不設置scope，其默認的scope是一樣的。
Removeing Nodes
移除節點沒什么好說的，關鍵還是要移除與之關聯的端點和連接線。
Removeing Connections／Endpoints
Connections
-
detach
var conn = jsPlumb.connect({...}); jsPlumb.detach(conn);
- 如果使用
jsPlumb.connect創建的線，而且沒有設置deleteEndpointsOnDetach:false,則使用detach時，端點也會一起被移除。 - 如果通過makeSource配置的元素創建了連接線，而且沒有設置
deleteEndpointsOnDetach:false,則使用detach時，端點也會一起被移除。 - 如果使用addEndpoint注冊的元素通過鼠標創建了連接線，則不會刪除端點。
-
detachAllConnections(el,[params])
用於刪除元素上的所有連接線。 -
detachEveryConnection()
刪除所有連接線。
Endpoints
- deleteEndpoint
刪除一個端點。 - deleteEveryEndpoint
刪除所有的端點
Connection and Endpoint Types
可以通過提供的方法來動態的修改連接線或端點的樣式。
Connection Type
jsPlumb.registerConnectionType("example",{ paintStyle:{stroke:"blue",strokeWidth:5}, }); var c = jsPlumb.connect({source:"someDiv",target:"someOtherDiv"}); c.bind("click",function(){ c.setType("example") });當點擊連接線時，會替換連接線的樣式
也可以使用：
jsPlumb.registerConnectionTypes({
"basic":{ paintStyle:{stroke:"blue",strokeWidth:7} }, "selected":{ paintStyle:{stroke:"red",strokeWidth:5} } }); c.bind("click",function(){ c.toggleType("selected"); });而type支持的屬性都和css相關：
- anchor
- anchors
- detachable
- paintStyle
- hoverPaintStyle
- scope
- cssClass
- parameters
- overlays
- endpoint
Endpoint type
jsPlumb.registerEndpointTypes({
"basic":{ paintStyle:{fill:"blue"} } });端點的type支持的參數：
- paintStyle
- endpointStyle
- hoverPaintStyle
- endpointHoverStyle
- maxConnections
- connectorStyle
- connectorHoverStyle
- connector
- connectionType
- scope
- cssClass
- parameters
- overlays
Events
首先看個小例子：
jsPlumb.bind("connection",function(info){ console.log(info); });connection(info,originalEvent)即監聽所有的連接事件。info包含的信息有：
- connection
- sourceId
- targetId
- source
- target
- sourceEndpoint
- targetEndpoint
connectionDetached(info,originalEvent)即監聽當連接斷掉時的事件。info類似connection.
右鍵點擊也有相應的contextmenu方法。
關於connection和endpoint的事件方法，請參考官網api。
記錄下overlay的事件。
jsPlumb.connect({ source:"el1", target:"el2", overlays:[ ["Label",{ events:{ click:function(labelOverlay,originalEvent){ console.log(labelOverlay); } } } }], ] })同樣，使用unbind方法，可以移除上面所添加的監聽。
篩選jsPlumb
使用jsPlumb.select()方法，用於在Connections列表上做篩選，打印一下值：
就可以使用這些方法對於連接線來進行獲取（get）和修改（set）。
還有getConnections,getAllConnections()等方法也可以獲取到連接線，只不過這兩個方法沒有上面slect的方法，相當於靜態屬性
使用jsPlumb.selectEndpoints()方法，用於在Endpoints上做篩選，同樣有相應的方法。
select()和selectEndpoints()都有一個each方法，用於對篩選出的方法進行操作。
Repainting an element or elements
當需要對修改過后的元素重新計算端點和連接線時，則可以使用
jsPlumb.repaint(el,[ui])或
jsPlumb.repaintEverything().Element Ids
當元素上的id也被改變時，可以使用
jsPlumb.setId(el,newId);
//or jsPlumb.setIdChanged(oldId,newId);來重新對之前注冊的節點進行修改。
小結
前期調研完成，接下來開始使用jsPlumb做幾個小例子。