更新时间：2020-10-28 00:26:05
使用方法
一，需要引用的文件：
1 2 3 4 5 6 | <link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css"><link rel="stylesheet" type="text/css" href="./css/style.css"><script type="text/javascript" src="./js/jquery.jsPlumb.min.js"></script><script type="text/javascript" src="./js/index.js"></script> |
二、官方jsPlumb.js方法参考：
1 |
jsplumb 中文基础教程
jsplumb能干什么？
那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的！
基本概念
Souce 源节点
Target 目标节点
Anchor 锚点 锚点位于源节点或者目标节点上
Endpoint 端点 端点位于连线上
Connector 连接 或者也可以理解是连接线
Overlays 可以理解为在连接线上的文字或者箭头之类的东东
Anchors [todo]
锚点类型：
静态锚点
动态锚点
边缘锚点
固定锚点
Connectors [todo]
连线类型：
Bezier 贝塞尔曲线
Straight 直线
Flowchart 90度转角线
State Machine 状态机
Endpoints [todo]
端点类型:
Dot 圆点
Rectangle 矩形
Image 图像
Blank 空白
Overlays [todo]
Overlays可以理解为在连接线上的文字或者箭头之类的东东
Overlays类型
Arrow
Label
PlainArrow
Diamond
Custom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // 连线上overlay可以多个，// 每个overlay可以指定相对位置// label类型的overlay实际上可以在里面直接写html// jsPlumb.connect({ ... connectorOverlays: [ ['Arrow', { width: 10, length: 10, location: 1 }], ['Label', { label: '<button class="delete-node-btn">X</button>', cssClass: '', labelStyle: { color: 'red' }, events: { click: function (labelOverlay, originalEvent) { console.log('click on label overlay for :' + labelOverlay.component) console.log(labelOverlay) console.log(originalEvent) } } }] ]}); |
基础demos
连接两个节点
jsPlumb.ready方法和jquery的ready方法差不多的功能，jsPlumb.connect用于建立连线
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="margin-left:50px;"></div> </div> <script> /* global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Dot' }) }) </script> |
参数说明： jsPlumb.connect(config) return connection
| 参数 | 参数类型 | 是否必须 | 说明 |
|---|---|---|---|
| source | String,Object,Endpoint | 是 | 连线源的标识，可以是id, element, 或者Endpoint |
| target | String,Object,Endpoint | 是 | 连线目标的标识，可以是id, element, 或者Endpoint |
| endpoint | String | 可选 | 端点类型，形状 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： js AI贪吃蛇(原创)
- 下一个特效： HTML5消灭星星小游戏