demo.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb 1.3.7 demo - jQuery</title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6. <link rel="stylesheet" href="/mp.css">
  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="jquery">
  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.
  26. </p>
  27. <p>jsPlumb requires one of jQuery, MooTools or YUI3. See the documentation for a more detailed discussion of requirements.</p>
  28. <p>This demonstration uses jsPlumb 1.3.7, jQuery 1.7.1 and jQuery UI 1.8.13.</p>
  29. </div>
  30. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
  31. <script type='text/javascript' src='../js/jquery.jsPlumb-1.3.7-all-min.js'></script>
  32. <!-- demo code -->
  33. <script type="text/javascript" src="../js/demo.js"></script>
  34. <!-- demo helper code -->
  35. <script type="text/javascript" src="../js/demo-list.js"></script>
  36. <script type="text/javascript" src="../js/demo-helper-jquery.js"></script>
  37. </body>
  38. </html>