jsplumb流程器使用2
jsplumb默认注册在浏览器的窗口,为整个页面提供静态实例
1. 单独实例化的方法:
var firstInstance = jsPlumb.getInstance();
内部传入可定义对象 全局定义对象方法:
jsPlumb.importDefaults({···})
2. 每次连线,都会导致相关联元素重绘,加载大量数据时 比如执行批量导入切换视图 可以先暂停绘图:
jsPlumb.setSuspendDrawing(true); jsPlumb.setSuspendDrawing(false,true);
这里的第二个参数的true 会使整个jsplumb立即重绘
也可以使用batch batch 抽象出暂停绘图,执行某些操作,然后重新启用绘图的模式
jsPlumb.batch(fn,[doNotRepaintAfterwards]);
1.7.3版本前方法名:doWhileSuspended
3. 本行代码官方文档很模糊 我并不是很清楚放在这里有什么用
jsPlumb.fire('jsPlumbDemoLoaded', instance)
4. 生成新节点 删除旧节点
jsPlumb.setId(el,newId)
jsPlumb.setIdChanged(oldId,newId)
5. 拖动方法
firstInstance.draggable("some element");
6. 默认配置
Anchor : "BottomCenter",//端点的定位点的位置声明(锚点):left,top,bottom等
Anchors : [ null, null ],//多个锚点的位置声明
ConnectionsDetachable : true,//连接是否可以使用鼠标默认分离
ConnectionOverlays : [],//附加到每个连接的默认重叠
Connector : "Bezier",//要使用的默认连接器的类型:折线,流程等
Container : null,//设置父级的元素,一个容器
DoNotThrowErrors : false,//如果请求不存在的Anchor,Endpoint或Connector,是否会抛出
DragOptions : { },//用于配置拖拽元素的参数
DropOptions : { },//用于配置元素的drop行为的参数
Endpoint : "Dot",//端点(锚点)的样式声明(Dot)
Endpoints : [ null, null ],//多个端点的样式声明(Dot)
EndpointOverlays : [ ],//端点的重叠
EndpointStyle : { fill : "#456" },//端点的css样式声明
EndpointStyles : [ null, null ],//同上
EndpointHoverStyle : null,//鼠标经过样式
EndpointHoverStyles : [ null, null ],//同上
HoverPaintStyle : null,//鼠标经过线的样式
LabelStyle : { color : "black" },//标签的默认样式。
LogEnabled : false,//是否打开jsPlumb的内部日志记录
Overlays : [ ],//重叠
MaxConnections : 1,//最大连接数
PaintStyle : { lineWidth : 8, stroke : "#456" },//连线样式
ReattachConnections : false,//是否重新连接使用鼠标分离的线
RenderMode : "svg",//默认渲染模式
Scope : "jsPlumb_DefaultScope"//范围,标识
jsplumb流程器使用2的更多相关文章
- jsplumb流程器使用3--connector
jsPlumb.getInstance内可以放一个对象 对象内可选地提供默认值: connector: 连接器(直线--a straight line, 贝塞尔曲线--a Bezier curv ...
- vue内引入jsPlumb流程控制器(一)
1. npm i jsplumb --save 注:jsplumb要全小写 2. 在main.js内 加: import jsPlumb from 'jsplumb' Vue.prototype.$j ...
- angular流程引擎集成
工作流在oa和erp中十分常见,现有成熟的工作流通常是在客户端实现的,web实现工作流的案例十分稀少.要实现web工作流必须要有强大的流程设计器,这里为大家介绍一款基于angular的流程控件,其功能 ...
- 关闭 Visual Studio 2013 的 Browser Link 功能
最近公司弄新项目需要用 MVC,就把 IDE 升级到了 Visual Studio 2013,在开发的时候发现有好多请求一个本地49925的端口 . 很奇怪,一开始以为是 Visual Studio ...
- Visual Studio 2013 Web开发、新增功能:“Browser Link”
微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...
- [bug]Syntax error, unrecognized expression: input#ctl00$ContentPlaceHolder1$Pager_input
1.在ie10上浏览页面的时候,突然发现在使用Aspnetpager的页面会有一个bug. 2. 3.查了很多解决方案,最后将vs2013中, 将该勾取消,再次浏览,你会发现就正常了,虽然该功能很强大 ...
- Visual Studio 2013 Web开发、新增功能:“Browser Link”
微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...
- Visual Studio 2013 的 Browser Link 功能
Visual Studio 2013 的 Browser Link 功能 最近公司弄新项目需要用 MVC,就把 IDE 升级到了 Visual Studio 2013,在开发的时候发现有好多请求一个本 ...
- Visual Studio 2013中的“Browser Link”
前几天,参加了,VS13的新特性的讲座,回来便试了一下, 默认Html会引用如下脚本: <!-- Visual Studio Browser Link --> <script typ ...
随机推荐
- Web安全颜色
Web安全色产生的原因 不同的平台(Mac.PC等)有不同的调色板,不同的浏览器也有自己的调色板.这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别 ...
- TCP/IP协议分层详解
TCP/IP 和 ISO/OSI ISO/OSI模型,即开放式通信系统互联参考模型(Open System Interconnection Reference Model),是国际标准化组织(ISO) ...
- C++中类的多继承
在写这一主题的文章之前,在网上找到一篇很非常好的文章C++之继承与多态.就没有必要做重复造轮子的事件了,那就从这篇文章开始吧! 在c++中一个类可以从多个基类中派生(即可以有多个父类),这就是多继承. ...
- docker的完整解决方案2
这个解决方案很简单 使用docker自带的swarm 首先初始化集群 docker swarm init 然后其余节点加入集群,这个就不说,太简单了 集群初始化后,可以查看下集群状态 docker n ...
- react native 中es6语法解析
react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 var { StyleSheet, Text, View } = React; 这句代码是ES6 中新增的 ...
- Ajax核心技术代码
/* @author weichen */ var xhr = ''; function Ajax() { if(window.XMLHttpRequest) { var xhr = new XMLH ...
- Python读写文件基础.py
基本函数 定义 python内置了open()函数来操作文件,open()函数的定义为: open(file, mode='r', buffering=-1, encoding=None, error ...
- hexo发表博文的方式
本图片转自:简书:https://www.jianshu.com/p/a52b68794a6b 转自github:https://blog.minhow.com
- IT蓝豹强烈推荐:符合1-2年工作经验,开发中的难点及相关优化:
IT蓝豹强烈推荐:符合1-2年工作经验,开发中的难点及相关优化: IT蓝豹 ------------------> sqlite数据库版本升级 1.sqlite升级步骤: 1.自己写一个类继承自 ...
- Codeforces Round #499 (Div. 2) D. Rocket题解
题目: http://codeforces.com/contest/1011/problem/D This is an interactive problem. Natasha is going to ...