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

chezhe
222 声望18 粉丝