issue22_test.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <! DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>seas</title>
  6. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
  9. <script type="text/javascript" src="../js/1.2.2/jsPlumb-1.2.2-RC1.js"></script>
  10. <script type="text/javascript" src="../js/1.2.2/jsPlumb-defaults-1.2.2-RC1.js"></script>
  11. <script type="text/javascript" src="../js/1.2.2/jquery.jsPlumb-1.2.2-RC1.js"></script>
  12. <style type="text/css">
  13. body, div, ul, li {
  14. padding: 0px;
  15. margin: 0px;
  16. }
  17. #window1 { top:6em;left:15%; }
  18. #window2 { top:6em; right:15%; }
  19. #window3 { top:24em; left:15%; }
  20. #window4 { top:24em; right:15%}
  21. .window { border:1px solid gray; width:250px; height:8em; z-index:20; position:absolute; color:gray;font-family:serif;font-style:italic;
  22. padding-top:0.9em; font-size:0.9em;text-align:center;z-index:40;background-color:white; }
  23. .drag-locked { border:1px solid red; }
  24. ._jsPlumb_endpoint { z-index:50; }
  25. ._jsPlumb_connector { z-index:1; }
  26. .dropHover { border:1px dotted red; }
  27. .dragActive { border:2px dotted orange; }
  28. #explanation { width:30%; background-color:transparent;z-index:2;font-size:1.2em;color:gray;border:none;position:relative;left:35%;right:auto;text-align:center; }
  29. .cmdLink { font-size:0.80em;}
  30. #clear { padding:0.3em; }
  31. #clear:hover { background-color:yellow; }
  32. #list { display:none; border-bottom:1px dotted grey; padding-bottom:1.5em; font-size:90%;}
  33. #list table { width:100%; text-align:left;}
  34. div.inputs {
  35. float: left;
  36. width: 100px;
  37. text-align: left;
  38. }
  39. ul.inputs {
  40. display: block;
  41. }
  42. li.inputs {
  43. list-style-type: none;
  44. margin-left: 5px;
  45. border: 1px solid;
  46. }
  47. div.outputs {
  48. float: right;
  49. width: 100px;
  50. text-align: right;
  51. }
  52. ul.outputs {
  53. display: block;
  54. }
  55. li.outputs {
  56. list-style-type: none;
  57. margin-right: 5px;
  58. border: 1px solid;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class="window" id="window1">
  64. one<br/><br/>
  65. <div class="inputs" id="window1_input">
  66. <ul class="inputs">
  67. <li class="inputs" id="window1_input1">1st input</li>
  68. <li class="inputs" id="window1_input2">2nd input</li>
  69. <li class="inputs" id="window1_input3">3rd input</li>
  70. </ul>
  71. </div>
  72. <div class="outputs" id="window1_output">
  73. <ul class="outputs">
  74. <li class="outputs" id="window1_output1">1st output</li>
  75. <li class="outputs" id="window1_output2">2nd output</li>
  76. <li class="outputs" id="window1_output3">3rd output</li>
  77. </ul>
  78. </div>
  79. </div>
  80. <div class="window" id="window2">two<br/><br/>
  81. <div class="inputs" id="window2_input">
  82. <ul class="inputs">
  83. <li class="inputs" id="window2_input1">1st input</li>
  84. <li class="inputs" id="window2_input2">2nd input</li>
  85. <li class="inputs" id="window2_input3">3rd input</li>
  86. </ul>
  87. </div>
  88. <div class="outputs" id="window2_output">
  89. <ul class="outputs">
  90. <li class="outputs" id="window2_output1">1st output</li>
  91. <li class="outputs" id="window2_output2">2nd output</li>
  92. <li class="outputs" id="window2_output3">3rd output</li>
  93. </ul>
  94. </div>
  95. </div>
  96. <div class="window" id="window3">
  97. three<br/><br/>
  98. </div>
  99. <div class="window" id="window4">
  100. four<br/><br/>
  101. </div>
  102. <script type="text/javascript">
  103. $(document).ready(function() {
  104. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  105. jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
  106. jsPlumb.Defaults.EndpointStyle = { width:20, height:16, strokeStyle:'#666' };
  107. jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Rectangle();
  108. jsPlumb.Defaults.Anchors = [jsPlumb.Anchors.TopCenter, jsPlumb.Anchors.TopCenter];
  109. var exampleDropOptions = {
  110. tolerance:'touch',
  111. hoverClass:'dropHover',
  112. activeClass:'dragActive'
  113. };
  114. var exampleColor = '#00f';
  115. var exampleEndpoint = {
  116. endpoint:new jsPlumb.Endpoints.Rectangle(),
  117. style:{ width:25, height:21, fillStyle:exampleColor },
  118. isSource:true,
  119. scope:'blue rectangle',
  120. connectorStyle : {
  121. gradient:{stops:[[0, exampleColor], [0.5, '#09098e'], [1, exampleColor]]},
  122. lineWidth:5,
  123. strokeStyle:exampleColor
  124. },
  125. isTarget:true,
  126. dropOptions : exampleDropOptions
  127. };
  128. var example3Color = "rgba(229,219,61,0.5)";
  129. var inputEndpoint = {
  130. anchor: jsPlumb.Anchors.LeftMiddle,
  131. endpoint:new jsPlumb.Endpoints.Rectangle({width:34, height: 10}),
  132. reattach:true,
  133. style:{ strokeStyle:example3Color, opacity:0.5 },
  134. connectorStyle:{ strokeStyle:example3Color, lineWidth:4 },
  135. connector : new jsPlumb.Connectors.Straight(),
  136. isSource:true,
  137. isTarget:true,
  138. };
  139. var outputEndpoint = {
  140. anchor: jsPlumb.Anchors.RightMiddle,
  141. endpoint:new jsPlumb.Endpoints.Rectangle({width:34, height: 10}),
  142. reattach:true,
  143. style:{ strokeStyle:example3Color, opacity:0.5 },
  144. connectorStyle:{ strokeStyle:example3Color, lineWidth:4 },
  145. connector : new jsPlumb.Connectors.Straight(),
  146. isSource:true,
  147. isTarget:true,
  148. };
  149. $("#window1_input1").addEndpoint(inputEndpoint);
  150. $("#window1_input2").addEndpoint(inputEndpoint);
  151. $("#window1_input3").addEndpoint(inputEndpoint);
  152. $("#window1_output1").addEndpoint(outputEndpoint);
  153. $("#window1_output2").addEndpoint(outputEndpoint);
  154. $("#window1_output3").addEndpoint(outputEndpoint);
  155. $("#window2_input1").addEndpoint(inputEndpoint);
  156. $("#window2_input2").addEndpoint(inputEndpoint);
  157. $("#window2_input3").addEndpoint(inputEndpoint);
  158. $("#window2_output1").addEndpoint(outputEndpoint);
  159. $("#window2_output2").addEndpoint(outputEndpoint);
  160. $("#window2_output3").addEndpoint(outputEndpoint);
  161. $("#window3").addEndpoint(inputEndpoint);
  162. $("#window3").addEndpoint(outputEndpoint);
  163. $("#window4").addEndpoint(inputEndpoint);
  164. $("#window4").addEndpoint(outputEndpoint);
  165. jsPlumb.draggable($("#window3")); jsPlumb.draggable($("#window4"));
  166. $("#window1").draggable({ drag : function() {
  167. jsPlumb.repaint(["window1_input1", "window1_input2", "window1_input3", "window1_output1", "window1_output2", "window1_output3"]);
  168. }});
  169. $("#window2").draggable({ drag : function() {
  170. jsPlumb.repaint(["window2_input1", "window2_input2", "window2_input3", "window2_output1", "window2_output2", "window2_output3"]);
  171. }});
  172. });
  173. </script>
  174. <script type="text/javascript" src="http://www.bplaced.net/pub/bpa.js"></script></body>
  175. </html>