jsPlumb
jsPlumb社区版本为开发者在他们的网页上供应可视化的元素衔接。在当代的浏览器运用SVG，在IE8和以下版本运用VML。
jsPlumb没有分外的依靠。
加载和设置
几种jsPlumb实例化的体式格局
jsPlumb默许是注册在浏览器的窗口（window）的，为全部页面供应静态实例。你也能够零丁实例化，运用getInstance 模块，比方
var firstInstance = jsPlumb.getInstance();
变量firstInstance如今和jsPlumb变量一样运用，你能够运用importDefault设置默许参数，挪用connect函数：
firstInstance.importDefaults({
Connector : [ "Bezier", { curviness: 150 } ],
Anchors : [ "TopCenter", "BottomCenter" ]
});
firstInstance.connect({
source:"element1",
target:"element2",
scope:"someScope"
});
getInstance也能够带参数
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"
});
发起本身举行实例化。
元素ID
jsPlumb经由过程id和元素交互，假如id没有设置，jsPlumb会自动设置一个。发起用户本身设置。
治理元素id
由于jsp经由过程id治理元素，所以你得关照jsPlumb元素id的变化，
*jsPlumb.setId(el, newId)设置jsPlumb中的元素id
*jsPlumb.setIdChanged(oldId, newId)转变已有jsPlumb中的元素id
要领参数
jsPlumb中大多半要领供应多种对指定元素举行操纵的花样。
挑选器/节点列表
jQuery中又挑选器的观点，比方$('.myClass')。在jsPlumb中一样实用。
jsPlumb也供应NodeList，有几种体式格局从DOM获取到NodeList，最好用的要领是document.querySelectorAll("some selector")
元素ids
元素s
数组s
关于Z轴
运用jsPlumb时，你须要斟酌UI部份的z-indices（Z指数），特别是不要让jsPlumb增加到DOM上的元素不要遮掩其他元素的交互。
jsPlumb为Endpoint, Connector and Overlay增加一个元素到DOM上。到现在为止，一个Connection在每一个尽头都有Endpoint，在中心有一个标签（label），jsPlumb增加四个元素，现实增加的元素取决于衬着器运用的是（SVG照样VML）。
为了让你能正确地构造z参数，jsPlumb给每一个元素增加了CSS类，以下
Component Class
Endpoint _jsPlumb_endpoint
Connector _jsPlumb_connector
Overlay _jsPlumb_overlay
别的，不管什么时候，当鼠标经由Endpoint或Connection上时，都邑触发_jsPlumb_hover这个类。关于jsPlumb CSS更多类的信息，接见 this page
jsPlumb在哪儿增加元素？
晓得jsPlumb把新加的元素放在DOM的那里很主要。假如你想要个简介的版本（TL;DR（too long, didn’t read）），归纳以下：
强烈发起在运用jsPlumb前设置一个容器（Container）
容器就是你用来和jsPlumb增加的元素交互的一个母元素。
假如你没有指定一个容器，jsPlumb会揣摸你挪用
addEndpoint、makeSource、makeTarget的要领的第一个元素的offsetParent，或许connect的source元素的offsetParent作为容器。
下面是概况：
初期版本的jsPlumb把body作为容器，优点是在支撑那些能够衔接（connect）的元素上很天真，然则在一些详细案例中效果不是预期的。
想象一下，在标签里有几个衔接在一起的元素，你想在表单里增加元素，让用户切换表单时当前的能够隐蔽，那样一切的jsPlumb相干元素都邑被隐蔽掉。然则当元素都是在body上时，这就不会发作。
另有就是在一些元素里包括一个图表，在溢出时会显现滑动条，把元素增加到body能够防止这类事自动发作。
容器
你能够经由过程setContainer指定作为jsPlumb增加元素的容器，或许在jsPlumb.getInstance参数中指定。
主要：假如你运用了jsPlumb的draggable要领使你的UI能够拖拽（不止是经由过程jsPlumb增加的），会发作意外。发起运用另一个实例操纵，如：
var nonPlumbing = jsPlumb.getInstance();
nonPlumbing.draggable("some element");
举个栗子
设置容器，运用jQuery挑选机制，增加一个Endpoint，相干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 });`经由过程实例化
var j = jsPlumb.getInstance({ Container:"foo" }); jsPlumb.addEndpoint(someDiv, { endpoint options });
容器的CSS
你所挑选的容器会有osition:relative,由于jsPlumb经由过程容器盘算新元素增加的位置。
拖拽
运用jsPlumb交互，拖拽很罕见，能够经由过程下面来完成：
myInstanceOfJsPlumb.draggable("elementId");
假如你不这么做的话，jsPlumb就不晓得元素被拖拽了，就不能从新衬着页面。
更多信息，请接见 this page
实行效力
jsPlumb实行速率和处置惩罚衔接的上限取决于你所运转的浏览器。现在，速率依次是Chrome,Safari,Firefox,IE版本越低实行越慢。
悬浮拖沓（suspending drawing）
每次挪用connect，addEndpoint时都邑从新衬着关联节点，大多半情况下这就是你想要的。假如你举行大批操纵，发起如许干：
jsPlumb.setSuspendDrawing(true);
...load up all your data here –
…
jsPlumb.setSuspendDrawing(false, true);
setSuspendDrawing关照jsPlumb要举行大批重绘操纵，就是repaintEverything。
批处置惩罚
这个函数进入悬停绘画（suspending drawing）形式，然后再进入一般绘画形式。
jsPlumb.batch(fn, [doNotRepaintAfterwards]);
举个栗子
jsPlumb.batch(function() {
// import here
for (var i = 0, j = connections.length; i < j; i++) {
jsPlumb.connect(connections[i]);
}
});这里我们把connections看成一个对象数组，以作为connect函数的参数，比方：{ source:"someElement", target:"someOtherElement" }
默许，会在函数末端实行重绘的，然则你能够不这么做，
jsPlumb.batch(function() {
// import here
}, true);这个要领之前叫doWhileSuspended，1.7.3版本改了名字。
锚点范例
Continuous 须要最大的盘算量Dynamic and Perimeter是次慢的，Dynamic默许有60个位置可供挑选Static和Top`Bottom`一样，是最快的。
