123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!doctype html>
- <html>
- <head>
- <title>jsPlumb 1.3.7 demo - jQuery</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <link rel="stylesheet" href="/mp.css">
- <link rel="stylesheet" href="../css/jsPlumbDemo.css">
- <link rel="stylesheet" href="../css/demo.css">
- </head>
- <body onunload="jsPlumb.unload();" data-demo-id="demo" data-library="jquery">
-
- <div style="position:absolute">
- <div id="demo">
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <div class="component window" id="window7"><strong>Window 7</strong><br/><br/>I am plumbed with State Machine connectors to Window 3.</div>
- </div>
- </div>
-
- <div id="explanation">
- <p>jsPlumb provides a way to "plumb" elements of a UI together.</p>
- <p>This page contains examples of the various types of connections you can make with jsPlumb. There are several other demonstrations that offer
- 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>
- <p>jsPlumb requires one of jQuery, MooTools or YUI3. See the documentation for a more detailed discussion of requirements.</p>
- <p>This demonstration uses jsPlumb 1.3.7, jQuery 1.7.1 and jQuery UI 1.8.13.</p>
- </div>
-
- <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>
-
- <script type='text/javascript' src='../js/jquery.jsPlumb-1.3.7-all-min.js'></script>
-
- <!-- demo code -->
- <script type="text/javascript" src="../js/demo.js"></script>
-
- <!-- demo helper code -->
- <script type="text/javascript" src="../js/demo-list.js"></script>
- <script type="text/javascript" src="../js/demo-helper-jquery.js"></script>
- </body>
- </html>
|