jsPlumb（1） - 开始使用

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`同样，是最快的。