chartDemoConnectors.html 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb demo 2 - jQuery</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=7">
  6. <link rel="stylesheet" href="/mp.css"></link>
  7. <link rel="stylesheet" href="../../css/jsPlumbDemo.css"></link>
  8. <style type="text/css">
  9. body { background-color:white; }
  10. .window { border:2px dotted #346789; opacity:0.8; filter:alpha(opacity=80); width:14em; height:4em; z-index:20; position:absolute; color:white;font-family:helvetica;padding-top:0.9em; font-size:0.9em;text-align:center;cursor:default;}
  11. #window1 { background-color:#225588; left:20em;}
  12. #window2 { top:6em; left:21em;background-color:#558822;left:10em;top:12em;}
  13. #window3 { top:20em;background-color:#882255; left:40em;top:12em;}
  14. #window4 { top:4em; left:45em;background-color:#122704; left:4em;top:24em;}
  15. #window5 {top:27em;left:18em;background-color:#041227;left:22em;top:24em;}
  16. #window6 {top:35em;left:42em;background-color:#333300;left:47em;top:24em;}
  17. #window7 {top:18em;left:40em;background-color:#872431;}
  18. #window8 {left:63em;top:32em;background-color:#045803;}
  19. </style>
  20. </head>
  21. <body onunload="jsPlumb.unload();">
  22. <div class="menu"><a href="../../doc/usage.html" class="mplink">view documentation</a>&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a>&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a></div>
  23. <div class="window" id="window1">window one</div>
  24. <div class="window" id="window2">window two</div>
  25. <div class="window" id="window3">window three</div>
  26. <div class="window" id="window4">window four</div>
  27. <div class="window" id="window5">window five</div>
  28. <div class="window" id="window6">window six</div>
  29. <div id="explanation"></div>
  30. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  31. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  32. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  33. <script type="text/javascript" src="../js/1.2.3/jsPlumb-1.2.3-RC1.js"></script>
  34. <script type="text/javascript" src="../js/1.2.3/jsPlumb-defaults-1.2.3-RC1.js"></script>
  35. <script type="text/javascript" src="../js/1.2.3/jquery.jsPlumb-1.2.3-RC1.js"></script>
  36. <script type="text/javascript" src="exampleConnector.js"></script>
  37. <script type="text/javascript">
  38. $(document).ready(function() {
  39. // notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother
  40. // than the curves on the first demo, which use the default curviness value.
  41. jsPlumb.Defaults.Connector = new jsPlumb.Connectors.ExampleConnector(50);
  42. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  43. jsPlumb.Defaults.PaintStyle = { strokeStyle:'gray', lineWidth:2 };
  44. jsPlumb.Defaults.EndpointStyle = { fillStyle:'gray' };
  45. // here we set default source and target endpoints - note the triangle as the target.
  46. jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Dot({radius:5});
  47. jsPlumb.Defaults.Anchors = [ jsPlumb.Anchors.BottomCenter, jsPlumb.Anchors.TopCenter ];
  48. jsPlumb.setDraggableByDefault(true);
  49. jsPlumb.connect({source:'window3', target:'window6'});
  50. jsPlumb.connect({source:'window1', target:'window2'});
  51. jsPlumb.connect({source:'window1', target:'window3'});
  52. jsPlumb.connect({source:'window2', target:'window4'});
  53. jsPlumb.connect({source:'window2', target:'window5'});
  54. });
  55. </script>
  56. </body>
  57. </html>