发布于 2015-12-20 09:54:29 | 328 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程，程序狗速度看过来！

JsPlumb 可视化链接元素

JsPlumb 提供开发者页面的可视化链接元素，可与jQuery method, MooTools 和 YUI3 整合使用。

---

介绍

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