jsPlumb（3）-基本概念

介紹

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" } ]  
    ]
});