javascript 是否有一个简单但有用的 jquery.JsPlumb 示例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13011230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a simple but useful jquery.JsPlumb example?
提问by Sebastian van Wickern
For the last week I've been searching for some graph-visualization javascript-library and I've stumbled upon jsPlumb, which is judging by the examples I've seen, the best looking and most advanced library I've seen so far. The documentation is, while being quite big, not very helpful as I cannot figure out how to actually perform the most essential tasks.
上周，我一直在寻找一些图形可视化 javascript-library 并且偶然发现了jsPlumb，从我见过的例子来看，这是迄今为止我见过的最好看和最先进的库。该文档虽然很大，但不是很有帮助，因为我无法弄清楚如何实际执行最重要的任务。
My list of questions includes:
我的问题清单包括：
- How do I tell the graph to use predefined elements of the DOM-Tree?
- What part of these elements will be displayed?
- While making connections is easy, how do I define the alignment?
- 如何告诉图形使用 DOM 树的预定义元素？
- 这些元素的哪一部分将被显示？
- 虽然建立连接很容易，但我如何定义对齐？
While these questions remain, there are a few examples, but either they are to simple to be of any use (see example 1), or they are so complex that even retrieving(well the download isn't a problem, but I don't really want to analyse everything before playing around with some library...) the code is at least for me impossible (see https://github.com/sporritt/jsPlumb/tree/master/demo).
虽然这些问题仍然存在，但还是有一些示例，但是它们要么简单到没有任何用处（参见示例 1），要么它们非常复杂，甚至无法检索（下载不是问题，但我不在使用某个库之前，我真的想分析所有内容......）代码至少对我来说是不可能的（参见https://github.com/sporritt/jsPlumb/tree/master/demo）。
Example 1
示例 1
<head>
<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="PATH_TO/jquery.jsPlumb-1.3.15-all-min.js ">
</script>
<script type="text/javascript">
jsPlumb.bind("ready", function() {
var e0 = jsPlumb.addEndpoint("container0"),
e1 = jsPlumb.addEndpoint("container1");
jsPlumb.connect({ source:e0, target:e1 });
});
</script>
</head>
<body>
<div id="container0">
</div>
<div id="container1">
</div>
</body>
Which results in
这导致
Can anyone give me an Example which answers my Questions?
谁能给我一个例子来回答我的问题？
Thanks in advance.
提前致谢。
采纳答案by spadelives
Try adding this just before the closing head tag ...
尝试在结束 head 标签之前添加它...
<style type="text/css">
#container0, #container1 {
float: left;
height: 100px;
width: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
回答by StackOverflowResponder
There's nothing wrong with what you've got there, but your divs have no styling and are not positioned.
你在那里得到的东西没有错，但是你的 div 没有样式，也没有定位。
I'd suggest positioning them absolute, give them each a top/left, and maybe a border, and you will see something a little more useful.
我建议将它们绝对定位，给它们一个顶部/左侧，也许还有一个边框，你会看到一些更有用的东西。
