立即注册
 找回密码
 立即注册

聚金客智能客服实验室

搜索
热搜: 活动 交友 discuz
手机版
专享特惠酒店
实验室qq群:

548425117

jsplumb--工作流html5库 [复制链接] qrcode

查看: 1697 | 回复: 0

admin
发表于: 2019-4-9 14:05:55 | 显示全部楼层

jsplumb
一、简介:
jsplumb是jquery的一个插件,它能够让你用动态或静态的链接来连接html界面上的元素,并且从1.10版本开始,提供用鼠标拖动来连接。jsPlumb允许您使用SVG,Canvas或者VML链接屏幕上的元素,这些取决于您使用的浏览器的能力。
主要包含以下模块:Anchor、Connector、Endpoint、 Overlay、Style、css样式、Events

二、Anchor:


  • Static Anchors(静态锚):

    9个默认位置(元素四角,四边中点,元素中心)   




Top TopRight Right BottomRight Bottom BottomLeft Left TopLeft Center[color=rgba(140, 140, 140, 0.8)]复制代码


    每一个都是基于数组的包装器
    [x,y,dx,dy],其中x和y是[0,1]指定锚点位置的区间中坐标。dx和dy指定了锚点的方向,可以具有值0,-1,1


    锚点偏移--除了位置和方向,还提供两个参数来定义与给定位置的像素偏移量


  • Dynamic Anchors(动态锚):创建动态锚点没有特殊语法,只需提供一系列单独的静态锚点规范



    默认动态锚点:jsPlumb提供一个动态锚AutoDefault,从Top,Right,Left,Bottom中选择


  • Perimeter Anchors(周边锚):这些事动态锚的一种形式,其中锚位置是从某个给定形状的周长中选择的,

    jsPlumb支持6种形状:Circle Ellipse Triangle Diamond Rectangle Square


  • Continuous Anchors(连续锚)

    Continuous:其位置由jsPlumb根据Connection中元素之间的方向计算。默认情况下,连续锚点将从其所在元素的所有四个面中选择点。可以使用faces来控制该行为(允许的值有top left right bottom)


  • 将css类与Anchor关联:
    数组语法的第7个值表示CSS类的字符串。并应用于endpoint,element。默认前缀endpointAnchorClass为jtk-endpoint-anchor-



例如:[0.5,0,0,-1,0,0,’top’] ⇒jtk-endpoint-anchor-top


三、 Connector:连接器是实际连接UI的线。
jsPlumb有4个连接器实现-一条直线,一个贝塞尔曲线,流程图和状态机。默认连接器是贝塞尔曲线


  • Bezier(贝塞尔曲线):贝塞尔曲线提供了两个端点之间的立方体路径,它支持一个构造函数参数
  • Straight(直线):直连绘制直线的两个端点之间,没有构造函数的参数支持,使用参数endpointStyle定义连接样式或添加端点时定义连接线样式
  • Flowchart(流程图):这种类型的连接器,绘制一系列垂直或水平段组成的连接-经典的流程图,支持一个单一的构造函数参数
  • State Machine(状态机):这是最小长度,以像素为单位,从端点发出的初始存根。词参数是可选的,默认为30像素


四、Endpoint:一个端点的UI组件,标志着一个锚的位置,是连接器连接的点
jsPlumb有三个端点实现,点、矩形和圆形,你可以指定端点的属性,(connect、addEndpoint、makeTarget)


  • Dot(点端点):此端点在屏幕上画一个点 半径--可选,默认10像素
  • Rectangle(矩形端点):绘制一个矩形,宽度- 可选,默认20像素,高度-可选,默认20像素
  • Image(图片端点):从一个给定的URL绘制图像 SRC-必须






五、Overlay:覆盖界面上的链接元素,如标签或箭头,
jsplumb有4个默认值:

  • Arrow:客配置的箭头,放在两个点的连接线上,你可以控制箭头的长度和宽度,转折点:是一个折回点,方向点(允许是1和-1,意味着是点的链接方向)
  • Label:在点的连接器上的可配置的标签
  • plainArrow:一个三角形箭头,没有这会点
  • diamond:钻石

显示/隐藏覆盖:setVisible来控制Arrow的显示或隐藏,或者showOverlay(ID),或者hideOverlay(ID)

