changeEndpointStyleTest.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!doctype html>
  2. <!--
  3. test of changing endpoint style programmatically.
  4. -->
  5. <html>
  6. <head>
  7. <title>change endpoint style test</title>
  8. <meta http-equiv="X-UA-Compatible" content="IE=7">
  9. <link rel="stylesheet" href="/mp.css"></link>
  10. <link rel="stylesheet" href="../demo/css/jsPlumbDemo.css"></link>
  11. <link rel="stylesheet" href="../demo/css/demo.css"></link>
  12. <style type="text/css">
  13. .dropHover { border:1px dotted red; }
  14. .dragActive { border:2px dotted orange; }
  15. ._jsPlumb_endpoint { z-index:100; }
  16. #window1 { left:2em; top:2em; }
  17. #window2 { left:40em; top:2em; }
  18. #window3 { left:2em; top:26em; }
  19. #window4 { left:40em; top:26em; }
  20. #btnGreen { position:absolute; top:1em; left:18em; background-color:green; width:3em;height:2em;}
  21. #btnBlue { position:absolute; top:1em; left:22em; background-color:blue; width:3em;height:2em;}
  22. </style>
  23. </head>
  24. <body onunload="jsPlumb.unload();">
  25. <button id="btnGreen"></button>
  26. <button id="btnBlue"></button>
  27. <div class="window" id="window1">WINDOW 1</div>
  28. <div class="window" id="window2">WINDOW 2</div>
  29. <div class="window" id="window3">WINDOW 3</div>
  30. <div class="window" id="window4">WINDOW 4</div>
  31. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  32. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  33. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
  34. <script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
  35. <script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
  36. <script type="text/javascript" src="../js/1.2.6/jquery.jsPlumb-1.2.6-RC1.js"></script>
  37. <script type="text/javascript" src="../js/1.2.6/jsBezier-0.2-min.js"></script>
  38. <script type="text/javascript">
  39. $(function() {
  40. // chrome fix.
  41. document.onselectstart = function () { return false; };
  42. jsPlumb.DefaultDragOptions = { cursor: 'pointer', zIndex:2000 };
  43. var style1 = { fillStyle:"blue", radius:9 };
  44. var style2 = { fillStyle:"green", radius:15 };
  45. var endpoint = {
  46. anchor:[1,0.5,1,0],
  47. isSource:true,
  48. isTarget:true,
  49. dropOptions:{
  50. hoverClass:'dropHover',
  51. activeClass:'dragActive'
  52. },
  53. style:style1,
  54. connectorStyle:{strokeStyle:"rgb(145,145,145)", lineWidth:7}
  55. };
  56. var e1 = jsPlumb.addEndpoint("window1", endpoint);
  57. var e3 = jsPlumb.addEndpoint("window3", endpoint);
  58. var e2 = jsPlumb.addEndpoint("window2", endpoint);
  59. var e4 = jsPlumb.addEndpoint("window4", endpoint);
  60. $("#btnGreen").bind("click", function() {
  61. $.each([e1,e2,e3,e4], function(i, e) {
  62. e.setStyle(style2);
  63. });
  64. });
  65. $("#btnBlue").bind("click", function() {
  66. $.each([e1,e2,e3,e4], function(i, e) {
  67. e.setStyle(style1);
  68. });
  69. });
  70. });
  71. </script>
  72. </body>
  73. </html>