引见

jsPlumb是用来衔接元素的，所以中心是Connection，个中又分为以下四个观点：

• Anchor 一个和某个相干元素的位置。你不能建立它们，非可视化，只要逻辑上的position。更多信息，接见 this page

• Endpoint Connection的可视的一个端点，你能够建立和衔接它们，固然，起首你得使它们能拖放。或许经由过程程序上jsPlumb.connect(...)来建立和衔接。更多信息，请接见 the page

• Connector 可视化的，衔接两个元素的线。有四种范例：贝塞尔曲线、直线、流程图、状态机。你不能和它们交互，你能够修正它们的定义。更多信息， this page

• Overlay 一个UI控件，用来装潢Connector，如Label、Arrow等。

一个Connection由两个Endpoint、一个Connector，Overlay无足轻重。每一个Endpoint有一个关联的Anchor。

jsPlumb的大众API只要Connection和Endpoint，建立和设置。然则你须要熟习其内部的Anchor, Connector and Overlay的观点。

Connector, Endpoint, Anchor & Overlay的定义

当你定义一个Connector, Endpoint, Anchor 或 Overlay的时刻，你就须要定义，如：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Rectangle"
});

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { 
      cssClass:"myEndpoint", 
      width:30, 
      height:10 
  }]
});

var common = {
    cssClass    :   "myCssClass",
    hoverClass  :   "myHoverClass"
};
jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:[ "Rectangle", { width:30, height:10 }, common ]
});

var common = {
    cssClass:"myCssClass"
};
jsPlumb.connect({
  source:"someDiv",
  target:"someOtherDiv",
  anchor:[ "Continuous", { faces:["top","bottom"] }],
  endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ],
  connector:[ "Bezier", { curviness:100 }, common ],
  overlays: [
        [ "Arrow", { foldback:0.2 }, common ],
        [ "Label", { cssClass:"labelClass" } ]  
    ]
});