jsplumb

一、简介：

jsplumb是jquery的一个插件，它能够让你用动态或静态的链接来连接html界面上的元素，并且从1.10版本开始，提供用鼠标拖动来连接。jsPlumb允许您使用SVG，Canvas或者VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。

主要包含以下模块：Anchor、Connector、Endpoint、 Overlay、Style、css样式、Events

二、Anchor：

    9个默认位置(元素四角，四边中点，元素中心)    

Top TopRight Right BottomRight Bottom BottomLeft Left TopLeft Center

    [x,y,dx,dy],其中x和y是[0,1]指定锚点位置的区间中坐标。dx和dy指定了锚点的方向，可以具有值0,-1,1

    jsPlumb支持6种形状：Circle Ellipse Triangle Diamond Rectangle Square

    Continuous：其位置由jsPlumb根据Connection中元素之间的方向计算。默认情况下，连续锚点将从其所在元素的所有四个面中选择点。可以使用faces来控制该行为（允许的值有top left right bottom）

三、 Connector：连接器是实际连接UI的线。

jsPlumb有4个连接器实现-一条直线，一个贝塞尔曲线，流程图和状态机。默认连接器是贝塞尔曲线

四、Endpoint：一个端点的UI组件，标志着一个锚的位置，是连接器连接的点

jsPlumb有三个端点实现，点、矩形和圆形，你可以指定端点的属性，（connect、addEndpoint、makeTarget）

五、Overlay：覆盖界面上的链接元素，如标签或箭头，

jsplumb有4个默认值：

• Arrow：客配置的箭头，放在两个点的连接线上，你可以控制箭头的长度和宽度，转折点：是一个折回点，方向点（允许是1和-1，意味着是点的链接方向）
  
• Label：在点的连接器上的可配置的标签
  
• plainArrow:一个三角形箭头，没有这会点
  
• diamond:钻石
  

fillStyle、strokeStyle、outlineColor可以使用任何有效的css3语法

fillStyle:定义endPoint的颜色，例如rgba(100,100,100,50),'blue','#456','#993355',rgb(34,56,78)

strokeStyle:连接器的颜色

lineWidth:连接线的宽度

outlineWidth:连接器或端点的轮廓宽度

Dashstyle、THE VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin只适用于VML或SVG

七、css样式：

jsplumb在它创建每个组件时都会附加一些类，这些类名都是公开的，并且如果你需要的话你可以将他们重写，具体如下

Connector --> _jsPlumb_connector         connectorClass
Endpoint   -->  _jsPlumb_endpoint        endpointClass
Overlay     -->  _jsPlumb_overlay        overlayClass

8.1、jsPlumb事件：

• connection(info,originalEvent) 通知已建立连接 jsPlumb.connect导致此事件被触发
  
• connectionDetached(info,originalEvent) 通知连接已分离
  
• connectionMoved(info,originalEvent) 通知已将现有连接的源或目标端点拖动到某个新位置。
  
• connectionAborted(connection,originalEvent) 在连接到端点或目标元素之前拖动新连接但被放弃时触发
  
• connectionDrag(connection) 通知正在拖动现有连接，请注意，当此事件触发全新的connection时，connection的目标是jsPlumb用于拖动的瞬态元素，并且随后在建立或终止connection时将从DOM中删除。
  
• connectionDragStop(connection) 通知连接拖动已停止，仅针对现有connection触发此操作
  
• click(connection,originalEvent) 单击
  
• dbclick(connection,originalEvent) 双击
  
• endpointClick(endpoint,originalEvent) 单击端点
  
• endpointDbClick(endpoint,originalEvent) 双击端点
  
• contextmenu(component,originalEvent) 右键单击某个给定组件
  
• beforeDrop(info) 删除新连接或现有连接时会触发此事件
  
• beforeDetach(connection) 无论出于何种原因，即将分离connection时也会触发此事件，你的回调函数将传递给用户刚刚分离的connection，从此拦截器返回false会中止connection分离
  
• zoom(value) 缩放
  

8.2、Connection Events:要绑定到connection上的事件

click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup

var connection = jsPlumb.connect({source:’el1’,target:'el2'});
connection.bind(‘click’,function(connection,originalEvent){});

8.3、Endpoint Events：要绑定到endpoint上的事件

click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup

maxConnections(info,originalEvent) 通知用户尝试在已具有最大连接数的Endpoint上删除连接

var endPoint = jsPlumb.addEndpoint(‘el’,{someOptions});
Endpoint.bind(‘click’,function(endpoint,originalEvent){});

8.4、Overlay Events：在Overlay上注册事件侦听器是一个稍微不同的过程 –您将它们作为

Overlay构造函数的参数提供，这是因为你从未真正对Overlay对象采取行动

jsPlumb.connect({
    source:’el1’,
    target:’el2’,
    Overlays:[
        [
        ‘Label’,{Events:{click:function(){}}}
        ]
    ]
});
 

解除绑定事件：unbind

如果有错误的地方，欢迎指出。不胜感激