摘要：社區(qū)版本為開發(fā)者在他們的網(wǎng)頁上提供可視化的元素連接。在現(xiàn)代的瀏覽器使用，在和以下版本使用。建議用戶自己設(shè)置。到目前為止，一個在每個終點(diǎn)都有，在中間有一個標(biāo)簽，添加四個元素，實(shí)際添加的元素取決于渲染器使用的是還是。

jsPlumb

jsPlumb社區(qū)版本為開發(fā)者在他們的網(wǎng)頁上提供可視化的元素連接。在現(xiàn)代的瀏覽器使用SVG，在IE8和以下版本使用VML。

jsPlumb沒有額外的依賴。

幾種jsPlumb實(shí)例化的方式

jsPlumb默認(rèn)是注冊在瀏覽器的窗口（window）的，為整個頁面提供靜態(tài)實(shí)例。你也可以多帶帶實(shí)例化，使用getInstance 模塊，例如

var firstInstance = jsPlumb.getInstance();

變量firstInstance現(xiàn)在和jsPlumb變量一樣使用，你可以使用importDefault設(shè)置默認(rèn)參數(shù)，調(diào)用connect函數(shù)：

firstInstance.importDefaults({
 Connector : [ "Bezier", { curviness: 150 } ],
 Anchors : [ "TopCenter", "BottomCenter" ]
});

firstInstance.connect({
  source:"element1", 
  target:"element2", 
  scope:"someScope" 
});

getInstance也可以帶參數(shù)

 var secondInstance = jsPlumb.getInstance({
   PaintStyle:{ 
     lineWidth:6, 
     strokeStyle:"#567567", 
     outlineColor:"black", 
     outlineWidth:1 
  },
  Connector:[ "Bezier", { curviness: 30 } ],
  Endpoint:[ "Dot", { radius:5 } ],
  EndpointStyle : { fillStyle: "#567567"  },
  Anchor : [ 0.5, 0.5, 1, 1 ]
});

secondInstance.connect({ 
  source:"element4", 
  target:"element3", 
  scope:"someScope"   
});

建議自己進(jìn)行實(shí)例化。

jsPlumb通過id和元素交互，如果id沒有設(shè)置，jsPlumb會自動設(shè)置一個。建議用戶自己設(shè)置。

管理元素id

因?yàn)閖sp通過id管理元素，所以你得通知jsPlumb元素id的變化，

*jsPlumb.setId(el, newId)設(shè)置jsPlumb中的元素id
*jsPlumb.setIdChanged(oldId, newId)改變已有jsPlumb中的元素id

jsPlumb中大多數(shù)方法提供多種對指定元素進(jìn)行操作的格式。

選擇器/節(jié)點(diǎn)列表

jQuery中又選擇器的概念，例如$(".myClass")。在jsPlumb中同樣適用。

jsPlumb也提供NodeList，有幾種方式從DOM獲取到NodeList，最好用的方法是document.querySelectorAll("some selector")

元素ids

元素s

數(shù)組s

使用jsPlumb時，你需要考慮UI部分的z-indices（Z指數(shù)），特別是不要讓jsPlumb添加到DOM上的元素不要遮蓋其他元素的交互。

jsPlumb為Endpoint, Connector and Overlay添加一個元素到DOM上。到目前為止，一個Connection在每個終點(diǎn)都有Endpoint，在中間有一個標(biāo)簽（label），jsPlumb添加四個元素，實(shí)際添加的元素取決于渲染器使用的是（SVG還是VML）。

為了讓你能正確地組織z參數(shù)，jsPlumb給每個元素添加了CSS類，如下

Component Class
Endpoint _jsPlumb_endpoint
Connector _jsPlumb_connector
Overlay _jsPlumb_overlay

另外，無論什么時候，當(dāng)鼠標(biāo)經(jīng)過Endpoint或Connection上時，都會觸發(fā)_jsPlumb_hover這個類。關(guān)于jsPlumb CSS更多類的信息，訪問 this page

知道jsPlumb把新加的元素放在DOM的哪里很重要。如果你想要個簡介的版本（TL;DR（too long, didn’t read）），歸納如下：

強(qiáng)烈建議在使用jsPlumb前設(shè)置一個容器（Container）

容器就是你用來和jsPlumb添加的元素交互的一個母元素。

