官方示例：http://morrisonpitt.com/jsPlumb/html/demo.html
代码地址：http://code.google.com/p/jsplumb/
Jsplumb先容地址：http://jsplumb.tumblr.com/
JsPlumb许可您利用SVG、Canvas 或者 VML链接屏幕上的元素，这些取决于您利用的浏览器的能力。
浏览器的兼容性
jsPlumb 1.3.3 已经在以下浏览器测试：
IE 6 on Windows XP
IE 7 on Windows XP
IE 8 on Windows XP
Firefox 3.5.8 on Windows XP
IE 9 on Windows 7
Chrome 12 on Windows 7
Firefox 3.5.8 on Windows 7
Firefox 3.6.3 on Ubuntu 10.04
Chrome on Ubuntu 10.04
Safari 4 on Mac Tiger
Safari 4 on Windows Vista
Safari 5.0.5 on Windows 7
Opera 10.54 on Windows XP
安装须要导入利用jsPlumb须要到如的类库文件，是根据您利用的javascript类库的不同而定，目前供应以下版本。
jQuery
jquery的1.3.x或更高版本
jquery ui的1.7.x或1.8.x(如果您须要支持拖放)
MooTools
MooTools核心库版本1.2.4或更高版本(jsPlumb已在1.2.4和1.3.3版本上测试)
MooTools的Drag.Move的1.2.4.4或更高版本
YUI3
YUI3.3.X ,目前jsPlumb只在YUI3.3.0上测试，YUI3其他版本可能也可以正常事情
jsPlumb可以利用SVG，HTML5的画布元素或VML去呈现须要显示的工具，当代大部分浏览器都支持Canvas 和 SVG,但是IE9以下都不支持这些，默认情形下，jsPlumb都利用canvas去渲染，但如果在利用IE9以下的情形下，jsPlumb将利用vml去渲染，您可以通过下列办法调度渲染模式：
二．简介1. 基本观点
jsPlumb是将所有链接的东西放在一起，以是在jsPlumb中，核心是链接工具，jsPlumb本身可以分成四个组成部分
锚(Anchor)：一个位置，放置端点的地方，相对付一个元素的来源，您不须要自己硬编码来创建它，jsPlumb供应给您各种功能，您只须要按照您的须要创建它就可以了。它没有可视化的显示，只是一个逻辑位置，可以利用锚的id来引用它，jsPlumb支持这样做，并且您可以利用坐标来表示[x,y,x方向,y方向]
端点(Endpoint )：链接的一真个可视化表示，您可以创建并可以链接他们；您可以让他们支持拖拽，或者您可以直策应用jsPlumb.connect()在创建链接时直接创建它们。
连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认类型:Bezier曲线，直线，和流程图链接器，您不用去处理连接器，当您须要利用它们时，您只须要定义它们即可。
覆盖物(Overlay)：一个UI组件，是用来是用来装饰连接器，例如标签、箭头等。
锚(Anchors)锚的观点是指：定义一个链接线能够链接的点，jsPlumb有9个默认的锚点位置，您可以利用它们去链接元素，详细有：
这些位置在jsplumb底层代码中都因此阵列语法表示的，[X,Y,DX,DY],个中X,Y是在区间[0,1]指定锚的位置，DX和DY是在区间[-1,1]指定曲线的事宜锚的方向坐标，例如[0，0.5，-1，0]定义了一个“LeftCenter”连接器的曲线，从锚点单向向左的曲线. 同样，[0.5，0，0，-1]，定义一个“CenterTop”锚连接器所产生的向上的曲线。
动态锚(Dynamic Anchors)这些都是可以在多少地点之一定位的锚点，当你每次移动一个元素时，会自动选择一个最得当的位置，没有分外的语法来创建一个DynamicAnchor，你只须要供应一个独立的锚位置，例如数组：
默认的动态锚：
jsPlumb供应一个动态的锚，定名为“AutoDefault” 默认位置有：TopCenter，RightMiddle，BottomCenter和LeftMiddle
动态锚和可拖动的连接是可以进行互操作的，当你开始拖动连接或开释它时，jsPlumb会锁定一个动态的锚的位置， 您可以在界面上看到链接锚点的切换变革。
连接器、端点，覆盖物(Connector, Endpoint & Overlay Definitions)在我们谈论连接器、终点和覆盖物之前，须要提醒的是：你须要定义一个连接器，端点或覆盖，您必须利用一个“定义”，而不是直接构建一个，这个定义可以是一个字符串，它指定你须要创建的工具。
或者您须要构件的工具的属性名组成的数组，您可以通过其布局函数来创建，例如
也有三个参数的方法，可以让你指定两套参数，jsPlumb会自动为你合并，例如
连接器(Connectors)
链接的线，实际上是界面上的各个元素的链接线，jsPlumb有三条连接器实现，一条直线、Bezier曲线和”流程图”连线，默认的连接线是贝塞尔曲线，您可以有选择的设置一个链接器，可以通过设置“connector”来定义一个连接线，或者在添加端点时设置连接线，如果您没有为connector设置一个值，那么他会用他的默认值”Default”
三种链接的定义语法类似
贝塞尔曲线：
贝塞尔曲线供应了两个端点之间的立方体路径，它支持一个布局函数参数，
curviness -可选，默认为150，这定义的锚点位于贝塞尔曲线的掌握点，以像素为单位的间隔，但这并不虞味着你的连接器会穿过从你的曲线到这个间隔的点，这仅是一个标识而已。
直线：直连绘制直线的两个端点之间。 没有布局函数的参数支持，利用参数endpointStyle定义连接样式或添加端点时定义连接线样式
流程图：这种类型的连接器，绘制一系列垂直或水平段组成的连接 - 经典的流程图，支持一个单一的布局函数参数
存根 -这是最小长度，以像素为单位，从端点发出的初始存根。 此参数是可选的，默认为30像素
端点类型(Endpoint Types)一个端点的UI组件，标志着一个锚的位置，是连接器连接的点，jsPlumb有三个端点实现，点、矩形和图形，你可以指定端点的属性，在jsPlumb.connect时指定属性，或者jsPlumb.Addendpiont时指定，或者设置jsPlumbde target时设定属性，语法可参照connector。
三个可用的端点类型，他们的布局函数参数如下：
点端点(Dot Endpoint)：
此端点在屏幕上画一个点。 它支持一个布局函数参数：
半径 -可选，默认为10个像素。 定义点的半径
矩形端点(Rectangle Endpoint)：
绘制一个矩形。 支持的布局函数的参数是：
宽度 -可选;默认为20像素。 定义矩形的宽度。
高度 -可选，默认为20个像素。 定义矩形的高度。
图片端点(Image Endpoint)：
从一个给定的的URL绘制图像。 此端点支持一个布局函数的参数：
SRC -必需的。 指定要利用的图像的URL。
覆盖物类型(Overlay Types)覆盖界面上的链接元素，如标签或箭头等，jsPlumb有四个默认值：
Arrow：可配置的箭头，放在两个点的连接线上，你可以掌握箭头的长度和宽度，
迁移转变点：是一个折回点，方向点(许可值是1和-1，意味着是点的链接方向)
Label：在点的连接器上的可配置的标签
PlainArrow：一个三角形箭头，没有折回点
Diamond:顾名思义，钻石
末了的两个实际上市Arrow的配置的实例，当您调用jsPlumb.connect或jsPlumb.addEndpoint时，您可以指定一个或多个覆盖物。
这里我们举个例子，默认的箭头，上面加上笔墨”foo”，如图：这个链接将有一个箭头标签在连线的一样平常，并且笔墨标签在连线的四分之一处，可以把稳下id属性，你可以用它来删除标签或做其他操作。
下面的实例，添加两个覆盖物，请把稳，我们在这个例子中利用的参数“connectorOverlays，”而不是上面例子中的“overlays”，这是由于总有一天overlays会用来作为闭幕点的覆盖物样式：这个链接将有一个1030的的箭头和含有笔墨foo的标签，位置在连接线的开头，其余，须要把稳每一个覆盖物的id。
PlainArrow这仅仅是一个分外的Arrow的实例，内部jsPlumb给”foldback”硬编码为1，意思是一个平面的箭头尾部边缘，Arror的所有布局函数适用于PlainArrow.
Diamond这也是一个分外的Arrow实例，个中jsPlumb内部给foldback硬编码值为2，意味着箭头转变为Diamond,Arrow的所有布局函数适用于Diamond.
Lable供应了一个文本的标签来装饰连接器，可用的布局函数参数有：
Lable：要显示的笔墨，你也可用供应一个函数放这儿，用来替代文本，他是做为连接的参数返回，该当返回一个string类型的字符串；
cssClass：一个可选的用于lable的样式类，这是目前首选的”lableStyle”参数，样式有：
Location：做为 “Arrow” 标签该当显示的位置,比例从0到1，包括1。
显示/隐蔽 覆盖你可用利用setVisible来掌握Arrow的显示或隐蔽，或者showOverlay（ID）方法，或者hideOverlay（ID）方法，请把稳这里的参数id，是我们在设定各个元素时指定的，它可用用来找到那个元素。大略的实例：
并且，连接器connection也有很方便的方法用来替代上面的方法
如图：
连接器connection也供应删除覆盖物的方法，如图：
默认值(Defaults)
最大略的办法来设置你的pluming的显示外不雅观等等，是重写这些元素的默认值，如果你不这么做，你得每次都手动的去供应这些值；每一个connect和addEndpoint方法都有一个关联的默认值，这些默认值存储在jsPlumb.Defaults里面，他是一个javascript工具，这些参数的初始值是：
您可用用类似下面的方法来覆盖默认值
三．链接(Connections)1.基本链接(Programmatic Connections)最大略的链接，你可用这样写
在这个例子中，我们已经创建了“element1的”element2的“连接。 请记住，在jsPlumb中连接是靠两个端点，连接器，和零个或多个覆盖物重叠组成，但是，这个实例的“连接”没有供应这些东西，以是jsPlumb在须要这些的地方都用的是默认值，这些默认值是：
--链接的两个端点，jsPlumb默认利用的是Dot点端点，半径10，添补颜色#456
--链接的两个端点的锚，也是用的是默认值
--设定两个端点是否可被用来做为新的链接点，默认值为false
--链接器的类型和外不雅观，默认值是贝塞尔曲线，宽度8，颜色#456
以是这个链接是：
一个8px的贝塞尔曲线，从一个端点(element1)的bottomCenter移到另一个端点的bottomCenter，而且每一个端点的都因此10px为半径，#456为颜色的Dot点，
让我们轻微加强一点这个链接，并且见告jsPlumb我们想要什么，如图：
详细样式…就不先容了，自己看图。
重用jsPlumb的链接设置一种非常常见的情形，比如你想要同一个设置，来创造多个链接，jsPlumb connect有两个参数
2.利用拖放的链接(Programmatic Connections)
如果须要链接支持拖放，你首先须要进行一下设置，每一个须要支持拖放的链接，至少须要一个闭幕点，这里给一个实例，展示若何去创建Endpoint
此端点将作为连接的资源，任何来自他的链接都将利用jsPlumb默认的样式作为自己的样式
Tip:一些常用的数据利用三个参数的addEndPoint方法
常常发生的一件事：你有一个端点，他的样式和其他的端点只有一点点差异，大多数都是一样的，这样的情形下，你可以定义个相同的样式，有不同的样式可以单独立出来，如下图，把稳下anchor设置，两个元素是不一致的：
现在你有一个源端点，你须要在其他元素上创建一个闭幕点，或者关照jsPlumb你须要使全体元素成为一个拖拽的目标，让我们看看若何去创建这样一个端点：
还有其余一个方法，jsPlumb.makeTarget()，这个方法须要两个参数，第一个参数是指须要设定的元素，或者元素列表，第二个参数是指当一个链接建立时你须要的端点，在这个例子中，我们用我们之前就用过的端点，-the gray Rentangle—但是我们须要见告jsPlumb,元素” aTargetDiv”将会被作为dorp的端点：
在jsPlumb中方法jsPlumb.addEndpoint 和方法jsPlumb.makeTarget，工具endpointOptions里面的参数都是一样可以用的，你可以在端点闭幕点设置很多东西，这个你可以拜会api列表解释。下面的示例显示了指定的箭头在链接拖动到闭幕点的连接线的一半的地方
下面这个示例展示的是，这个闭幕点，连接到它的连接线是依赖这个闭幕点的位置，由于它定义了好几个锚点，连接线会自动找到该闭幕点的动态锚：
3.”拖”选项(Drag Options）
这些拖动选项将通过jsPlumb api库来供应支持，jsPlumb将会供应你须要的统统，如果你须要一些拖动过程中的生命周期事宜 ，你须要供应给jsPlumb一个关照方法，如果触发某个事宜，它会调用该方法，比若说你须要在拖动开始时：
4.”放”选项(Drop Options)
Drop选项和Drag办法是一样的，用法可拜会jquery用法
http://docs.jquery.com/UI/Droppable
5.”拖放”范围(域)( Drop Options)jsPlumb借用了jquery里面drag/drop的范围观点，范围的观点是指那些可拖放的元素只能够被拖放到那些有范围的元素里面，在jsPlumb中你可以在创建EndPoint时创建一个范围”Scope”，下面给出一个例子：
如果你不供应一个”Scope”，jsPlumb将利用一个默认的范围，在这个方法中，这个值是可用的：
如果你由于某些缘故原由想改变它的值，你可以这样做：
如果你想，你也可以这样，供应一个drap和drop的范围值：
四．外不雅观1. 基本样式
定义端点、覆盖物(覆盖物现在更方向于用cssClass来替代)、连接线的样式，这些样式是由paintStyle作为jsPlumb connect、jsPlumb.makeTarget、jsPlumb.addEndPoint方法的参数来定义的，根据你调用的不同方法，参数名称会不一样，详细不同如下面所列：
连接线样式
jsPlumb.connect:
jsPlumb.addEndpoint:
把稳上面的样式参数，下面我们对它进行谈论
闭幕点样式：
像上面的定义我们可以有下列方法：
添加闭幕点时定义：作为jsPlumb.connect连接时的参数或作为jsPlumb.connect连接工具样式数组中的一个或者在jsPlumb.makeTarget方法中在上面的示例中，我们讲”e1”拖放到作为目标的”e2”中，并且定义了闭幕点的样式。
覆盖物样式
最完美的设置覆盖物样式的办法是利用创建overlay时的布局函数来定义
样式参数列表
这是设置paintStyle的完全参数列表
但是请把稳，fillStyle参数在connector中会被忽略，strokeStyle在EndOptions中会被忽略，此外，如果你利用jsPlumb.connect创建链接，并且为指定任何EndOption样式，EndOptions中的fillStyle样式会被指定为连接线的strokeStyle。
fillStyle, strokeStyle and outlineColor可以利用任何有效的CSS3语法
fillStyle:定义EndPoint的颜色，例如rgba(100,100,100,50), "blue", "#456", "#993355", rgb(34, 56, 78)
strokeStyle:连接器的颜色
lineWidth:连接线的宽度，是个Int值
outlineWidth：连接器或端点的轮廓宽度，int值
outlineColor：连接器或端点的颜色
dashstyle、The VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin
只适用于VML或SVG或VML和SVG，这里不做先容
2. 悬浮样式当鼠标悬浮在这些元素上时 ，连接线和闭幕点都支持鼠标悬浮样式。他们的样式须要被精确的指定，指定的办法和我们在上面谈论的办法同等，悬浮样式也一样继续了基本样式，这是由于当鼠标移上去的时候，您常日会只希望变动颜色，或者轮廓颜色，以是你只须要指定须要改变的值即可，这样避免了你须要定义重复的样式，鼠标悬浮样式的参数名只是须要在正常样式前加入”hover”即可，下面给个例子：
在这个示例中，我们指定两个链接线和闭幕点的鼠标悬浮样式，这地方的两个连接线和闭幕点的悬浮样式是一样的，我们也可以利用复数形式使两个端点或两条连接线的悬浮样式不一样，如下图：
上面示例中两个闭幕点的鼠标悬浮样式是不一样的。通过下面的两种办法也可以实现， jsPlumb.addEndpoint和jsPlumb.makeTarget ：
（这里我们指定了端点的样式和所有从这个端点链接的线的样式）
和
（makeTarget也同样支持paintStyle样式）
但是我们得把稳，makeTarget不支持连接线的参数，它只支持闭幕点。所有的链接中的连接线的参数是当你在用链接手法时在源端点设置的。
3. Gradients渐变Canvas 和SVG 都支持渐变，VML不支持，jsPlumb用它自己的语法来定义渐变，来适用于SVG 和Canvas 之间不同的语法。
有两种类型的渐变可用：
(Linear) 线条渐变：彩色线条都在同一个方向
(radial) 半径的，光芒似的渐变：有彩色圆圈组成，有这个圈到那个圈的样式。
由于他们的基本样式不同，jsPlumb仅为连接线供应了Linear(第一种)渐变，但为端点供应了两种办法。
线条渐变：
要在链接中利用渐变，你须要供应一个渐变的工具，例如：
这里我们有个从win2到win3的连接线，宽度15px;颜色是从绿色到赤色的渐变。
把稳这地方的渐变工具和stops列表，渐变工具里面的颜色梯度可以是任意数值，每中颜色梯度包含两个值[position,color]，position值得范围必须在0到1之间，数值类型是decimal，表示该种颜色开始的位置，颜色的有效值和strokeStyle是一样的。
Stops列表可以包含任意个数，下面的例子表示颜色从红-蓝-绿-蓝-红
如果你利用VML，jsPlumb将会忽略你的渐变指令，以是最好的做法是，你须要单独指定strokeStyle ，由于默认情形下，如果不支持gradient时，jsPlumb就会返回利用利用gradient的基本样式strokeStyle ，如果你没供应strokeStyle ，则默认都是玄色的， 以是最好还是供应strokeStyle 样式，例如：
端点渐变
端点的渐变样式语法和连接线的语法是一样的，你指定端点的渐变样式要么放在endPoint的工具设置里面，要么放在连接线定义时，不同端点的定义数组里面，并且，该信息适用于您正在创建的须要拖拽的端点定义。
看下面示例：
只有Dot和Rectangle 类型的端点支持，图片端点时不支持的，当然在VML中也不支持。
Dot示例：
显示一个端点，颜色渐变从最外端开始，端点的渐变须要的数据显然会比线条渐变多，在一个线条的渐变中，我们只须要从一个点移动到下个点即可，但是在端点的渐变中，我们须要从一个圈移动到另一个圈，默认情形下，jsPlumb会利用一个相同半径的圈。
并且offset和innerRadius也可以利用百分数来替代。
五．杂项1. CSS样式jsPlumb在它创建的每个组件时都会附加一些类，这些类名都是公开的，并且如果你须要的话你可以将他们重写，详细如下：
你可以利用这些样式类来使你的界面达到最佳效果。
2. Animation动画jsPlumb供应动画的方法，它是将你利用的根本库中的动画引擎进行封装，并且供应一个回调函数，以供jsPlumb在每一步进行跟踪，你可以自己自己定义这个回调函数，非常方便：
回调函数参数阐明：
el:元素id,或者元素的工具
properties:动画的属性，例如持续事宜等
options:动画选项，例如回调函数等。
3. 找到链接信息jsPlumb供应了一个完备公用的方法，getConections—来找到关于当前管理的链接，在用这个方法之前，你须要理解jsPlumb中scope观点，
检索单个范围的链接获取jsPlumb默认的“scope”中的链接获取“scope”为myScope中的链接更进一步的过滤getConnection方法供应含js工具的方法来筛选，可有如下三个工具：
scope:您要检索的链接所属范围(域)
source:返回的链接限定为那些有此源id的链接
target: 返回的链接限定为那些有此目标端点id的链接
供应的这三个参数，可以作为工具，也可作为字符串来通报
（返回的是在这两个scope中的连接）
返回值是：
下面列出不同的获取示例：
获取所有链接获取默认scope的链接获取指定scope的链接获取指定的多个scope的链接，返回返回指定source的链接返回指定target的链接返回指定source和指定target的链接三个参数并用六．事宜jsPlumb支持绑定到不同的事宜 ，有连接线、端点、覆盖物和jsPlumb本身的事宜 ，如果须要绑定时间，你须要利用一个方法：jsPlumb.bing(object,event,callback)，但是这除了overlay的事宜，由于overlay的事宜可以直接在overlay定义时直接绑定overlay的事宜监听，
1. jsPlumb事宜jsPlumbConnection—当设定一个连接时会关照，这个新连接工具将会作为回调函数参数通报
jsPlumbConnectionDetached—当一个链接被取消时关照，这个被取消的链接工具会被作为回调函数的参数通报
Click—获取链接的点击事宜，回调函数将通报点击的链接和鼠标事宜
Dbclick—双击，其他同上
Endpointclick—当端点点击事宜时关照，端点工具和鼠标事宜是回调函数的参数
endPointDbClick—双击，其他同上
2. Conection事宜Click—当一个链接被点击时触发，回调函数通报的参数是鼠标事宜和connection工具
Dbclick—双击，其他同上
Mouseenter—当鼠标进入链接的path触发，回调函数通报的也是鼠标事宜和connection工具
mouseExit—当鼠标从connection的path离开时触发，其他同上
3. Endpoint事宜Click-- 端点被点击时触发，回调函数通报的参数有鼠标事宜和端点工具
Dbclick—双击事宜时触发，其他同上
mouseEnter—鼠标进入端点时触发，回调函数通报的也是鼠标事宜和端点工具
mouseExit—当鼠标从端点中离开时触发，回调函数通报的参数也是鼠标事宜和端点工具
4. Overlay事宜Overlay的事宜监听注册有点不同，你将他们作为overlay的布局函数参数，这是由于你从来不会对overlay有真正的动作，下面的示例看看怎么样注册一个overlay的事宜：
jsPlumb.connect({
source:"el1",
target:"el2",
overlays:[
[ "Label", {
events:{
click:function(labelOverlay, originalEvent) { alert("you clicked on the label overlay for this connection :" + labelOverlay.connection) }
}
}]
]
});
七．示例1. Connection示例jsPlumb.connect示例、拖拽的connection示例拜会文档http://jsplumb.org/doc/usage.html
2. 利用工具函数1. 分离win5和其他元素的所有链接
2. 隐蔽win5的所有链接
3. 隐蔽win5链接的所有链接和闭幕点
4. 显示所有win5的链接
5. 显示win5的所有链接和终点，请把稳这个示例中的两个参数，如果它决定这个链接中的其他端点也是不可见的，jsplumb也不会使这个链接显现。
切换win5的链接线的显示或隐蔽
重画win5的所有链接重画win5,win6,win11的所有链接重画所有链接取消所有链接删除从win1出发到给定闭幕点中间的所有链接和闭幕点删除和win1链接的所有端点和之间的链接删除jsplumb实例管理的端点，删除他们之间的链接，这是和jsplumb.reset()方法相同的地方，但它不会打消韶光监听列表。删除指定的端点和它的连接线删除所有的端点、端点、并且打消事宜监听列表，返回jsplumb实例的初始化形态设置端点不可拖动，不管若何发出指令设置两个端点不可以拖动：设置默认情形下是否可拖动元素，默认情形下是可以拖动的设置win1可拖动设置win1和win2都可拖动
设置所有包含class=”windows”的元素可拖动（jQuery下，其他js库下面不列出）
八．开拓目前jQuery-jsplumb-1.3.3-all.js包含了下面的js库凑集：
jsPlumb-1.3.3.js
jsPlumb-defaults-1.3.3.js
jsPlumb-renderers-canvas-1.3.3.js
jsPlumb-renderers-svg-1.3.3.js
jsPlumb-renderers-vml-1.3.3.js
jquery.jsPlumb-1.3.3.js
jsBezier-0.2-min.js
