<!DOCTYPE html>
<!-- saved from url=(0047)http://jsplumb.org/jquery/stateMachineDemo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jsPlumb 1.3.5 - State Machine Demonstration - jQuery</title>
<link rel="stylesheet" href="http://jsplumb.org/css/jsPlumbDemo.css">
<link rel="stylesheet" href="http://jsplumb.org/css/stateMachineDemo.css">
</head>
<body onunload="jsPlumb.unload()" data-demo-id="stateMachineDemo" data-library="jquery">
<div style="position:absolute">
<div id="demo">
<div class="w ui-draggable ui-droppable" id="opened">begin<div class="ep" id="jsPlumb_1_1"></div></div>
<div class="w ui-draggable ui-droppable" id="olga">phone interview 1<div class="ep" id="jsPlumb_1_2"></div></div>
<div class="w ui-draggable ui-droppable" id="nicola">phone interview 2<div class="ep" id="jsPlumb_1_3"></div></div>
<div class="w ui-draggable ui-droppable" id="inperson">in person<div class="ep" id="jsPlumb_1_4"></div></div>
<div class="w ui-draggable ui-droppable" id="rejected">rejected<div class="ep" id="jsPlumb_1_5"></div></div>
</div>
</div>
<div id="explanation" class="ui-draggable">
<p>This is a demonstration of the StateMachine connector type, and of 'Continuous' anchors, which are anchors whose location is calculated based
on the location of all other connected elements.
</p>
<p>These behave in a similar way to 'Dynamic' anchors, which have been in jsPlumb for a while now,
but Continuous anchors do not require a list of possible locations, and they guarantee that every Connection has its own anchor.
</p>
<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
drag from one of these divs onto its parent element to create a 'loopback' connection.</p>
<p>Click on a Connection to delete it.</p>
<p>makeSource is used in a special way in this demonstration: it is provided with a 'parent' parameter, which tells jsPlumb which element should
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
main divs in the UI.</p>
<p>This demonstration uses jsPlumb 1.3.5, jQuery 1.7.1 and jQuery UI 1.8.13.</p>
</div>
<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>
<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/jquery.jsPlumb-1.3.5-all-min.js"></script>
<!-- demo
code -->
<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/stateMachineDemo.js"></script>
<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/stateMachineDemo-jquery.js"></script>
<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/demo-list.js"></script>
<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/demo-helper-jquery.js"></script>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6543403;
var sc_invisible=1;
var sc_security="b1f05c44";
</script>
<script type="text/javascript" src="./jsPlumb 1.3.5 - State Machine Demonstration - jQuery_files/counter.js"></script><noscript><div
class="statcounter"><a title="tumblr page counter"
href="http://statcounter.com/tumblr/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6543403/0/5a87615f/1/"
alt="tumblr page counter" ></a></div></noscript>
<!-- End of StatCounter Code -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15400992-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<div class="renderMode ui-draggable"><h5>Render Mode:</h5><a href="http://jsplumb.org/jquery/stateMachineDemo.html#" class="rmode selected" mode="svg">SVG</a> | <a href="http://jsplumb.org/jquery/stateMachineDemo.html#" class="rmode" mode="canvas">Canvas</a> | <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> <a class="" href="http://jsplumb.org/mootools/stateMachineDemo.html">MooTools</a> <a class="" href="http://jsplumb.org/yui3/stateMachineDemo.html">YUI3</a> <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> | <a href="http://jsplumb.org/apidocs">view api docs</a> | <a href="mailto:[email protected]" class="mplink">contact me</a> | <a href="http://github.com/sporritt/jsplumb/" class="mplink">jsPlumb on GitHub</a> | <a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a> | <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>