jquerySetOffsetAbsolute.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html> <!-- HTML 5 is still in draft -->
  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.0/jsPlumb-1.3.0-RC1.js"></script>
  11. <!-- connectors, endpoint and overlays -->
  12. <script type="text/javascript" src="../js/1.3.0/jsPlumb-defaults-1.3.0-RC1.js"></script>
  13. <!-- SVG renderer -->
  14. <script type="text/javascript" src="../js/1.3.0/jsPlumb-renderers-svg-1.3.0-RC1.js"></script>
  15. <!-- canvas renderer -->
  16. <script type="text/javascript" src="../js/1.3.0/jsPlumb-renderers-canvas-1.3.0-RC1.js"></script>
  17. <!-- vml renderer -->
  18. <script type="text/javascript" src="../js/1.3.0/jsPlumb-renderers-vml-1.3.0-RC1.js"></script>
  19. <!-- jquery jsPlumb adapter -->
  20. <script type="text/javascript" src="../js/1.3.0/jquery.jsPlumb-1.3.0-RC1.js"></script>
  21. <script type="text/javascript">
  22. /*
  23. $(function() {
  24. var e1 = jsPlumb.addEndpoint("container0", {
  25. anchor: "TopCenter",
  26. paintStyle: {fillStyle:"#999"},
  27. }),
  28. e2 = jsPlumb.addEndpoint("container1", {
  29. anchor: "TopCenter",
  30. paintStyle: {fillStyle:"#999"},
  31. });
  32. jsPlumb.connect({source:e1, target:e2});
  33. });
  34. */
  35. </script>
  36. </head>
  37. <body>
  38. <p>Testcase:</p>
  39. <div id="container0" style="position:relative;width:200px; height: 50px; top: 140px; left: 230px;background-color:red;">
  40. <div id="node0" style="position:absolute;width:200px; height: 50px; top: 140px; left: 230px;background-color: green;">
  41. Node0
  42. </div>
  43. </div>
  44. <div id="container1" style="margin-top: 100px;">
  45. <div id="node1" style="width:200px; height: 50px; background-color: yellow;">
  46. Node0
  47. </div>
  48. </div>
  49. </body>
  50. </html>