setup
如果不使用jQuery或者類jQuery庫葬馋，則傳入的節(jié)點(diǎn)得用id的形式,否則jsPlumb會為元素設(shè)置一個id鹃答。
jsPlumb.ready(function(){
});
//or jsPlumb.bind("ready",function(){
});
最好確認(rèn)jsPlumb加載完畢之后让簿，再開始使用相關(guān)功能象缀。
? ? ? ? 默認(rèn)情況下，jsPlumb在瀏覽器的窗口中注冊危融，為整個頁面提供一個靜態(tài)實(shí)例鞋怀，所以也可以把它看成一個類双泪，來實(shí)例化jsPlumb：
? ? ????var firstInstance = jsPlumb.getInstance();
? ??如果在使用過程中，元素的id產(chǎn)生了新的變化（多是生成了新的節(jié)點(diǎn)密似，舊的節(jié)點(diǎn)被刪除了）焙矛。則可以：
????????jsPlumb.setId(el,newId)
????????jsPlumb.setIdChanged(oldId,newId)
? ?在使用過程中，每個部分的z-index需要注意残腌，否則連線可能會被覆蓋村斟，jsPlumb會為每個節(jié)點(diǎn)設(shè)置端點(diǎn)，用于定位端點(diǎn)抛猫。
jsPlumb也提供了拖動方法：
????????var secondInstance = jsPlumb.getInstance();
????????secondInstance.draggable("some element");
????重繪蟆盹，每次使用連線時，都會導(dǎo)致相關(guān)聯(lián)的元素重繪闺金，但當(dāng)加載大量數(shù)據(jù)時逾滥，可以使用：
????????jsPlumb.setSuspendDrawing(true);
????????jsPlumb.setSuspendDrawing(false,true);
????????這里第二個參數(shù)的true，會使整個jsPlumb立即重繪败匹。
????????也可以使用batch：
????????jsPlumb.batch(fn,[doNotRepaintAfterwards]);
????????這個函數(shù)也是一樣寨昙，可以先將所有的連接全部注冊好面哥，再一次重繪。
????????這個方法在1.7.3版本之前名稱為doWhileSuspended.
? ?config defaults
????????當(dāng)然毅待，jsPlumb會有一些默認(rèn)的參數(shù)：
????????分為全局默認(rèn)參數(shù)和連線默認(rèn)參數(shù)，
Anchor : "BottomCenter",//端點(diǎn)的定位點(diǎn)的位置聲明（錨點(diǎn)）：left归榕，top尸红，bottom等
Anchors : [ null, null ],//多個錨點(diǎn)的位置聲明
ConnectionsDetachable : true,//連接是否可以使用鼠標(biāo)默認(rèn)分離
ConnectionOverlays : [],//附加到每個連接的默認(rèn)重疊
Connector : "Bezier",//要使用的默認(rèn)連接器的類型：折線，流程等
Container : null,//設(shè)置父級的元素刹泄，一個容器
DoNotThrowErrors : false,//如果請求不存在的Anchor外里，Endpoint或Connector，是否會拋出
DragOptions : { },//用于配置拖拽元素的參數(shù)
DropOptions : { },//用于配置元素的drop行為的參數(shù)
Endpoint : "Dot",//端點(diǎn)（錨點(diǎn)）的樣式聲明（Dot）
Endpoints : [ null, null ],//多個端點(diǎn)的樣式聲明（Dot）
EndpointOverlays : [ ],//端點(diǎn)的重疊
EndpointStyle : { fill : "#456" },//端點(diǎn)的css樣式聲明
EndpointStyles : [ null, null ],//同上
EndpointHoverStyle : null,//鼠標(biāo)經(jīng)過樣式
EndpointHoverStyles : [ null, null ],//同上
HoverPaintStyle : null,//鼠標(biāo)經(jīng)過線的樣式
LabelStyle : { color : "black" },／／標(biāo)簽的默認(rèn)樣式特石。
LogEnabled : false,//是否打開jsPlumb的內(nèi)部日志記錄
Overlays : [ ],//重疊MaxConnections : 1,//最大連接數(shù)
PaintStyle : { lineWidth : 8, stroke : "#456" },//連線樣式
ReattachConnections : false,//是否重新連接使用鼠標(biāo)分離的線
RenderMode : "svg",//默認(rèn)渲染模式
Scope : "jsPlumb_DefaultScope"http://范圍盅蝗，標(biāo)識
如果是全局則可以使用jsPlumb.importDefaults({···})，
也可以在實(shí)例化時姆蘸，重新定義jsPlumb.getInstance({···})墩莫，
Basic Concepts
jsPlumb關(guān)鍵點(diǎn)就是連接線，從上面也可以看出逞敷，大部分的配置項都是為了線而設(shè)狂秦。
其分為五個方面：
Anchor：錨點(diǎn)位置
Endpoint：端點(diǎn)，連接的起點(diǎn)或終點(diǎn)
Connector：連線推捐，連接兩個節(jié)點(diǎn)的直觀表現(xiàn)裂问，有四種默認(rèn)類型：Bezier（貝塞爾曲線），Straight（直線）牛柒，F(xiàn)lowchart（流程圖）堪簿，State machine（狀態(tài)機(jī)）
Overlay：裝飾連接器的組件，類似箭頭之類
Group：包含在某個其他元素中的一組元素皮壁，可以折疊椭更，導(dǎo)致與所有組成員的連接被合并到折疊的組容器上。
Anchor
錨點(diǎn)位置有四種類型：
Static：靜態(tài)闪彼，會固定到元素上的某個點(diǎn)甜孤，不會移動
Dynamic：動態(tài)，是靜態(tài)錨的集合畏腕，就是jsPlumb每次連接時選擇最合適的錨
Perimeter anchors：周邊錨缴川，動態(tài)錨的應(yīng)用。
Continuous anchors：連續(xù)錨
Static
jsPlumb有九個默認(rèn)位置描馅，元素的四個角把夸，元素的中心，元素的每個邊的中點(diǎn)铭污。
Top(TopCenter),TopRight,TopLeft
Right(RightMiddle)
Bottom(BottomCenter),BottomRight,BottomLeft
Left(LeftMiddle)
center
可以使用基于數(shù)組的形式來定義錨點(diǎn)位置：[x,y,dx,dy,offsetX,offsetY]恋日。
[0,0]表示節(jié)點(diǎn)的左上角膀篮。
x表示錨點(diǎn)在橫軸上的距離，y表示錨點(diǎn)在縱軸上的距離岂膳，這兩個值可以從0到1來設(shè)置誓竿，0.5為center。
而dx表示錨點(diǎn)向橫軸射出線谈截，dy表示錨點(diǎn)向縱軸射出線筷屡，有0，-1簸喂，1三個值來設(shè)置毙死。0為不放射線。
offsetX表示錨點(diǎn)偏移量x（px）喻鳄，offsetY表示錨點(diǎn)偏移量y（px）扼倘。
Dynamic Anchors
選擇每當(dāng)某物移動或在UI中繪制時最合適的位置。
var dynamicAnchors = [ [0.2,0,0,0],"Top","Bottom"]
在使用過程中除呵，發(fā)現(xiàn)其就是指定錨點(diǎn)應(yīng)該出現(xiàn)在哪個地方再菊。jsPlumb會選取最近的點(diǎn)，來當(dāng)作錨點(diǎn)颜曾“兰颍可以設(shè)置多個點(diǎn)，來當(dāng)作可能出現(xiàn)的錨點(diǎn)泛啸。
當(dāng)然绿语，jsPlumb自帶了默認(rèn)的參數(shù)，AutoDefault候址。其實(shí)與["Top","Right","Bottom","Left"]相同吕粹。
Perimeter Anchors
jsPlumb提供了六種形狀：
Circle
Ellipse
Triangle
Diamond
Rectangle
Square
1.Continuous Anchors
? ? anchor:"Continuous"http://? ? ?or
????anchor:["Continuous",{faces:["top","left"]}]
? ? faces同樣有四個值：top,left,right,bottom。
將CSS類與Anchors相關(guān)聯(lián)
varep = jsPlumb.addEndpoint("ele1",{? anchor:[0,0,0,0,0,0,"test"]});
也可以修改前綴：
jsPlumb.endpointAnchorClass="anchor_";
Connectors
連接器是實(shí)際連接UI元素的線岗仑，默認(rèn)連接器是貝塞爾曲線匹耕，也就是默認(rèn)值是"Bezier";
這里才是畫線的地方，
Bezier：它有一個配置項荠雕，curviness（彎曲度）稳其，默認(rèn)為150.這定義了Bezier的控制點(diǎn)與錨點(diǎn)的距離
Straight：在兩個端點(diǎn)之間繪制一條直線，支持兩個配置參數(shù)：stub炸卑，默認(rèn)為0既鞠。gap，默認(rèn)為0
Flowchart：由一系列垂直或水平段組成的連接盖文。支持四個參數(shù)嘱蛋，stub，默認(rèn)為30；alwaysRespectStubs洒敏，默認(rèn)為false龄恋；gap，默認(rèn)為0凶伙；midpoint郭毕，默認(rèn)為0.5；cornerRadius函荣，默認(rèn)為0铣卡；
StateMachine：狀態(tài)器，支持在同一元素上開始和結(jié)束的連接偏竟，支持的參數(shù)有：margin，默認(rèn)為5敞峭；curviness踊谋，默認(rèn)為10；proximityLimit旋讹，默認(rèn)為80殖蚕；
Endpoints
端點(diǎn)的配置和外觀參數(shù)。
jsPlumb帶有四個端點(diǎn)實(shí)現(xiàn)-點(diǎn)沉迹，矩形睦疫，空白和圖像，可以在使用connect(),addEndpoint(),makeSource()或jsPlumb.makeTarget時使用endpoint參數(shù)指定Endpoint屬性鞭呕。
給端點(diǎn)進(jìn)行配置
jsPlumb.connect(),創(chuàng)建連接的時候可以配置端點(diǎn)的屬性
jsPlumb.addEndpoint(),創(chuàng)建一個新的端點(diǎn)時配置屬性
jsPlumb.makeSource(),配置元素并隨后從該元素中拖動連接時蛤育，將創(chuàng)建并分配一個新的端點(diǎn)
端點(diǎn)的預(yù)設(shè)類型
Dot：支持三個參數(shù)：
radius，默認(rèn)為10px葫松，定義圓點(diǎn)的半徑
cssClass瓦糕，附加到Endpoint創(chuàng)建的元素的CSS類
hoverClass，一個CSS類腋么，當(dāng)鼠標(biāo)懸停在元素或連接的線上時附加到EndPoint創(chuàng)建的元素
Rectangle：支持的參數(shù)：
width咕娄，默認(rèn)為20，定義矩形的寬度
height珊擂，默認(rèn)為20圣勒，定義矩形的高度
cssClass，附加到Endpoint創(chuàng)建的元素的CSS類
hoverClass摧扇，當(dāng)鼠標(biāo)懸停在元素或連接的線上時附加到EndPoint創(chuàng)建的元素
image：從給定的URL中繪制圖像圣贸，支持三個參數(shù)：
src，必選扛稽，指定要使用的圖像的URL旁趟，
cssClass，附加到Endpoint創(chuàng)建的元素的CSS類
hoverClass，當(dāng)鼠標(biāo)懸停在元素或連接的線上時附加到EndPoint創(chuàng)建的元素锡搜，
Blank：空白
Overlays（疊加層）
jsPlumb有五種類型的疊加：
Arrow：箭頭橙困，在連接器的某個點(diǎn)繪制的可配置箭頭，可以控制箭頭的長度和寬度,參數(shù)有：
width耕餐，箭頭尾部的寬度
length凡傅，從箭頭的尾部到頭部的距離
location，位置肠缔，建議使用0～1之間夏跷，當(dāng)作百分比，便于理解
direction明未，方向槽华，默認(rèn)值為1（表示向前），可選-1（表示向后）
foldback趟妥，折回猫态，也就是尾翼的角度，默認(rèn)0.623披摄，當(dāng)為1時亲雪，為正三角
paintStyle，樣式對象
Label：在連接點(diǎn)的可配置標(biāo)簽疚膊，參數(shù)有
label义辕，要顯示的文本
cssClass，Label的可選css
labelStyle寓盗，標(biāo)簽外觀的可選參數(shù)：font灌砖，適應(yīng)canvas的字體大小參數(shù)；color傀蚌，標(biāo)簽文本的顏色周崭；padding，標(biāo)簽的可選填充喳张，比例而不是px续镇；borderWidth，標(biāo)簽邊框的可選參數(shù)销部，默認(rèn)為0摸航；borderStyle，顏色等邊框參數(shù)
location舅桩，位置酱虎，默認(rèn)0.5
也可以使用getLabel，和setLabel擂涛，來獲取和設(shè)置label的文本,可傳函數(shù)
PlainArrow：箭頭形狀為三角形
只是Arrow的foldback為1時的例子读串，參數(shù)與Arrow相同
Diamond：棱形
同樣是Arrow的foldback為2時的例子，參數(shù)與Arrow相同
Custom：自定義
允許創(chuàng)建自定義的疊加層，需要使用create(),來返回DOM元素或者有效的選擇器（ID）
var conn = jsPlumb.connect({ source:"d1", target:"d2", paintStyle:{ stroke:"red", strokeWidth:3 }, overlays:[ ["Custom", { create:function(component) { return $("foobar"); }, location:0.7, id:"customOverlay" }] ] });
作為[0,1]的小數(shù)恢暖，其表示沿著由連接器內(nèi)接的路徑的一些成比例的行程排监，默認(rèn)值為0.5。
作為大于1的整數(shù)杰捂，表示從起點(diǎn)沿連接器行進(jìn)的某些絕對像素數(shù)舆床。等于1時，在終點(diǎn)嫁佳。
作為小于零的整數(shù)挨队，其指示沿著連接器從端點(diǎn)向后行進(jìn)的一些絕對值的像素。等于0時蒿往，在起點(diǎn)盛垦。
所有疊加層都支持：
getLocation-返回當(dāng)前位置
setLocation-設(shè)置當(dāng)前位置
添加疊加層
例子：
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"}]);
當(dāng)然還有獲取疊加層的方法：getOverlay(id)這里的id與元素中的id不同瓤漏，只是組件在jsPlumb中的唯一標(biāo)識而已腾夯，在控制臺打印之后，能看到內(nèi)部提供了很多方法,另外注意原型鏈中的方法赌蔑。
在官方的Hiding/Showing Overlays中，向我們展示了setVisible,showOverlay(id),hideOverlay(id)竟秫，removeOverlay(id)等方法娃惯，當(dāng)然，因為對象中有DOM元素肥败，我們也可以使用其他方法來控制DOM元素趾浅。
Groups
相當(dāng)于給節(jié)點(diǎn)之間加入了分組的概念，一旦分組馒稍，那么就可以使用組來控制組下的所有元素皿哨。
但這里的分組仍然是在jsPlumb中建立索引，當(dāng)有相關(guān)事例時纽谒，再進(jìn)行介紹证膨。
Drag
如果不使用jsPlumb提供的拖動，則需要使用repaint()來對拖動之后的連線進(jìn)行重繪鼓黔。
而當(dāng)修改了節(jié)點(diǎn)的層級央勒，或者偏移則需要使用revalidate(container)來刷新。
Establishing Connections
在上面的例子中澳化，已經(jīng)介紹了基本的連接方式j(luò)sPlumb.connect({source:"element1",target:"element2"})崔步。
這種方式創(chuàng)建的連接線一旦移除，則創(chuàng)建的端點(diǎn)也會自動移除缎谷。如果不想端點(diǎn)被移除井濒，則可以繼續(xù)加參數(shù)，將
deleteEndpointsOnDetach設(shè)為false。如果不想鼠標(biāo)能夠移除連接線瑞你，則可以在局部配置中將ConnectionsDetachable設(shè)為false酪惭，或者在connect時，加入detachable:false捏悬。
拖放連接
一開始就要創(chuàng)建一個端點(diǎn)來作為源點(diǎn)
varendpoint = jsPlumb.addEndpoint('elementId',{isSource:true})
這樣就可以從該端點(diǎn)拉線出去撞蚕。
如果給另一個創(chuàng)建的點(diǎn)加入isTarget:true，則就可以用上面的點(diǎn)連入這個點(diǎn)过牙。
或者使用makeSource或者makeTarget：
jsPlumb.makeSource("ele1",{anchor:"Continuous",? maxConnections:1···})
上述例子中甥厦，如果配置了maxConnections，則最多只能出現(xiàn)這個參數(shù)的連線寇钉，一旦多于這個數(shù)目的連線刀疙，就可以用onMaxConnections(params,originalEvent)這個回調(diào)函數(shù)來做其他事.
connect與makeSource，makeTarget扫倡，都可以配置第三個參數(shù)谦秧，相當(dāng)于公共配置參數(shù)，與第二個參數(shù)類似撵溃。
-----------------------------------------------------------------------
在connect中如果使用newConnection：true參數(shù)疚鲤，則會取消makeTarget，makeSoucr缘挑，addEndpoint中所添加的配置項,重繪連接線集歇。
而makeTarget也有onMaxConnections方法。
因為makeTarget包括上面介紹的isTarget都可以指向源點(diǎn)元素语淘，所以诲宇，如果不想造成回環(huán)（自己連自己），則可以在makeTarget中設(shè)置allowLoopback：false.如果只想產(chǎn)生一個端點(diǎn)惶翻，而不是多個端點(diǎn)姑蓝，則需要使用uniqueEndpoint:true.
默認(rèn)情況下，使用makeTarget創(chuàng)建的端點(diǎn)將deleteEndpointsOnDetach設(shè)置為true吕粗，即刪除連線纺荧，端點(diǎn)刪除；如果不要刪除颅筋，則需要手動改為false虐秋。
--------------------------------------------------------
如果既配置了元素可拖動，又設(shè)置了元素可拖放連接垃沦，那jsPlumb沒有辦法區(qū)分拖動元素和從元素中拖動連接客给，所以它提供了filter方法。
jsPlumb.makeSource("foo",{filter:"span",? filterExclude:true});
則除span元素的其他元素都可以創(chuàng)建拖放連接肢簿，filter也接受函數(shù)靶剑。filter:function(event,element).
也可以使用isTarget("id"),isSource("id")來判斷節(jié)點(diǎn)是否成為了源點(diǎn)蜻拨。
如果配置了source和target之后，想切換源的激活狀態(tài)桩引，則可以使用setTargetEnabled(id),setSourceEnabled(id)缎讼。
如果想取消makeTarget和makeSource所創(chuàng)建的源點(diǎn)，可以使用：
unmakeTarget("id")
unmakeSource("id")
unmakeEveryTarget
unmakeEverySource
Drag and Drop scope
如果使用了jsPlumb自帶的drag或者drop坑匠，那么給端點(diǎn)配置scope是很有必要的血崭，這意味著之后創(chuàng)建端點(diǎn)只能連接到對應(yīng)scope的端點(diǎn)。如果不設(shè)置scope厘灼，其默認(rèn)的scope是一樣的夹纫。
Removeing Nodes
移除節(jié)點(diǎn)沒什么好說的，關(guān)鍵還是要移除與之關(guān)聯(lián)的端點(diǎn)和連接線设凹。
Removeing Connections／Endpoints
Connections
detach
varconn = jsPlumb.connect({...});jsPlumb.detach(conn);
如果使用該方法來刪除連接線舰讹，那么會有幾種情況：
如果使用jsPlumb.connect創(chuàng)建的線，而且沒有設(shè)置deleteEndpointsOnDetach:false,則使用detach時闪朱，端點(diǎn)也會一起被移除月匣。
如果通過makeSource配置的元素創(chuàng)建了連接線，而且沒有設(shè)置deleteEndpointsOnDetach:false,則使用detach時奋姿，端點(diǎn)也會一起被移除锄开。
如果使用addEndpoint注冊的元素通過鼠標(biāo)創(chuàng)建了連接線，則不會刪除端點(diǎn)称诗。
detachAllConnections(el,[params])
用于刪除元素上的所有連接線萍悴。
detachEveryConnection()
刪除所有連接線。
Endpoints
deleteEndpoint
刪除一個端點(diǎn)粪狼。
deleteEveryEndpoint
刪除所有的端點(diǎn)
Connection and Endpoint Types
可以通過提供的方法來動態(tài)的修改連接線或端點(diǎn)的樣式退腥。
Connection Type
jsPlumb.registerConnectionType("example",{? paintStyle:{stroke:"blue",strokeWidth:5},});varc= jsPlumb.connect({source:"someDiv",target:"someOtherDiv"});c.bind("click",function(){c.setType("example")});
當(dāng)點(diǎn)擊連接線時任岸，會替換連接線的樣式
也可以使用：
jsPlumb.registerConnectionTypes({"basic":{? ? paintStyle:{stroke:"blue",strokeWidth:7}? },"selected":{? ? paintStyle:{stroke:"red",strokeWidth:5}? }});c.bind("click",function(){? c.toggleType("selected");});
而type支持的屬性都和css相關(guān)：
anchor
anchors
detachable
paintStyle
hoverPaintStyle
scope
cssClass
parameters
overlays
endpoint
Endpoint type
jsPlumb.registerEndpointTypes({"basic":{? ? paintStyle:{fill:"blue"}? }});
端點(diǎn)的type支持的參數(shù)：
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)即監(jiān)聽所有的連接事件再榄。info包含的信息有：
connection
sourceId
targetId
source
target
sourceEndpoint
targetEndpoint
connectionDetached(info,originalEvent)即監(jiān)聽當(dāng)連接斷掉時的事件。info類似connection.
右鍵點(diǎn)擊也有相應(yīng)的contextmenu方法享潜。
關(guān)于connection和endpoint的事件方法困鸥，請參考官網(wǎng)api。
記錄下overlay的事件剑按。
jsPlumb.connect({source:"el1",? target:"el2",? overlays:[? ? ["Label",{? ? ? events:{? ? ? ? click:function(labelOverlay,originalEvent){? ? ? ? ? console.log(labelOverlay);? ? ? ? }? ? ? }? ? ? }? ? }],? ]})
同樣疾就，使用unbind方法，可以移除上面所添加的監(jiān)聽艺蝴。
篩選jsPlumb
使用jsPlumb.select()方法猬腰，用于在Connections列表上做篩選，打印一下值：
