【揭秘jQuery.jsPlumb】轻松上手可视化流程图搭建教程

日期:

最佳答案

简介

jQuery.jsPlumb是一个基于jQuery的库，它供给了一套API，使得开辟者可能在网页上便利地创建跟管理连接线。jsPlumb特别合适于构建流程图、数据流图等可视化图表，支撑拖放操纵，可能处理节点之间的交互，经由过程线的连接来表示它们之间的关联性。本文将具体介绍怎样利用jQuery.jsPlumb搭建可视化流程图。

情况筹备

在开端之前，请确保你曾经安装了以下软件：

1. 引入库

起首，在HTML文件的<head>标签中引入jQuery跟jsPlumb的JS文件。

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://jsplumbtoolkit.com/jsplumb-2.0.1-min.js"></script>
</head>

2. HTML构造

创建一个简单的HTML构造，用于展示流程图。

<div id="canvas" style="border: 1px solid #000;">
    <div id="node1" style="width: 100px; height: 100px; background-color: #f0f0f0; text-align: center; line-height: 100px;">节点1</div>
    <div id="node2" style="width: 100px; height: 100px; background-color: #f0f0f0; text-align: center; line-height: 100px; margin-top: 20px;">节点2</div>
</div>

3. 初始化jsPlumb

在JavaScript中创建jsPlumb实例，并停止设置。

$(document).ready(function() {
    var jsPlumb = jsPlumb.getInstance({
        DragOptions: { cursor: 'pointer', zIndex: 2000 },
        ConnectionOverlays: [
            [ "Arrow", { location: 1 } ]
        ],
        EndpointStyles: [
            { fillStyle: "#5c96bc", width: 10, height: 10 }
        ],
        HoverStyles: {
            fillStyle: "#5c96bc"
        },
        PaintStyle: { strokeWidth: 3, strokeStyle: "#5c96bc", joinstyle: "round", ghosting: true },
        ConnectionClass: "connection-class"
    });
});

4. 创建节点

利用jsPlumb的makeSource方法将节点转换为可连接的源。

$(document).ready(function() {
    jsPlumb.makeSource("node1", {
        filter: ".button",
        connector: ["Bezier", { curviness: 74 }],
        maxConnections: -1,
        isSource: true,
        endpoint: ["Dot", { radius: 7 }],
        paintStyle: { fillStyle: "#5c96bc" }
    });

    jsPlumb.makeSource("node2", {
        filter: ".button",
        connector: ["Bezier", { curviness: 74 }],
        maxConnections: -1,
        isSource: true,
        endpoint: ["Dot", { radius: 7 }],
        paintStyle: { fillStyle: "#5c96bc" }
    });
});

5. 创建连接

利用jsPlumb的connect方法创建节点之间的连接。

$(document).ready(function() {
    jsPlumb.connect({
        source: "node1",
        target: "node2",
        endpoint: "Dot",
        paintStyle: { strokeStyle: "#5c96bc", strokeWidth: 3 },
        connectorStyle: { strokeStyle: "#5c96bc", strokeWidth: 3 },
        hoverPaintStyle: { strokeStyle: "#5c96bc" }
    });
});

6. 完全示例

将上述代码整合到一个HTML文件中，并在浏览器中打开，你将看到一个简单的可视化流程图。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery.jsPlumb教程</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://jsplumbtoolkit.com/jsplumb-2.0.1-min.js"></script>
    <style>
        #canvas {
            border: 1px solid #000;
        }
        .button {
            width: 30px;
            height: 30px;
            background-color: #5c96bc;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="canvas">
        <div id="node1" style="width: 100px; height: 100px; background-color: #f0f0f0; text-align: center; line-height: 100px;">节点1</div>
        <div id="node2" style="width: 100px; height: 100px; background-color: #f0f0f0; text-align: center; line-height: 100px; margin-top: 20px;">节点2</div>
    </div>
    <script>
        $(document).ready(function() {
            var jsPlumb = jsPlumb.getInstance({
                DragOptions: { cursor: 'pointer', zIndex: 2000 },
                ConnectionOverlays: [
                    [ "Arrow", { location: 1 } ]
                ],
                EndpointStyles: [
                    { fillStyle: "#5c96bc", width: 10, height: 10 }
                ],
                HoverStyles: {
                    fillStyle: "#5c96bc"
                },
                PaintStyle: { strokeWidth: 3, strokeStyle: "#5c96bc", joinstyle: "round", ghosting: true },
                ConnectionClass: "connection-class"
            });

            jsPlumb.makeSource("node1", {
                filter: ".button",
                connector: ["Bezier", { curviness: 74 }],
                maxConnections: -1,
                isSource: true,
                endpoint: ["Dot", { radius: 7 }],
                paintStyle: { fillStyle: "#5c96bc" }
            });

            jsPlumb.makeSource("node2", {
                filter: ".button",
                connector: ["Bezier", { curviness: 74 }],
                maxConnections: -1,
                isSource: true,
                endpoint: ["Dot", { radius: 7 }],
                paintStyle: { fillStyle: "#5c96bc" }
            });

            jsPlumb.connect({
                source: "node1",
                target: "node2",
                endpoint: "Dot",
                paintStyle: { strokeStyle: "#5c96bc", strokeWidth: 3 },
                connectorStyle: { strokeStyle: "#5c96bc", strokeWidth: 3 },
                hoverPaintStyle: { strokeStyle: "#5c96bc" }
            });
        });
    </script>
</body>
</html>

总结

本文介绍了怎样利用jQuery.jsPlumb搭建可视化流程图。经由过程简单的步调跟代码示例，你可能轻松创建一个存在交互性的流程图。盼望这篇文章能帮助你疾速上手jQuery.jsPlumb。