jsplumb实现流程图效果-html代码-BFW代码库

jsplumb实现流程图效果

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jsplumb&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            jsPlumb.ready(function () {

                var instance = window.jsp = jsPlumb.getInstance({
                    // default drag options
                    DragOptions: {
                        cursor: 'pointer', zIndex: 2000
                    },
                    // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
                    // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
                    ConnectionOverlays: [
                        ["Arrow", {
                            location: 1,
                            visible: true,
                            width: 11,
                            length: 11,
                            id: "ARROW",
                            events: {
                                click: function() {
                                    alert("you clicked on the arrow overlay")}
                            }
                        }],
                        ["Label", {
                            location: 0.1,
                            id: "label",
                            cssClass: "aLabel",
                            events: {
                                tap: function() {
                                    alert("hey");
                                }
                            }
                        }]
                    ],
                    Container: "canvas"
                });

                var basicType = {
                    connector: "StateMachine",
                    paintStyle: {
                        stroke: "red", strokeWidth: 4
                    },
                    hoverPaintStyle: {
                        stroke: "blue"
                    },
             .........完整代码请登录后点击上方下载按钮下载查看