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"
                    },
                    overlays: [
                        "Arrow"
                    ]
                };
                instance.registerConnectionType("basic", basicType);

                // this is the paint style for the connecting lines..
                var connectorPaintStyle = {
                    strokeWidth: 2,
                    stroke: "#61B7CF",
                    joinstyle: "round",
                    outlineStroke: "white",
                    outlineWidth: 2
                },
                // .. and this is the hover style.
                connectorHoverStyle = {
                    strokeWidth: 3,
                    stroke: "#216477",
                    outlineWidth: 5,
                    outlineStroke: "white"
                },
                endpointHoverStyle = {
                    fill: "#216477",
                    stroke: "#216477"
                },
                // the definition of source endpoints (the small blue ones)
                sourceEndpoint = {
                    endpoint: "Dot",
                    paintStyle: {
                        stroke: "#7AB02C",
                        fill: "transparent",
                        radius: 7,
                        strokeWidth: 1
                    },
                    isSource: true,
                    connector: ["Flowchart", {
                        stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true
                    }],
                    connectorStyle: connectorPaintStyle,
                    hoverPaintStyle: endpointHoverStyle,
                    connectorHoverStyle: connectorHoverStyle,
                    dragOptions: {},
                    overlays: [
                        ["Label", {
                            location: [0.5, 1.5],
                            label: "Drag",
                            cssClass: "endpointSourceLabel",
                            visible: false
                        }]
                    ]
                },
                // the definition of target endpoints (will appear when the user drags a connection)
                targetEndpoint = {
                    endpoint: "Dot",
                    paintStyle: {
        .........完整代码请登录后点击上方下载按钮下载查看