JQuery_JavaScript___plug__jsPlumb.js UI连线插件使用

本文主要是介绍JQuery_JavaScript___plug__jsPlumb.js UI连线插件使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


GitHub地址:https://github.com/xiaohulu/util_xiaohulu/tree/master/web/plug_in/jsPlumb_

所需三个js文件:




效果图




代码:


<!DOCTYPE html>
<html><head><script src="jsPlumb_files/jquery-1.9.0.js"></script><script src="jsPlumb_files/jquery-ui-1.9.2-min.js"></script><script src="jsPlumb_files/jquery.jsPlumb-1.4.0-all.js"></script><title>jsPlumb_demo</title><meta charset="UTF-8"><style type="text/css">/**当拖动一个连接点时,可连接的连接点会自动使用该css**/.dragActive {border: 2px dotted orange;}/**当拖动一个连接点到可连接的点时,该点会自动使用该css**/.dropHover {border: 1px dotted red;}.item {border: 1px solid black;background-color: #ddddff;width: 100px;height: 100px;position: absolute;}#state1 {left: 100px;top: 100px;}#state2 {left: 350px;top: 150px;}#state3 {left: 100px;top: 350px;}#state4 {left: 300px;top: 350px;}</style><script>//初始化jsPlumb.ready(function () {//首先,我们给jsPlumb设一些默认值,然后声明一个exampleDropOptions变量。jsPlumb.importDefaults({DragOptions: { cursor: 'pointer'},	//拖动时鼠标停留在该元素上显示指针,通过css控制PaintStyle: { strokeStyle: '#666' },//元素的默认颜色EndpointStyle: { width: 20, height: 16, strokeStyle: '#567567' },//连接点的默认颜色Endpoint: [ "Dot", { radius: 5 } ],//连接点的默认形状Connector: [ "Bezier", { curviness: 150 } ],Anchors: [ "TopCenter", "BottomCenter" ],//连接点的默认位置ConnectionOverlays: [//连接覆盖图["Arrow", {location: 1,id: "arrow",length: 14,foldback: 1}],["Label", {location: 0.5,id: "label",cssClass: "aLabel"}]]});var exampleDropOptions = {hoverClass: "dropHover",//释放时指定鼠标停留在该元素上使用的css classactiveClass: "dragActive"//可拖动到的元素使用的css class};// 绑定到连接/ connectionDetached事件,和更新的列表在屏幕上的连接。jsPlumb.bind("connection", function (info, originalEvent) {updateConnections(info.connection);});jsPlumb.bind("connectionDetached", function (info, originalEvent) {updateConnections(info.connection, true);});function updateConnections(info) {alert("连接线ID:" + info.id + "\n连接线sourceID:" + info.sourceId + "\n连接线targetID:" + info.targetId);alert(info.endpoints[0].getUuid().substr(info.endpoints[0].getUuid().indexOf('-') + 1));}//添加jsPlumb连接点var color1 = "#316b31";var exampleEndpoint1 = {endpoint: ["Dot", { radius: 5 }],//设置连接点的形状为圆形paintStyle: { fillStyle: color1 },//设置连接点的颜色isSource: true,	//是否可以拖动(作为连线起点)scope: "green dot",//连接点的标识符,只有标识符相同的连接点才能连接connectorStyle: { strokeStyle: color1, lineWidth: 6 },//连线颜色、粗细connector: ["Bezier", { curviness: 10 } ],//设置连线为贝塞尔曲线maxConnections: 1,//设置连接点最多可以连接几条线isTarget: true,	//是否可以放置(作为连线终点)dropOptions: exampleDropOptions//设置放置相关的css};var color2 = "rgba(229,219,61,0.5)";var exampleEndpoint2 = {endpoint: "Rectangle",	//设置连接点的形状为矩形paintStyle: {//设置连接点的大小、颜色、透明度width: 25,height: 21,fillStyle: "red",opacity: 0.5},anchor: "BottomLeft",	//设置连接点的位置,左下角isSource: true, //是否可以拖动(作为连线起点)scope: 'yellow dot',	//连接点的标识符,只有标识符相同的连接点才能连接connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细//connector: "Straight",	//设置连线为直线connector: "Flowchart",//设置为流程图线isTarget: true,//是否可以放置(作为连线终点)maxConnections: 3,//设置连接点最多可以连接几条线  [-1为无限制]dropOptions: exampleDropOptions,//设置放置相关的cssbeforeDetach: function (conn) {	//绑定一个函数,在连线前弹出确认框return confirm("断开连接?");},onMaxConnections: function (info) {//绑定一个函数,当到达最大连接个数时弹出提示框alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);}};var exampleEndpoint3 = {endpoint: "Rectangle",	//设置连接点的形状为矩形paintStyle: {//设置连接点的大小、颜色、透明度width: 25,height: 21,fillStyle: "blue",opacity: 0.5},anchor: "BottomLeft",	//设置连接点的位置,左下角isSource: true, //是否可以拖动(作为连线起点)scope: 'blue dot',	//连接点的标识符,只有标识符相同的连接点才能连接connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细//connector: "Straight",	//设置连线为直线connector: "Flowchart",//设置为流程图线isTarget: true,//是否可以放置(作为连线终点)maxConnections: -1,//设置连接点最多可以连接几条线  [-1为无限制]dropOptions: exampleDropOptions,//设置放置相关的cssbeforeDetach: function (conn) {	//绑定一个函数,在连线前弹出确认框return confirm("断开连接?");},onMaxConnections: function (info) {//绑定一个函数,当到达最大连接个数时弹出提示框alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);}};//将连接点绑定到html元素上var anchors = [[1, 0.2, 1, 0],[0.8, 1, 0, 1],[0, 0.8, -1, 0],[0.2, 0, 0, -1]],maxConnectionsCallback = function (info) {alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);};var e1 = jsPlumb.addEndpoint("state2", { anchor: "LeftMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数jsPlumb.addEndpoint("state1", exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上jsPlumb.addEndpoint("state3", exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上jsPlumb.addEndpoint("state1", {anchor: anchors}, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1的元素上,指定活动连接点jsPlumb.addEndpoint("state3", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上,指定活动连接点jsPlumb.addEndpoint("state4", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上,指定活动连接点//设置连接线jsPlumb.connect({source: "state3",target: "state2"});});</script>
</head><body>
//html部分仅声明三个div,注意,jsPlumb通过id来识别html元素,因此如果要使用jsPlumb连线必须声明id。
<div id="state1" class="item">state1</div>
<div id="state2" class="item">state2</div>
<div id="state3" class="item">state3</div><div id="state4" class="item">state4</div></body>
</html>


后续研究....待更新...


这篇关于JQuery_JavaScript___plug__jsPlumb.js UI连线插件使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1027180

相关文章

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空