eelco_test_3.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Test case</title>
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  7. <!-- support lib for bezier stuff -->
  8. <script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
  9. <!-- main jsplumb engine -->
  10. <script type="text/javascript" src="../js/1.3.1/jsPlumb-1.3.1-RC1.js"></script>
  11. <!-- connectors, endpoint and overlays -->
  12. <script type="text/javascript" src="../js/1.3.1/jsPlumb-defaults-1.3.1-RC1.js"></script>
  13. <!-- SVG renderer -->
  14. <script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-svg-1.3.1-RC1.js"></script>
  15. <!-- canvas renderer -->
  16. <script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-canvas-1.3.1-RC1.js"></script>
  17. <!-- vml renderer -->
  18. <script type="text/javascript" src="../js/1.3.1/jsPlumb-renderers-vml-1.3.1-RC1.js"></script>
  19. <!-- jquery jsPlumb adapter -->
  20. <script type="text/javascript" src="../js/1.3.1/jquery.jsPlumb-1.3.1-RC1.js"></script>
  21. <script type="text/javascript">
  22. "use strict";
  23. $(function() {
  24. var opt = {
  25. anchor: "TopCenter",
  26. paintStyle: {fillStyle:"#999"},
  27. };
  28. jsPlumb.addEndpoint("node0", opt);
  29. jsPlumb.addEndpoint("node1", opt);
  30. jsPlumb.addEndpoint("node2", opt);
  31. jsPlumb.addEndpoint("node3", opt);
  32. });
  33. </script>
  34. <style type="text/css">
  35. .style0 {position: absolute; top: 40px; left: 30px; }
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <p>Testcase:</p>
  41. <div id="container0" class="style0">
  42. <div id="node0" style="width:200px; height: 50px; background-color: green;">
  43. Node0
  44. </div>
  45. </div>
  46. <div id="container1" style="margin-top: 100px;">
  47. <div id="node1" style="width:200px; height: 50px; background-color: yellow;">
  48. Node1
  49. </div>
  50. </div>
  51. <div style="position: absolute; top: 20px; left: 250px; border: 2px solid red;">
  52. <div id="container2" class="style0">
  53. <div id="node2" style="width:200px; height: 50px; background-color: green;">
  54. Node2
  55. </div>
  56. </div>
  57. <div id="container3" style="margin-top: 100px;">
  58. <div id="node3" style="width:200px; height: 50px; background-color: yellow;">
  59. Node3
  60. </div>
  61. </div>
  62. </div>
  63. </body>
  64. </html>