⼊职第⼀波-jsPlumb官⽅⽂档部分翻译
刚⼊职，就得知⾃⼰要做 jsPlumb 相关的⼯作，本着看啥不如看官⽅⽂档的原则，开始看官⽅⽂档……
后来发现，已经有⼈翻译好啦，我开始愣是没着。那我都翻译了，不能⽩费不是，发上来吧，初次翻译，⼤神轻喷。JsPlumb 官⽅⽂档-免费版
jsPlumb
jsPlumb免费版为开发者提供了⼀种⽅法，使得开发者们能够在页⾯上对元素进⾏可视化连接，使⽤SVG。jsPlumb没有外部依赖关系。
1.7.x 系列的版本使⽀持 IE8 的最后⼀版。从
2.0.0 版开始，免费反只在⽀持 SVG 的现代化浏览器上⼯作。
引⼊和安装
阅读当前界⾯的所有内容是⼀个不错的主意。当你将 jsPlumb 集成到你的⽤户界⾯时，你可能需要知道以下相关事项。
浏览器兼容
安装
⽂档类型
需要引⼊的对象
初始化 jsPlumb
多个 jsPlumb 实例
⽅法参数
元素 ID
关于 z-Index 的注意事项
jsPlumb 在何处添加元素？
拖曳
表现形式
浏览器兼容
jsPlumb 1.7.x 版本在 IE6 及以上版本的浏览器运⾏。jsPlumb 在 IE9 及以上的浏览器上运⾏。
安装
⽂档类型
text/html
如果你想像⼤多数⼈⼀样使⽤ text/html ⽂档格式，那么你需要使⽤以下⽂档类型：
<!doctype html>
该⽂档格式提供了⼀种适⽤于所有浏览器的标准模板，能够访问 HTML5 。
需要引⼊对象
⽆需引⼊。
<script src="PATH_TO/jsplumb.min.js "></script>
初始化 jsPlumb
在界⾯元素没有被初始话之前，调⽤ jsPlumb 没有什么意义。为了解决这个问题，你需要为 jsPlumb 绑定 ready 事件（或者绑定你正在使⽤的 jsPlumb 实例）。
jsPlumb.bind("ready", function() {
...
// your jsPlumb related init code goes here
...
});
这⾥有⼀个更简单但功能不减的⽅法：
...
// your jsPlumb related init code goes here
...
}）;
如果在 jsPlumb 被初始化以后，再次绑定 ready 事件，那么你的回调函数会⽴即执⾏。
多个 jsPlumb 实例
jsPUmb 默认在浏览器窗⼝中注册，并提供了⼀个静态实例供整个界⾯使⽤。你也可以单独将 jsPlumb 实例进⾏实例化，使⽤getInstance ⽅法即可，例如：
var firstInstance = Instance();
现在，你可以像使⽤ jsPlumb 这⼀变量⼀样使⽤ firstInstance。包括设置默认值，电泳 connect ⽅法等等。
irstInstance.importDefaults({
Connector : [ "Bezier", { curviness: 150 } ],
Anchors : [ "TopCenter", "BottomCenter" ]
});
source:"element1",
target:"element2",
scope:"someScope"
});
getInstance 随意选择⼀个提供默认值的对象：
var secondInstance = Instance({
PaintStyle:{
strokeWidth:6,
stroke:"#567567",
outlineStroke:"black",
outlineWidth:1
},
Connector:[ "Bezier", { curviness: 30 } ],
Endpoint:[ "Dot", { radius:5 } ],
EndpointStyle : { fill: "#567567"  },
Anchor : [ 0.5, 0.5, 1, 1 ]
});
source:"element4",
target:"element3",
scope:"someScope"
});
如果可能的化建议使⽤ jsPlumb 的单独实例。
元素ID
jsPlumb 通过元素 Id 来和所有的元素进⾏交互，如果没有为元素设置 Id, jsPlumb 就会为元素创建⼀个 id.但我们建议你为你⾃⼰⽤户界⾯上的元素设置⼀个合适的 id.
改变元素 id
由于 jsPlumb 使⽤元素 id 和元素进⾏交互，因此当你的元素 Id 发⽣改变的时候，你需要告诉 jsPlumb。这⾥提供了两种⽅法来通知jsPlumb 元素 id 发⽣了改变：
jsPlumb.setId(el,newId) 如果你想要 jsPlumb 关注到你的 dom 元素发⽣了改变，就可以使⽤这个⽅法。这样设置以后，jsPlumb 回更新相应的引⽤。
jsPlumb.setIdChanged(oldId,newId) 如果你已经改变了元素 id，可以使⽤这个⽅法，它会更新 jsPlumb 相应的引⽤。
参数⽅法
jsPlumb 提供了多种格式的⽅法⽤于操纵指定元素。
节点列表/选择器
在 jsPlumb 的相关⽂档中引⼊了 selector(选择器) 这⼀概念。它返回⼀个符合特定 CSS 规范的节点列表。在现在的浏览器中，你可以通过调⽤以下⽅法来或与⼀个列表:
someElement.querySelectorAll('.someSelector')
querySlectorAll 这⼀⽅法返回的元素就是⼀个 NodeList(节点列表)。
尽管 jsPlumb 并没有依赖于 JQuery，它依然⽀持将 JQuery 选择器返回的结果作为参数（因为 JQuery 选择器返回的对象是是列表式的，它拥有长度属性和索引访问器）。所以你在界⾯中使⽤ JQuery 依然是有⽤的。
$(someElement).find(".someSelector")
元素id
使⽤单个字符串作为参数时，jsPlumb 会将该参数视作元素 id。
元素
你可以使⽤ DOM 元素作为参数。这个事实可能并不会让你觉得惊讶。
数组
你可以使⽤我们列出的所有类型的数组。数组中数据可以拥有多种格式，并不要求全部是同⼀种格式。
关于 Z-Index 的注意事项
当使⽤ jsPlumb 时，你需要注意你界⾯中的各个部分中的 z-indices。特别要注意的⼀点是 jsPlumb 添加到界⾯中的元素不能覆盖界⾯中原有元素。
jsPlumb 为每个端点、连接器和覆盖层都添加了⼀个元素。因此，对于两端有可见端点的连接器和中间的标签，jsPlumb 添加了四个元素。
为了帮助你正确的识别 z-indices，jsPlubm 为每个类型的元素添加了不同的 CSS 类。如下所⽰:
Component Class
Endpoint jtk-endpoint
Connector jtk-connector
Overlay jtk-overlay
此外，⽆论⿏标合适划过端点或者连线，都会为他们添加⼀个叫做 jtk-hover 的类。想要了解更多关于 jsPlumb 的 CSS 样式，请看（请看官⽹⽂档）。
jsPlumb 在何处添加元素？
明⽩ jsPlumb 将在何处将它创建的元素加⼊ dom 中是很重要的。如果你想要添加 TL；DR 版本，可以归结为以下⼏点：
强烈建议你在开始建设界⾯之前设⽴⼀个容器。
该容器会成为 jsPlumb 所添加元素的⽗容器。通常来说，你可以把它当作你所有连接点的⽗节点。
如果你没有指定容器，jsPlumb 将会把第⼀个元素的 offsetParent 作为⽗容器，你可以称之为……（翻译⽆能请见谅）。
让我们更加详细的讨论关于元素添加的更多事项：
jsPlumb 的早期版本将所有元素都添加进 body 中 。这样做的优点在于，能够灵活的布置元素之间的链接，当然，这样做也带来了⼀些意想不到的结果。
你可以想⼀想，如果有⼀部分元素已经相互连接，且这些元素都有同⼀个标签（属于同⼀个分类），该如何进⾏布局：你会希望 jsPlumb 在这⼀整部分元素外添加元素。所以当⽤户切换标签，且当前标签被隐藏时，所有标签中的元素都会被隐藏。因此，当所有的元素都属于body 时，这种情况就不会发⽣。
当⼀些图表包含的元素过多，溢出当前界⾯、需要使⽤滚动条时，jsPlumb 就会排上⽤场。将元素追到到 body ⽂档中，防⽌这种情况发⽣。
容器
你可以-应该使⽤ jsPlumb 中的 setContainer ⽅法去为所有即将被添加的元素创建⼀个⽗元素，或者可以调⽤ Instance ⽅法，填⼊参数来建造容器。
重要的⼀点是从 jsPlumb 1.6.2 版本以后发⽣了⼀些改变。在 1.6.2 版本之前，你需要通过 jsPlumb.Default.Container 属性来指定容器。当然你现在也可以使⽤这样的⽅法来指定容器，它并不会产⽣语法错误，但它也不会产⽣什么实际作⽤。
还有重要的⼀点是，如果你使⽤ jsPlumb 中的 draggable ⽅法来使你界⾯上的其他元素能够被拖曳，注意，在当前实例中，被当作Container (⽗容器) 的元素是不可以调⽤ draggable ⽅法的。否则，你在拖曳元素的时候，可能会发⽣⼀些奇怪的事情。如果你希望使⽤jsPlumb 正常的拖动元素，建议你创建⼀个现得实例。
var nonPlumbing = Instance();
nonPlumbing.draggable("some element");
例如
建⽴⼀个容器，并将它作为默认容器
jsPlumb.ElementById("foo"));
...
jsPlumb.addEndpoint(someDiv, { endpoint options });
建⽴⼀个容器，并将它作为默认容器，使⽤元素Id，然后连接两个元素。此时，id 为 “containerId” 的元素就拥有两个⼦元素了。
jsPlumb.setContainer("containerId");
...
建⽴⼀个 jsPlumb 的新实例，并且在构造函数中指定容器。
var j = Instance({
Container:"foo"
});
...
jsPlumb.addEndpoint(someDiv, { endpoint:options });
容器样式
你选择的容器样式记得要设置 position:relative 这⼀属性，因为 jsPlumb 将会以此为基准作为添加元素的起始位置，并计算出元素具体位置，jsPlumb 使⽤绝对定位。
元素拖曳
使⽤ jsPlumb 作为接⼝的元素都有⼀个普遍的特点，那就是元素都是可拖曳的。你应该使⽤ jsPlumbInstance.draggable 来配置元素：myInstanceOfJsPlumb.draggable("elementId");
…… 因为如果你不这样配置的化，jsPlumb 不会知道元素被移动了，因此也不会重绘该元素。
拖曳详细讨论见官⽅⽂档。
表现形式
jquery是什么选择器
jsPlumb 执⾏的速度、元素链接上限的管理，在运⾏时都取决于浏览器。当你写代码时，你会发现，jsPlumb 在 Chorme 上运⾏最快，其次是 Safari/Firefoc，在 IE 上的运⾏速度则是随着随着版本号递减。
暂停绘制
每个在 jsPlumb 中调⽤的 .connect 或者 addEndpoint ⽅法都会重绘相关元素，这种重绘恰恰是你所希望的。但是如果你想执⾏某些“批量”操作——例如将数据载⼊界⾯中那可能会——还是建议你在进⾏这种操作之前暂停绘制:
jsPlumb.setSuspendDrawing(true);
...
- load up all your data here -
...
jsPlumb.setSuspendDrawing(false, true);
注意调⽤ setSuspendDrawing 时的第⼆个参数：它指明 jsPlumb ⽴即进⾏全局重绘（通过调⽤内部⽅法：repaintEverything）.
上⾯说过我建议你这样做。确实。当你在运⾏速度慢的浏览器上解决批量连接问题时，暂停绘制与否会让结果有很⼤的不同。
batch(分批处理)
该函数抽象出了⼀种绘制暂停模式，做⼀些事，然后继续绘制。
jsPlumb.batch(fn, [doNotRepaintAfterwards]);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。