1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <!doctype html>
- <html>
- <head>
- <title>jsPlumb 1.3.7 demo - YUI3</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <link rel="stylesheet" href="/mp.css"></link>
- <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="yui3">
-
- <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 and YUI 3.3.0.</p>
- </div>
-
- <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
-
- <script type='text/javascript' src='../js/yui.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-yui3.js"></script>
- </body>
- </html>
|