jsplumb-js包.zip_jsplumb.js下载,jsplumb下载资源-CSDN下载

共829个文件

js：416个

gif：172个

html：105个

需积分: 50 8 浏览量 2021-06-24 15:27:59 上传评论收藏 5.58MB ZIP 举报

**JSPlumb库详解** JSPlumb是一款强大的JavaScript库，专为在Web页面上创建可视化连接和关系图而设计。这个“jsplumb-js包.zip”文件包含了JSPlumb库的相关资源，允许开发者轻松地在HTML元素之间绘制连接线，实现动态布局和交互功能。 ### JSPlumb的核心功能 1. **元素连接**：JSPlumb提供了一种简单的方法来在HTML DOM元素之间建立连接。这些连接可以是直线、曲线或其他自定义形状，可以根据需求调整样式，如颜色、宽度和箭头。 2. **动态布局**：库支持拖放功能，使得元素的位置可以被用户自由调整，同时保持连接线的正确性和美观性。当元素移动时，连接线会自动更新其路径。 3. **事件监听**：JSPlumb提供了丰富的事件系统，允许监听连接的创建、删除、移动等操作，方便进行交互逻辑的处理。 4. **多种端点类型**：JSPlumb支持多种端点（Endpoint）样式，可以是圆形、方形，也可以是图片，甚至可以自定义端点的HTML结构。 5. **可扩展性**：JSPlumb允许开发者通过插件系统扩展其功能，例如添加新的连接类型、端点样式或者自定义行为。 6. **兼容性**：JSPlumb兼容各种主流浏览器，包括Chrome、Firefox、Safari、Edge以及Internet Explorer 9及以上版本。 ### 使用JSPlumb的步骤 1. **引入库**：在HTML文件中引入JSPlumb的JavaScript和CSS文件，通常通过CDN链接或本地路径。 2. **初始化JSPlumb实例**：在DOM加载完成后，创建一个JSPlumb实例，并设置必要的配置项，如容器元素、默认样式等。 3. **定义端点**：为需要建立连接的元素添加端点，可以通过CSS选择器或直接操作DOM元素。 4. **创建连接**：使用JSPlumb提供的API创建连接，指定源端点、目标端点以及连接的样式。 5. **事件监听**：注册事件监听器，以响应用户的交互操作，如拖放、点击连接等。 6. **更新与删除**：根据需要，可以动态更新连接的属性，或者删除已存在的连接。 ### 示例代码 ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https:/npm/jsplumb@latest/dist/jsPlumb.min.css"> <script src="https:/npm/jsplumb@latest/dist/js/jsplumb.min.js"></script> </head> <body> <div id="element1" class="draggable">Element 1</div> <div id="element2" class="draggable">Element 2</div> <script> jsPlumb.ready(function() { var instance = jsPlumb.getInstance({ DragOptions: { cursor: 'pointer', zIndex: 2000 }, Endpoint: ['Dot', { radius: 7 }], Connection: { paintStyle: { stroke: 'blue', lineWidth: 4 } } }); instance.draggable(document.querySelectorAll('.draggable')); instance.addEndpoint('element1', { isSource: true }); instance.addEndpoint('element2', { isTarget: true }); instance.connect({ source: 'element1', target: 'element2' }); }); </script> </body> </html> ``` 以上代码展示了如何创建一个简单的JSPlumb应用，包括创建实例、定义端点、创建连接以及设置拖放功能。 ### 应用场景 JSPlumb广泛应用于流程图、网络拓扑图、思维导图、工作流管理、UI组件连接等多种场景，帮助开发者构建富交互性的Web应用。总结来说，JSPlumb是一个强大的JavaScript库，为创建和管理HTML元素之间的连接提供了便利。它具有高度的定制性和扩展性，适用于各种需要动态图形表示的项目。通过深入理解和实践，开发者可以充分利用JSPlumb构建出富有创新和实用性的可视化应用。

资源推荐

资源详情

资源评论

收起资源包目录

jsplumb-js包.zip （829个子文件）

build.bat 1KB

bootstrap-table-group-by.css 24KB

default.css 21KB

select2.min.css 15KB

fileinput.css 11KB

default-skin.css 11KB

layer.css 11KB

layim.css 11KB

