1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Test case</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
-
- <!-- support lib for bezier stuff -->
- <script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
- <!-- main jsplumb engine -->
- <script type="text/javascript" src="../js/1.3.1/jsPlumb-1.3.1-RC1.js"></script>
- <!-- connectors, endpoint and overlays -->
- <script type="text/javascript" src="../js/1.3.1/jsPlumb-defaults-1.3.1-RC1.js"></script>
- <!-- SVG renderer -->
- <script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-svg-1.3.1-RC1.js"></script>
- <!-- canvas renderer -->
- <script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-canvas-1.3.1-RC1.js"></script>
- <!-- vml renderer -->
- <script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-vml-1.3.1-RC1.js"></script>
- <!-- jquery jsPlumb adapter -->
- <script type="text/javascript" src="../js/1.3.1/jquery.jsPlumb-1.3.1-RC1.js"></script>
-
- <script type="text/javascript">
- "use strict";
- $(function() {
- var opt = {
- anchor: "TopCenter",
- paintStyle: {fillStyle:"#999"},
- };
- jsPlumb.addEndpoint("node0", opt);
- jsPlumb.addEndpoint("node1", opt);
- jsPlumb.addEndpoint("node2", opt);
- jsPlumb.addEndpoint("node3", opt);
- });
- </script>
- <style type="text/css">
- .style0 {position: absolute; top: 40px; left: 30px; }
- }
- </style>
- </head>
- <body>
- <p>Testcase:</p>
- <div id="container0" class="style0">
- <div id="node0" style="width:200px; height: 50px; background-color: green;">
- Node0
- </div>
- </div>
- <div id="container1" style="margin-top: 100px;">
- <div id="node1" style="width:200px; height: 50px; background-color: yellow;">
- Node1
- </div>
- </div>
- <div style="position: absolute; top: 20px; left: 250px; border: 2px solid red;">
- <div id="container2" class="style0">
- <div id="node2" style="width:200px; height: 50px; background-color: green;">
- Node2
- </div>
- </div>
- <div id="container3" style="margin-top: 100px;">
- <div id="node3" style="width:200px; height: 50px; background-color: yellow;">
- Node3
- </div>
- </div>
- </div>
- </body>
- </html>
|