removeAllEndpointsTest.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>animated draggable connectors demonstration</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. ._jsPlumb_endpoint { z-index:50; cursor:move; }
  10. ._jsPlumb_connector { z-index:1; }
  11. .bigdot { cursor:pointer;width:162px; height:162px; background-image:url(../img/bigdot.png); z-index:5; position:absolute; }
  12. .bigdot-hover { border:1px dotted orange; }
  13. .cmd { padding:0.3em; }
  14. .cmd:hover { background-color:yellow; }
  15. .dropHover { border:1px dotted orange; }
  16. #bd1 { top:10em;left:26em;}
  17. #bd2 { top:3em;left:3em;}
  18. #bd3 { top:19em;left:4.5em;}
  19. #bd4 { top:17em;left:46em;}
  20. #explanation { width:50%; background-color:transparent;z-index:2;color:gray;border:none;position:relative;left:45%;right:auto;text-align:center;}
  21. .bigdot { text-align:center; }
  22. .bigdot a { color:red; font-size:0.9em; }
  23. </style>
  24. </head>
  25. <body onunload="jsPlumb.unload();">
  26. <div class="menu"><a href="demo.html" class="mplink">jsPlumb home</a>&nbsp;|&nbsp;<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>
  27. <div class="bigdot" id="bd1"><a class="remove-endpoints" rel="bd1" href="javascript://nop();">remove endpoints</a></div>
  28. <div class="bigdot" id="bd2"><a class="remove-endpoints" rel="bd2" href="javascript://nop();">remove endpoints</a></div>
  29. <div class="bigdot" id="bd3"><a class="remove-endpoints" rel="bd3" href="javascript://nop();">remove endpoints</a></div>
  30. <div class="bigdot" id="bd4"><a class="remove-endpoints" rel="bd4" href="javascript://nop();">remove endpoints</a></div>
  31. <div id="explanation">
  32. <p>this demo uses jsPlumb 1.1.0.</p>
  33. <p>drag orange dots to create connections.</p>
  34. <p>click on or near blue dots to make them move in that direction.</p>
  35. <p><a id="add" href="#" class="cmd">add a disc</a></p>
  36. <p><a id="clear" href="#" class="cmd">remove all connections</a><br/>
  37. </div>
  38. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  39. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  40. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  41. <script type="text/javascript" src="http://jsplumb.googlecode.com/svn/trunk/js/jquery.jsPlumb-1.1.1-RC1.js"></script>
  42. <script type="text/javascript" src="http://jsplumb.googlecode.com/svn/trunk/js/jquery.jsPlumb-defaults-1.1.0.js"></script>
  43. <script type="text/javascript">
  44. $(document).ready(function() {
  45. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:6 };
  46. var endpoint = {
  47. anchor:jsPlumb.makeAnchor(0.5,0.5,0,-1),
  48. connectionStyle:{lineWidth:7,strokeStyle:'rgba(198,89,30,0.7)'},
  49. endpoint:new jsPlumb.Endpoints.Image({url:"../img/littledot.png"}),
  50. connector:new jsPlumb.Connectors.Bezier(90),
  51. endpointsOnTop:true,
  52. isSource:true,
  53. maxConnections:10,
  54. isTarget:true,
  55. dropOptions:{tolerance:'touch', scope:'conn', hoverClass:'dropHover'},
  56. dragOptions:{scope:'conn'}
  57. };
  58. var prepare = function(elId) {
  59. $("#" + elId).hover(
  60. function() { $(this).addClass("bigdot-hover"); },
  61. function() { $(this).removeClass("bigdot-hover"); }
  62. );
  63. $("#" + elId).click(function(e, ui) {
  64. if ($(this).hasClass("jsPlumb_dragged")) {
  65. $(this).removeClass("jsPlumb_dragged");
  66. return;
  67. }
  68. var o = $(this).offset();
  69. var w = $(this).outerWidth();
  70. var h = $(this).outerHeight();
  71. var c = [o.left + (w/2) - e.pageX, o.top + (h/2) - e.pageY];
  72. var oo = [c[0] / w, c[1] / h];
  73. var l = oo[0] < 0 ? '+=' : '-=', t = oo[1] < 0 ? "+=" : '-=';
  74. var DIST = 450;
  75. l = l + Math.abs(oo[0] * DIST);
  76. t = t + Math.abs(oo[1] * DIST);
  77. jsPlumb.animate($(this).attr("id"), {left:l, top:t}, {duration:900});
  78. });
  79. return $("#" + elId).addEndpoint(endpoint)[0];
  80. };
  81. var e1 = prepare("bd1");
  82. var e2 = prepare("bd2");
  83. var e3 = prepare("bd3");
  84. var e4 = prepare("bd4");
  85. $("#clear").click(function() { jsPlumb.detachEverything(); });
  86. $("#bd1").plumb({target:'bd2', sourceEndpoint:e1, targetEndpoint:e2});
  87. $("#bd1").plumb({target:'bd3', sourceEndpoint:e1, targetEndpoint:e3});
  88. $("#bd1").plumb({target:'bd4', sourceEndpoint:e1, targetEndpoint:e4});
  89. $("#add").click(function() {
  90. var d = document.createElement("div");
  91. d.className = "bigdot";
  92. d.style.display='none';
  93. document.body.appendChild(d);
  94. var id = '' + ((new Date().getTime()));
  95. $(d).attr("id", id);
  96. var w = screen.width - 162, h = screen.height - 162;
  97. var x = (0.2 * w) + Math.floor(Math.random()*(0.5 * w));
  98. var y = (0.2 * h) + Math.floor(Math.random()*(0.6 * h));
  99. d.style.top= y + 'px';
  100. d.style.left= x + 'px';
  101. var e = prepare(id);
  102. e.canvas.style.display = 'none';
  103. $(d).fadeIn(function() {
  104. jsPlumb.animate(id, {left:'+=5', top:'-=5'}, {duration:900});
  105. $(e.canvas).fadeIn();
  106. });
  107. });
  108. // remove endpoints test
  109. $(".remove-endpoints").click(function() {
  110. jsPlumb.removeAllEndpoints($(this).attr("rel"));
  111. return false;
  112. });
  113. });
  114. </script>
  115. <!-- Start of StatCounter Code -->
  116. <script type="text/javascript">
  117. var sc_project=5700644;
  118. var sc_invisible=1;
  119. var sc_partition=71;
  120. var sc_click_stat=1;
  121. var sc_security="1cb90164";
  122. </script>
  123. <script type="text/javascript"
  124. src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
  125. class="statcounter"><a title="counter for wordpress"
  126. href="http://www.statcounter.com/wordpress.org/"
  127. target="_blank"><img class="statcounter"
  128. src="http://c.statcounter.com/5700644/0/1cb90164/1/"
  129. alt="counter for wordpress" ></a></div></noscript>
  130. <!-- End of StatCounter Code -->
  131. </body>
  132. </html>