issue_211.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>test page template</title>
  5. <style>
  6. #demo {
  7. overflow:scroll;
  8. margin-top:5em;
  9. }
  10. .w {
  11. width:5em;
  12. padding:1em;
  13. position:absolute;
  14. border: 1px solid black;
  15. z-index:5;
  16. }
  17. ._jsPlumb_connector {
  18. z-index:4;
  19. }
  20. ._jsPlumb_endpoint {
  21. z-index:6;
  22. }
  23. .dragHover { border:1px dotted red; }
  24. body {
  25. background-color: #E0E0E0;
  26. /*font-size: 90%;*/
  27. /*background-image: url(../img/dynamicAnchorBg.jpg); */
  28. font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;;
  29. }
  30. a {
  31. text-decoration: none;
  32. color: #01a3c6;
  33. font-weight: bold;
  34. padding: 0.3em;
  35. border-radius: 0.2em;
  36. }
  37. a:hover {
  38. color: #1b911b;
  39. background-color: #f0f0f0;
  40. }
  41. path, ._jsPlumb_endpoint {
  42. cursor: pointer;
  43. }
  44. div.canvas-wrapper {
  45. position: absolute;
  46. display: block;
  47. }
  48. div.canvas {
  49. width: 80%;
  50. height: 300px;
  51. margin-left: 3px;
  52. margin-top: -50px; /* space reserve for top toolbar */
  53. position: relative;
  54. }
  55. div.action_prestyle {
  56. font-size: 12px;
  57. color: #C9C9C9;
  58. padding: 3px 5px;
  59. position: absolute;
  60. z-index: 4;
  61. /*border: 1px solid #808080;*/
  62. box-shadow: 0px 0px 5px 0px #292929;
  63. -o-box-shadow: 0px 0px 5px 0px #292929;
  64. -webkit-box-shadow: 0px 0px 2px 0px #292929;
  65. -moz-box-shadow: 0px 0px 5px 0px #292929;
  66. border-radius: 5px;
  67. opacity: 0.8;
  68. filter: alpha(opacity=80);
  69. cursor: move;
  70. background-color: #141414;
  71. background: -webkit-linear-gradient(top, #2E2E2E, #000000);
  72. background: -moz-linear-gradient(top, #2E2E2E, #000000);
  73. background: -ms-linear-gradient(top, #2E2E2E, #000000);
  74. background: -o-linear-gradient(top, #2E2E2E, #000000);
  75. background: linear-gradient(top, #2E2E2E, #000000);
  76. }
  77. div.action_default {
  78. width: 100px;
  79. }
  80. div.action_shortbox {
  81. width: 60px;
  82. }
  83. div.action_icon_only {
  84. width: 20px;
  85. height: 20px;
  86. /*
  87. border: none;
  88. background: none;
  89. background-color: transparent;
  90. box-shadow: none;
  91. */
  92. }
  93. div.action_icon_only p {
  94. display: none
  95. }
  96. div.action_prestyle p {
  97. margin: 0px 0px 0px 25px;
  98. }
  99. div.action-icon {
  100. position: relative;
  101. float: left;
  102. width: 20px;
  103. height: 20px;
  104. cursor: pointer;
  105. }
  106. .pointer-label {
  107. font-size: 12px;
  108. color: #000000;
  109. padding-bottom: 40px;
  110. }
  111. /*
  112. ._jsPlumb_connector {
  113. border:1px solid blue;
  114. }
  115. ._jsPlumb_endpoint {
  116. border:1px solid green;
  117. }
  118. ._jsPlumb_overlay {
  119. border:1px solid yellow;
  120. }
  121. */
  122. </style>
  123. <style>
  124. </style>
  125. </head>
  126. <body>
  127. <div class="canvas-wrapper">
  128. <div id="canvas" class="canvas">
  129. <div id="from" class="action_prestyle" style="top: 110px; left: 15px; background-color: rgb(11, 99, 158);">
  130. <div class="action-icon">
  131. <img border="0" src="http://findicons.com/files/icons/1035/human_o2/128/media_playback_start.png" width="20" height="20">
  132. </div>
  133. <p>from</p>
  134. </div>
  135. <div id="to" class="action_prestyle" style="top: 246px; left: 308px; background-color: rgb(11, 99, 158);">
  136. <div class="action-icon">
  137. <img border="0" src="http://findicons.com/files/icons/1035/human_o2/128/media_playback_start.png" width="20" height="20">
  138. </div>
  139. <p>to</p>
  140. </div>
  141. </div>
  142. </div>
  143. <script type="text/javascript" src="../../js/lib/jquery-1.6.3-min.js"></script>
  144. <script type="text/javascript" src="../../js/lib/jquery-ui-1.8.13-min.js"></script>
  145. <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
  146. <!-- main jsplumb engine -->
  147. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-1.3.7-RC1.js"></script>
  148. <!-- connectors, endpoint and overlays -->
  149. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-defaults-1.3.7-RC1.js"></script>
  150. <!-- state machine connectors -->
  151. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-connectors-statemachine-1.3.7-RC1.js"></script>
  152. <!-- SVG renderer -->
  153. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-svg-1.3.7-RC1.js"></script>
  154. <!-- canvas renderer -->
  155. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-canvas-1.3.7-RC1.js"></script>
  156. <!-- vml renderer -->
  157. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-vml-1.3.7-RC1.js"></script>
  158. <!-- jquery jsPlumb adapter -->
  159. <script type="text/javascript" src="../../js/1.3.7/jquery.jsPlumb-1.3.7-RC1.js"></script>
  160. <script>
  161. jsPlumb.ready(function() {
  162. jsPlumb.Defaults.Anchor = "Continuous";
  163. jsPlumb.Defaults.HoverPaintStyle = {
  164. strokeStyle: "#42a62c",
  165. lineWidth: 2
  166. };
  167. var connection = jsPlumb.connect({
  168. source: 'from',
  169. target: 'to',
  170. paintStyle: {
  171. strokeStyle: 'black',
  172. lineWidth: 2,
  173. fillStyle: '#456'
  174. },
  175. connector: 'Straight',
  176. overlays:[
  177. ["Label", {
  178. label: 'Sample Label',
  179. location: 0.5,
  180. id: 'label',
  181. cssClass: 'pointer-label'
  182. }],
  183. ["Arrow", {
  184. location: 1,
  185. length: 20,
  186. width: 15,
  187. id: 'arrow',
  188. foldback: 0.9
  189. }]
  190. ]
  191. });
  192. });
  193. </script>
  194. </body>
  195. </html>