Loading

jsPlumb更种示例说明

PERIMETER ANCHORS

这些是锚,跟踪一些形状的周长。

HIERARCHICAL CHART(分层信息示范)

这是一个简单的使用jsplumb显示分层信息示范。 连接器有一个paintstyle的`灰色`和指定半径9端点。每个连接都有一个箭头指示的方向和覆盖,涂料本身的橙色在鼠标悬停。 Bezier曲线的使用在本演示中有一个“后天”50

SOURCES AND TARGETS(源和目标)

将连接从蓝色元素的任何绿色的。你也可以将现有的连接从一个绿色元素到另一个连接,默认情况下,可拆卸(这种行为可以被重写)。 该makesource和maketargetfunctions提供设置你的UI支持拖动连接-一个替代手段,这里我们将整个元素的源和目标,只有建立连接时,我们为他们指定的端点。 蓝色的元件被配置为连接源(而不是拖动),一个可能的锚的位置。 该`禁用`链接是排除被拖动源的`滤波器`参数对makesource调用使用。 绿色元素被配置为连接的目标,一个`顶`锚,并拖动

DYNAMIC ANCHORS(锚变化的位置)

这是一个演示锚变化的位置在一个连接上的其他元素的位置依赖。每个连接都装饰有一个钻石覆盖,中途沿连接器。 你可以拖动端点之间的新联系。 支持无限数量的连接端点。

ANIMATION

这是一个演示jsplumb的动画的方法。 拖橙色圆点来创建连接。 点击或附近的蓝点让他们往那个方向。 添加一个盘移除所有连接

KITCHEN SINK

jsplumb提供一种方式连接在一个UI元素。 该页包含你可以连接各种类型的例子。 还有一些其他的示威活动,提供一个更关注的jsplumb的功能——一些特定的部分选择一个从下拉或循环下/上。 jsplumb需要一个jQuery,MooTools或者YUI3。为一个更详细的讨论见文件要求。

FLOWCHART

节点连接图连接器。 将鼠标悬停在连接来突出他们,点击删除。 拖到新的连接点从空心实心点。你也可以拖动连接从他们的源/目标的其他来源/目标,或回到自己。 默认情况下,流程连接器有方形的角落,但通过设置的cornerRadius参数,我们已经在这里,你可以得到圆角。

STATE MACHINE

节点连接的状态机连接器。 端点处有连续的锚,这是锚的位置是基于连接的所有其他元素的位置计算,并保证每连接一个独特的端点。 单击并拖动新连接的每个元素的橙色的div;用户界面中的主要元素是配置为连接目标。你可以拖拽一个这些div到父元素创建了一个“环”连接。每个元素最多支持5个连接。 点击一个连接删除它。

DRAG AND DROP

从任何端点到对其他元素的相似的端点拖动创建连接。 蓝色的端点使用beforedrop拦截。这使您能够拦截新的连接,并决定是否要允许它进行。他们还配置为自动重新连接如果你拖动连接,将它的背景。 黄色的端点配置为使用beforedetach拦截,这一程序的方法来覆盖一个连接断开了。黄色的连接都涂上直连接器 绿色的端点支持多达三个的连接。一旦一个绿色的端点三连接,当你拖动它你可以拖上最古老的连接端点。 清晰的管道

posted @ 2014-07-10 14:22  Sam Xiao  阅读(5431)  评论(0)    收藏  举报