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

jsplumb实现流程图效果

代码语言：html

所属分类：其他

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
			*{
				padding:0;
				margin:0;
				box-sizing: border-box;
			}
			#left{
				height:600px;
				width:200px;
				border:1px solid #000;
				float: left;
				margin-left:100px;
				padding:0 10px;
				position:relative;
			}
			#main{
				height:500px;
				width:800px;
				border:1px solid #000;
				float: left;
				margin-left:100px;
				position:relative;
			}
			.item{
				background: #CCFFFF;
				height:80px;
				line-height: 80px;
				width:160;
				border:1px solid #5F9EDF;
				margin: 5px 0;
	
				text-align: center;
				border-radius: 5px;
				cursor: pointer;
			}
			.theGrey{
			    background:#ccc!important;
			}
		</style>
</head>
<body>
<div id="left">
<div class="item" data-index="1">开始</div>
<div class="item" data-index="2">流程</div>
<div class="item" data-index="3">结束</div>
</div>
<div id="main">
</div>
<button o.........完整代码请登录后点击上方下载按钮下载查看