发布于 2015-12-21 23:26:57 | 794 次阅读 | 评论: 0 | 来源: PHPERZ
JsPlumb 可视化链接元素
JsPlumb 提供开发者页面的可视化链接元素，可与jQuery method, MooTools 和 YUI3 整合使用。
jsPlumb社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用SVG，在IE8和以下版本使用VML。
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"
});
建议自己进行实例化。
jsPlumb通过id和元素交互，如果id没有设置，jsPlumb会自动设置一个。建议用户自己设置。
因为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")
使用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把新加的元素放在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 });
你所选择的容器会有osition:relative,因为jsPlumb通过容器计算新元素添加的位置。
使用jsPlumb交互，拖拽很常见，可以通过下面来实现：
myInstanceOfJsPlumb.draggable("elementId");
如果你不这么做的话，jsPlumb就不知道元素被拖拽了，就不能重新渲染页面。
更多信息，请访问 this page
jsPlumb执行速度和处理连接的上限取决于你所运行的浏览器。目前，速度依次是Chrome,Safari,Firefox,IE版本越低执行越慢。
每次调用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`一样，是最快的。