demo.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb 1.3.7 demo - YUI3</title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6. <link rel="stylesheet" href="/mp.css"></link>
  7. <link rel="stylesheet" href="../css/jsPlumbDemo.css">
  8. <link rel="stylesheet" href="../css/demo.css">
  9. </head>
  10. <body onunload="jsPlumb.unload();" data-demo-id="demo" data-library="yui3">
  11. <div style="position:absolute">
  12. <div id="demo">
  13. <div class="component window" id="window1"><strong>Window 1</strong><br/><br/>I am plumbed with a Bezier connector to Window 2 and a label, with Blank endpoints.</div>
  14. <div class="component window" id="window2"><strong>Window 2</strong><br/><br/>I am plumbed with a Bezier connector to Window 1, and a Bezier connector with Rectangle endpoints to Window 3</div>
  15. <div class="component window" id="window3"><strong>Window 3</strong><br/><br/>I am plumbed with a Bezier connector and Rectangle endpoints to Window 2, and a Bezier connector with Dot endpoints and a label to Window 4. My blue endpoint tracks Window 4's position.</div>
  16. <div class="component window" id="window4"><strong>Window 4</strong><br/><br/>I am plumbed with a Bezier connector with Dot endpoints to Window 3, and with a Straight connector with Image endpoints to Window 5. My blue endpoint tracks Window 3's position.</div>
  17. <div class="component window" id="window5"><strong>Window 5</strong><br/><br/>I am plumbed with a Flowchart connector to Window 6, between our two centerpoints, which are drawn below, and larger than, the window element; I am also plumbed to Window 4.</div>
  18. <div class="component window" id="window6"><strong>Window 6</strong><br/><br/>I am plumbed with a Flowchart connector to Window 5, between our two centerpoints, which are drawn below, and larger than, the window element.</div>
  19. <div class="component window" id="window7"><strong>Window 7</strong><br/><br/>I am plumbed with State Machine connectors to Window 3.</div>
  20. </div>
  21. </div>
  22. <div id="explanation">
  23. <p>jsPlumb provides a way to "plumb" elements of a UI together.</p>
  24. <p>This page contains examples of the various types of connections you can make with jsPlumb. There are several other demonstrations that offer
  25. a more focused look at some specific part of jsPlumb's functionality - pick one from the drop down on the left or cycle through Next/Previous.</p>
  26. <p>jsPlumb requires one of jQuery, MooTools or YUI3. See the documentation for a more detailed discussion of requirements.</p>
  27. <p>This demonstration uses jsPlumb 1.3.7 and YUI 3.3.0.</p>
  28. </div>
  29. <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
  30. <script type='text/javascript' src='../js/yui.jsPlumb-1.3.7-all-min.js'></script>
  31. <!-- demo code -->
  32. <script type="text/javascript" src="../js/demo.js"></script>
  33. <!-- demo helper code -->
  34. <script type="text/javascript" src="../js/demo-list.js"></script>
  35. <script type="text/javascript" src="../js/demo-helper-yui3.js"></script>
  36. </body>
  37. </html>