您的位置：首页 > 其它

boilerplate

2015-12-17 14:44 246 查看

Boilerplate

Here’s a simple page that you can copy in order to get going. A few basic things are illustrated here:

Nodes (with class w) are positioned absolute.

CSS is used to set the z-index of nodes and of jsPlumb connectors (which have a class of _jsPlumb_connector). In this case, nodes are placed above connectors.

You should use

jsPlumb.ready

to wrap your initial access to jsPlumb.

A listener is bound to the

connection

event on jsPlumb.

<!doctype html>
<html>
<head>
<title>jsPlumb simple example</title>
<style type="text/css">
.w {
border:1px solid #456;
position:absolute;
width:60px;
height:60px;
z-index:10;
}

._jsPlumb_connector {
z-index:9;
}

#one {
left:50px;
top:50px;
}

#two {
left:350px;
top:350px;
}
</style>
</head>
<body>
<div id="one">one</div>
<div id="two">two</div>
Drag a connection from <strong>one</strong> to <strong>two</strong>
<div id="debug"></div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js'></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all.js"></script>

<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.addEndpoint("one", { isSource:true });
jsPlumb.addEndpoint("two", { isTarget:true });

jsPlumb.bind("connection", function(info) {
console.log("new connection:", info);
$("#debug").html("hello.");
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航