ScrollOverflowCheckPage.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>scroll/auto overflow + relative position container sanity test page</title>
  5. <style type="text/css">
  6. #scroll, #auto {
  7. position:relative;
  8. margin-top:5em;
  9. margin-left:5em;
  10. border: 1px solid red;
  11. width:30em;
  12. height:20em;
  13. overflow: scroll;
  14. }
  15. .d {
  16. width:2em;
  17. height:2em;
  18. border: 1px dotted silver;
  19. position:absolute;
  20. z-index:5;
  21. }
  22. ._jsPlumb_connector { z-index:4; }
  23. ._jsPlumb_endpoint { z-index:6; }
  24. </style>
  25. </head>
  26. <body>
  27. <a href="ScrollOverflowCheckPageMooTools.html">mootools</a>
  28. <a href="ScrollOverflowCheckPageYUI.html">yui</a>
  29. <div id="scroll">
  30. <div id="w1" class="d"></div>
  31. <div id="w2" class="d"></div>
  32. </div>
  33. <div id="auto">
  34. <div id="w3" class="d"></div>
  35. <div id="w4" class="d"></div>
  36. </div>
  37. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  38. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  39. <!-- support lib for bezier stuff -->
  40. <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
  41. <!-- main jsplumb engine -->
  42. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-1.3.4-RC1.js"></script>
  43. <!-- connectors, endpoint and overlays -->
  44. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-defaults-1.3.4-RC1.js"></script>
  45. <!-- state machine connectors -->
  46. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-connectors-statemachine-1.3.4-RC1.js"></script>
  47. <!-- SVG renderer -->
  48. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-svg-1.3.4-RC1.js"></script>
  49. <!-- canvas renderer -->
  50. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-canvas-1.3.4-RC1.js"></script>
  51. <!-- vml renderer -->
  52. <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-vml-1.3.4-RC1.js"></script>
  53. <!-- jquery jsPlumb adapter -->
  54. <script type="text/javascript" src="../../js/1.3.4/jquery.jsPlumb-1.3.4-RC1.js"></script>
  55. <script type="text/javascript">
  56. $(function() {
  57. jsPlumb.draggable($(".d"));
  58. jsPlumb.addEndpoint("w1", {
  59. anchor:"RightMiddle",
  60. isSource:true
  61. });
  62. jsPlumb.addEndpoint("w2", {
  63. anchor:"LeftMiddle",
  64. isTarget:true
  65. });
  66. jsPlumb.addEndpoint("w3", {
  67. anchor:"RightMiddle",
  68. isSource:true
  69. });
  70. jsPlumb.addEndpoint("w4", {
  71. anchor:"LeftMiddle",
  72. isTarget:true
  73. });
  74. jsPlumb.bind("click", function(c) { jsPlumb.detach(c); });
  75. });
  76. </script>
  77. </body>
  78. </html>