fileinput.min.css 9KB

laydate.css 6KB

jquery.fancybox.css 5KB

jsPlumbToolkit-demo.css 5KB

photoswipe.css 4KB

datepicker.css 4KB

cropper.min.css 4KB

theme.css 4KB

style.css 4KB

theme.css 4KB

ImgCropping.css 3KB

laydate.css 3KB

fileUpload.css 3KB

qq.css 3KB

theme.min.css 3KB

layer.ext.css 3KB

theme.min.css 3KB

flowstep.css 3KB

theme.min.css 3KB

jquery.gritter.css 3KB

timePicker.css 2KB

simple.css 2KB

fileinput-rtl.css 2KB

fileinput-rtl.min.css 2KB

app.css 2KB

uploadify.css 1KB

Huploadify.css 1KB

iconfont.css 1015B

prettify.css 973B

bootstrap-table-reorder-rows.css 819B

bootstrap-table-fixed-columns.min.css 814B

bootstrap-table-fixed-columns.css 572B

webuploader.css 515B

tiki.css 441B

tiddlywiki.css 220B

WdatePicker.css 158B

iconfont.eot 7KB

static.gif 35KB

fancybox_loading@2x.gif 14KB

35.gif 13KB

42.gif 13KB

40.gif 10KB

18.gif 8KB

19.gif 8KB

11.gif 8KB

32.gif 7KB

fancybox_loading.gif 6KB

49.gif 6KB

29.gif 6KB

loading-0.gif 6KB

xubox_loading0.gif 6KB

97.gif 5KB

65.gif 5KB

31.gif 5KB

46.gif 5KB

57.gif 5KB

45.gif 5KB

8.gif 5KB

43.gif 4KB

33.gif 4KB

68.gif 4KB

26.gif 4KB

14.gif 4KB

7.gif 4KB

51.gif 4KB

10.gif 4KB

47.gif 4KB

72.gif 4KB

6.gif 3KB

94.gif 3KB

84.gif 3KB

41.gif 3KB

17.gif 3KB

9.gif 3KB

28.gif 3KB

50.gif 3KB

95.gif 3KB

22.gif 3KB

27.gif 3KB

67.gif 3KB

90.gif 3KB

loading-sm.gif 3KB

60.gif 3KB

loading.gif 3KB

58.gif 3KB

74.gif 2KB

25.gif 2KB

101.gif 2KB

xubox_loading3.gif 2KB

共 829 条

评论收藏

内容反馈

搬砖狗-小强

粉丝: 228

jsplumb-js包.zip

jsplumb.js

一个JsPlumb demo

jsplumb_1.7.10.zip

jsPlumb官方插件含demo（1.6.2）div拖拽连线

jsPlumb-1.4.0-all

jsPlumb在线流程设计器_demo版.rar

JsPlumb:所有 JsPlumb 示例

最新jsplumb

jsplumb_2.11.2.zip

jsplumb组织架构布局代码.zip

jsplumb组织架构流程图布局代码.zip

jsplumb.min.js

jsplumb_v1.zip_jsplumb_jsplumb拖拽生成_observev77_panloh_流程 拖拽

jsplumb实现表格字段连线_JsPlumb 动态_jsplumb_jsplumb.min.js_jsplumb拖拽生成

jsPlumb-1.7.4.zip

jsplumb-chinese-tutorial-master.zip

jsPlumb 各项参考范例.zip

基于VUE+JsPlumb的流程设计器源码.zip

jsPlumb-Bootstrap-JQuery:使用jsplumb插件，引导程序和jQuery创建流程图，使用jsplumb开源版本转换演示

JSplumb-jquery

jsPlumb完整实例

jsplumb中文

jsPlumb-2.2.3.js

jsPlumb 1.6.4

jsplumbtoolkit.rar

jQuery-UI和jsPlumb实现拖拽连接模型demo下载

web基于jquery拓扑图生成插件 jquery.jsPlumb-1.4.0-all.rar

51单片机入门 - 串口通信实验（模拟串口通信／多机通信实例）

大连软件园培训中心国际认证项目培训手册.doc

最新资源

jsplumb_v1.zip_jsplumb_jsplumb拖拽生成_observev77_panloh_流程拖拽