如果你沒有指定一個容器，jsPlumb會推斷你調(diào)用addEndpoint、makeSource、makeTarget的方法的第一個元素的offsetParent，或者connect的source元素的offsetParent作為容器。

下面是詳情：

早期版本的jsPlumb把body作為容器，好處是在支持那些可以連接（connect）的元素上很靈活，但是在一些具體案例中結(jié)果不是預(yù)期的。

設(shè)想一下，在標(biāo)簽里有幾個連接在一起的元素，你想在表單里添加元素，讓用戶切換表單時當(dāng)前的可以隱藏，那樣所有的jsPlumb相關(guān)元素都會被隱藏掉。但是當(dāng)元素都是在body上時，這就不會發(fā)生。

還有就是在一些元素里包含一個圖表，在溢出時會顯示滑動條，把元素添加到body可以避免這種事自動發(fā)生。

容器

你可以通過setContainer指定作為jsPlumb添加元素的容器，或者在jsPlumb.getInstance參數(shù)中指定。

重要：如果你使用了jsPlumb的draggable方法使你的UI可以拖拽（不止是通過jsPlumb添加的），會發(fā)生意外。建議使用另一個實(shí)例操作，如：

var nonPlumbing = jsPlumb.getInstance();
nonPlumbing.draggable("some element");

設(shè)置容器，使用jQuery選擇機(jī)制，添加一個Endpoint，相關(guān)UI將作為document body的子元素：

    jsPlumb.setContainer($("body"));
    jsPlumb.addEndpoint(someDiv, { endpoint options });

通過DOM

     
             jsPlumb.setContainer(document.getElementById("foo"));
    jsPlumb.addEndpoint(someDiv, { endpoint options });

通過元素id

    jsPlumb.setContainer("containerId");
    jsPlumb.connect({ source:someDiv, target:someOtherDiv });`

通過實(shí)例化

    var j = jsPlumb.getInstance({              
      Container:"foo"
    });
    jsPlumb.addEndpoint(someDiv, { endpoint options });

容器的CSS

你所選擇的容器會有osition:relative,因?yàn)閖sPlumb通過容器計(jì)算新元素添加的位置。

使用jsPlumb交互，拖拽很常見，可以通過下面來實(shí)現(xiàn)：

myInstanceOfJsPlumb.draggable("elementId");

如果你不這么做的話，jsPlumb就不知道元素被拖拽了，就不能重新渲染頁面。

更多信息，請?jiān)L問 this page

jsPlumb執(zhí)行速度和處理連接的上限取決于你所運(yùn)行的瀏覽器。目前，速度依次是Chrome,Safari,Firefox,IE版本越低執(zhí)行越慢。

懸浮拖拉（suspending drawing）

每次調(diào)用connect，addEndpoint時都會重新渲染關(guān)聯(lián)節(jié)點(diǎn)，大多數(shù)情況下這就是你想要的。如果你進(jìn)行大量操作，建議這樣干：

jsPlumb.setSuspendDrawing(true);
...

load up all your data here -
...
jsPlumb.setSuspendDrawing(false, true);

setSuspendDrawing通知jsPlumb要進(jìn)行大量重繪操作，就是repaintEverything。

批處理

這個函數(shù)進(jìn)入懸停繪畫（suspending drawing）模式，然后再進(jìn)入普通繪畫模式。

jsPlumb.batch(fn, [doNotRepaintAfterwards]);

舉個栗子

jsPlumb.batch(function() {
  // import here
  for (var i = 0, j = connections.length; i < j; i++) {
      jsPlumb.connect(connections[i]);
  }
});

這里我們把connections當(dāng)作一個對象數(shù)組，以作為connect函數(shù)的參數(shù)，例如：
{ source:"someElement", target:"someOtherElement" }

默認(rèn)，會在函數(shù)末尾執(zhí)行重繪的，但是你可以不這么做，

jsPlumb.batch(function() {
  // import here
}, true);

這個方法以前叫doWhileSuspended，1.7.3版本改了名字。

錨點(diǎn)類型

Continuous 需要最大的計(jì)算量
Dynamic and Perimeter是次慢的，Dynamic默認(rèn)有60個位置可供選擇
Static和Top`Bottom`一樣，是最快的。