jquery+flowchart实现svg简易流程图效果代码-html代码-BFW代码库

jquery+flowchart实现svg简易流程图效果代码

代码语言：html

所属分类：图表

代码描述：jquery+flowchart实现svg简易流程图效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
<style>
    /* --- basis elements styling --- */
html,
body {
  position: aboslute;
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  ovrflow: hidden;
  background-color: #dfdfdd;
}

#connections-layer {
    z-index: 1;
}

#nodes-layer {
    z-index: 2;
}

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.layer path {
    fill: none;
    stroke: #000;
    stroke-linecap: round;
    stroke-width: 5;
}

.layer .node {
  position: absolute;
}

/* --- custom nodes styling --- */
.simple-node {
  min-width: 70px;
  min-height: 20px;
  padding: 5px;
  border: 5px solid #000000;
  background-color: #ffffff;
  white-space: nowrap;
}

.expression-node {
  fill:red;
  stroke:black;
  stroke-width:5;
}

.decision-node {
  fill:yellow;
  stroke:black;
  stroke-width:5;
}

#node-actions-dialog {
  font-family: Verdana;
  font-size: 0.8em; 
  background-color: #ffffff;
  border: 2px solid #666666;
  height: 270px;
  left: 10%;
  overflow: hidden;
  position: absolute;
  top: 10px;
  width: 80%;
  z-index: 999;
  padding: 5px;
  -webkit-box-shadow: 4px 3px 14px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 3px 14px -3px rgba(0,0,0,0.75);
  box-shadow: 4px 3px 14px -3px rgba(0,0,0,0.75);
  display: none;
}

#node-actions-dialog .simple-node {
  width: 80px;
  margin: 5px;
  cursor: pointer;
}

#node-actions-dialog .expression-node,
#node-actions-dialog .decision-node {
  display: block;
  margin: 5px;
  cursor: pointer;
}

#node-actions-dialog button {
  cursor: pointer;
}
</style>
</head>

<body>

    <div id="node-actions-dialog">
        <p>Add child node:</p>
        <div>
            <div id="add-simple-node-action" class="simple-node">simple node</div>
            <svg id="add-expression-node-action" class="expression-node" width='100' height='50'><rect x='2' y='2' rx='10' ry='10' width='90' height='40' /></svg>
            <svg id="add-decision-node-action" class="decision-node" width='60' height='60'><polygon points='30,5 55,30 30,55 5,30' /></svg>
        </div>
        <p>or:</p>
        <button id="delete-node-action">Delete node</button>
        <button id="cancel-action">Cancel</button>
    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui.1.12.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.ui.touch-punch.js&.........完整代码请登录后点击上方下载按钮下载查看