六、样式:【基本样式、悬浮样式】

样式参数列表:这是设置paintStyle的完整参数列表。但是请注意,fillStyle参数在connector中会被忽略,strokeStyle在endOptions中会被忽略,此外,如果你使用jsPlumb.connect创建链接,并且为指定任何endOption样式,endOptions中的fillStyle样式会被指定为连接线的strokeStyle

fillStyle、strokeStyle、outlineColor可以使用任何有效的css3语法
fillStyle:定义endPoint的颜色,例如rgba(100,100,100,50),'blue','#456','#993355',rgb(34,56,78)
strokeStyle:连接器的颜色
lineWidth:连接线的宽度
outlineWidth:连接器或端点的轮廓宽度
Dashstyle、THE VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin只适用于VML或SVG

悬浮样式:当鼠标悬浮在这些元素上时,连接线和终结点都支持鼠标悬浮样式。他们的样式需要被精确的指定,指定的方式和我们在上面讨论的方式一致,悬浮样式也一样继承了基本样式,这是因为当鼠标移上去的时候,您通常只希望更改颜色,或者轮廓颜色,所以你只需要指定需要改变的值即可,这样避免了你需要定义重复的样式,鼠标炫富样式的参数名知识需要在正常样式前加个‘hover’即可

七、css样式:
jsplumb在它创建每个组件时都会附加一些类,这些类名都是公开的,并且如果你需要的话你可以将他们重写,具体如下





Connector --> _jsPlumb_connector         connectorClassEndpoint   -->  _jsPlumb_endpoint        endpointClassOverlay     -->  _jsPlumb_overlay        overlayClass[color=rgba(140, 140, 140, 0.8)]复制代码

八、事件:jsPlumb.bind(event,callback)

8.1、jsPlumb事件:

  • connection(info,originalEvent) 通知已建立连接 jsPlumb.connect导致此事件被触发
  • connectionDetached(info,originalEvent) 通知连接已分离
  • connectionMoved(info,originalEvent) 通知已将现有连接的源或目标端点拖动到某个新位置。
  • connectionAborted(connection,originalEvent) 在连接到端点或目标元素之前拖动新连接但被放弃时触发
  • connectionDrag(connection) 通知正在拖动现有连接,请注意,当此事件触发全新的connection时,connection的目标是jsPlumb用于拖动的瞬态元素,并且随后在建立或终止connection时将从DOM中删除。
  • connectionDragStop(connection) 通知连接拖动已停止,仅针对现有connection触发此操作
  • click(connection,originalEvent) 单击
  • dbclick(connection,originalEvent) 双击
  • endpointClick(endpoint,originalEvent) 单击端点
  • endpointDbClick(endpoint,originalEvent) 双击端点
  • contextmenu(component,originalEvent) 右键单击某个给定组件
  • beforeDrop(info) 删除新连接或现有连接时会触发此事件
  • beforeDetach(connection) 无论出于何种原因,即将分离connection时也会触发此事件,你的回调函数将传递给用户刚刚分离的connection,从此拦截器返回false会中止connection分离
  • zoom(value) 缩放

8.2、Connection Events:要绑定到connection上的事件
click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup





var connection = jsPlumb.connect({source:’el1’,target:'el2'});connection.bind(‘click’,function(connection,originalEvent){});[color=rgba(140, 140, 140, 0.8)]复制代码

8.3、Endpoint Events:要绑定到endpoint上的事件
click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup

maxConnections(info,originalEvent) 通知用户尝试在已具有最大连接数的Endpoint上删除连接




var endPoint = jsPlumb.addEndpoint(‘el’,{someOptions});Endpoint.bind(‘click’,function(endpoint,originalEvent){});[color=rgba(140, 140, 140, 0.8)]复制代码
8.4、Overlay Events:在Overlay上注册事件侦听器是一个稍微不同的过程 –您将它们作为
Overlay构造函数的参数提供,这是因为你从未真正对Overlay对象采取行动





jsPlumb.connect({    source:’el1’,    target:’el2’,    Overlays:[        [        ‘Label’,{Events:{click:function(){}}}        ]    ]}); [color=rgba(140, 140, 140, 0.8)]复制代码
解除绑定事件:unbind


跳转到指定楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题:8 | 回复:10

快速回复 返回顶部 返回列表