master

分支 (1)

管理

管理

master

jointjs-demo
/
multiple-links.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

		<title>更多链接</title>
		<link rel="stylesheet" type="text/css" href="css/joint.css" />
		<style>
			body {
				position: absolute;
				top: 10px;
				bottom: 10px;
				left: 10px;
				right: 10px;
			}

			#paper-multiple-links {
				border: 1px solid gray;
			}

			/* markAvailable 当用户点击magnet时，界面上显示可以连接的magnet。为了突出可以连接的magnet，添加必要的css*/
			/* port styling */
			/* .available-magnet {
				fill: yellow;
			} */

			/* element styling */
			/* .available-cell rect {
				stroke-dasharray: 5, 2;
			} */
			.svgEleOperate{
			    position: absolute;
			    width: 80px;
			    padding: 10px;
			    border: 1px solid #000;
			    background-color: #16fb09;
			}
			.svgEleOperate span{
			    display: inline-block;
			    height: 30px;
			    line-height: 30px;
			    width: 100%;
			    border: 1px solid #000;
			    border-radius: 15px;
			    text-align: center;
			    margin: 10px 0;
			}
			.svgEleOperate span:hover{
			    background-color: dodgerblue;
			    color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="paper-multiple-links"></div>
		<!--jointjs 依赖库start -->
		<script src="js/jquery/jquery.js"></script>
		<script src="js/jointjs/lodash.js"></script>
		<script src="js/jointjs/backbone.js"></script>
		<script src="js/jointjs/joint.js"></script>
		<!-- jointjs依赖库end -->


		<script src="js/layer/layer.min.js"></script>
		<!-- 自定义库start -->
		<script src="js/multiple-links.js"></script>
		<!-- 自定义库end -->
	</body>
</html>