jsPlumb流程图

最新推荐文章于 2024-06-16 09:33:57 发布

「已注销」

最新推荐文章于 2024-06-16 09:33:57 发布

阅读量930

点赞数

文章标签： jsPlumb-流程流程图 jsPlumb

本文链接：https://blog.csdn.net/u010926960/article/details/78463359

版权

本文介绍了如何利用jsPlumb库来构建流程图。通过jsPlumb.connect()方法可以实现连线，若不指定sourceEndpoint和targetEndpoint，连线的两端会自动生成并允许继续拖拽添加连接。

摘要由CSDN通过智能技术生成

jsPlumb流程图

@{
    ViewBag.Title = "Node";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script src="~/Content/js/jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" href="~/Content/js/jquery-ui/jquery-ui.min.css" />
<script src="~/Content/js/jquery-ui/jquery.jsPlumb-1.4.0-all.js"></script>
<script src="~/Content/js/Guid.js"></script>
<style>
    #node1 {
        left: 15px;
        top: 100px;
    }

    #node2 {
        left: 15px;
        top: 200px;
    }

    #node3 {
        left: 15px;
        top: 300px;
    }

    #node4 {
        left: 15px;
        top: 400px;
    }

    #left {
        border: 1px solid #00bfff;
        width: 200px;
        height: 750px;
        position: absolute;
    }

    #right {
        border: 1px solid #00bfff;
        width: 1024px;
        position: absolute;
        height: 750px;
        left: 215px;
    }
    .node {
        box-shadow: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        opacity: 0.8;
        filter: alpha(opacity=80);
        border: 1px solid #346789;
        width: 150px;
        /*line-height: 40px;*/
        text-align: center;
        z-index: 20;
        position: absolute;
        background-color: #eeeeef;
        color: black;
        padding: 10px;
        font-size: 9pt;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
    }
    .radius {
        border-radius: 25em;
    }
</style>
<div class="flow-container">
    <div id="left">
        <div class="node radius" id="node1"><span>开始</span></div>
        <div class="node" id="node2"><span>流程</span></div>
        <div class="node radius" id="node3"><span>结束</span