Loading...
Helix SwarmHelix Swarm
Loading...

stateMachineDemo_orig.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • jsPlumb/
  • stateMachineDemo/
  • stateMachineDemo_orig.html #1
  • View
  • Commits
  • Open Download .zip Download (7 KB) 
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0047)http://jsplumb.org/jquery/stateMachineDemo.html -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  4. 		<title>jsPlumb 1.3.5 - State Machine Demonstration - jQuery</title>
  5. 		<link rel="stylesheet" href="http://jsplumb.org/css/jsPlumbDemo.css">
  6. 		<link rel="stylesheet" href="http://jsplumb.org/css/stateMachineDemo.css">
  7. 	</head>
  8. 	<body onunload="jsPlumb.unload()" data-demo-id="stateMachineDemo" data-library="jquery">
  9. 		<div style="position:absolute">
  10. 			<div id="demo">	 
  11. 				<div class="w ui-draggable ui-droppable" id="opened">begin<div class="ep" id="jsPlumb_1_1"></div></div>
  12. 				<div class="w ui-draggable ui-droppable" id="olga">phone interview 1<div class="ep" id="jsPlumb_1_2"></div></div>
  13. 				<div class="w ui-draggable ui-droppable" id="nicola">phone interview 2<div class="ep" id="jsPlumb_1_3"></div></div>
  14. 				<div class="w ui-draggable ui-droppable" id="inperson">in person<div class="ep" id="jsPlumb_1_4"></div></div>
  15. 				<div class="w ui-draggable ui-droppable" id="rejected">rejected<div class="ep" id="jsPlumb_1_5"></div></div>
  16. 			</div>
  17. 		</div>
  18.  
  19.         <div id="explanation" class="ui-draggable">
  20.             <p>This is a demonstration of the StateMachine connector type, and of 'Continuous' anchors, which are anchors whose location is calculated based
  21.                 on the location of all other connected elements.
  22.             </p>
  23.             <p>These behave in a similar way to 'Dynamic' anchors, which have been in jsPlumb for a while now,
  24.                 but Continuous anchors do not require a list of possible locations, and they guarantee that every Connection has its own anchor.
  25.             </p>
  26.             <p>Click and drag new Connections from the red div in each element; the main elements in the UI are configured to be Connection targets. You can
  27.             drag from one of these divs onto its parent element to create a 'loopback' connection.</p>
  28.             <p>Click on a Connection to delete it.</p>
  29.             <p>makeSource is used in a special way in this demonstration: it is provided with a 'parent' parameter, which tells jsPlumb which element should
  30.             be the eventual source of a newly created connection.  So although you drag from the red divs, the connection sources are always configured to be the
  31.             main divs in the UI.</p>
  32.  
  33. 	    	<p>This demonstration uses jsPlumb 1.3.5, jQuery 1.7.1 and jQuery UI 1.8.13.</p>
  34. 	    </div>
  35. 	
  36. 		<script type="text/javascript" async="" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/ga.js"></script><script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/jquery.min.js"></script>
  37. 		<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/jquery-ui.min.js"></script>
  38. 		<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/jquery.jsPlumb-1.3.5-all-min.js"></script>
  39. 		
  40. 		<!--  demo
  41. code -->
  42. 		<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/stateMachineDemo.js"></script>
  43.         <script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/stateMachineDemo-jquery.js"></script>
  44. 		
  45. 		<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/demo-list.js"></script>	
  46. 		<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/demo-helper-jquery.js"></script>
  47.  
  48.     <!-- Start of StatCounter Code -->
  49. <script type="text/javascript">
  50. var sc_project=6543403;
  51. var sc_invisible=1;
  52. var sc_security="b1f05c44";
  53. </script>
  54.  
  55. <script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/counter.js"></script><noscript>&lt;div
  56. class="statcounter"&gt;&lt;a title="tumblr page counter"
  57. href="http://statcounter.com/tumblr/" target="_blank"&gt;&lt;img
  58. class="statcounter"
  59. src="http://c.statcounter.com/6543403/0/5a87615f/1/"
  60. alt="tumblr page counter" &gt;&lt;/a&gt;&lt;/div&gt;</noscript>
  61. <!-- End of StatCounter Code -->
  62.  
  63.  
  64. <script type="text/javascript">
  65.  
  66.   var _gaq = _gaq || [];
  67.   _gaq.push(['_setAccount', 'UA-15400992-4']);
  68.   _gaq.push(['_trackPageview']);
  69.  
  70.   (function() {
  71.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  72.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  73.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  74.   })();
  75.  
  76. </script> 
  77. 	
  78.  
  79. <div class="renderMode ui-draggable"><h5>Render Mode:</h5><a href="http://jsplumb.org/jquery/stateMachineDemo.html#" class="rmode selected" mode="svg">SVG</a>&nbsp;|&nbsp;<a href="http://jsplumb.org/jquery/stateMachineDemo.html#" class="rmode" mode="canvas">Canvas</a>&nbsp;|&nbsp;<a href="http://jsplumb.org/jquery/stateMachineDemo.html#" class="rmode" mode="vml" disabled="disabled">VML</a><h5>Library:</h5><div class="otherLibraries"></div><a class="selected" href="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/jsPlumb 1.3.5 - State Machine Demonstration - jQuery.html">jQuery</a>&nbsp;&nbsp;<a class="" href="http://jsplumb.org/mootools/stateMachineDemo.html">MooTools</a>&nbsp;&nbsp;<a class="" href="http://jsplumb.org/yui3/stateMachineDemo.html">YUI3</a>&nbsp;&nbsp;<h5>Previous:</h5><a href="http://jsplumb.org/jquery/anchorDemo.html">Sources and Targets</a><br><h5>Next:</h5><a href="http://jsplumb.org/jquery/dynamicAnchorsDemo.html">Dynamic Anchors</a><h5>Select Demo:</h5><select id="demoSelector" class="demoSelector"><option value="demo.html">jsPlumb Home</option><option value="flowchartConnectorsDemo.html">Flowchart Connectors</option><option value="draggableConnectorsDemo.html">Draggable Connections</option><option value="chartDemo.html">Chart Demonstration</option><option value="anchorDemo.html">Sources and Targets</option><option value="stateMachineDemo.html">State Machine</option><option value="dynamicAnchorsDemo.html">Dynamic Anchors</option><option value="dragAnimDemo.html">Animation</option></select></div><div class="menu"><div class="menu"><a href="http://jsplumb.org/doc/1.3.5/usage.html" class="mplink">view documentation</a>&nbsp;|&nbsp;<a href="http://jsplumb.org/apidocs">view api docs</a>&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a>&nbsp;|&nbsp;<a href="http://github.com/sporritt/jsplumb/" class="mplink">jsPlumb on GitHub</a>&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a>&nbsp;|&nbsp;<a href="http://jsplumb.tumblr.com/" class="mplink">jsPlumb on Tumblr</a></div></div></body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/jsPlumb/stateMachineDemo/stateMachineDemo_orig.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago