123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <!doctype html>
- <html>
- <head>
- <title>jsPlumb 1.3.7 - Connection Sources and Targets Demonstration - YUI3</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <link rel="stylesheet" href="../css/jsPlumbDemo.css">
- <link rel="stylesheet" href="../css/anchorDemo.css">
- </head>
- <body onunload="jsPlumb.unload();" data-demo-id="anchorDemo" data-library="yui3">
- <div id="demo">
- <div class="window" id="window1"><strong>Window 1</strong><br/><br/></div>
- <div class="window smallWindow" id="window2"><strong>Window 2</strong><br/><br/></div>
- <div class="window smallWindow" id="window3"><strong>Window 3</strong><br/><br/></div>
- <div class="window smallWindow" id="window4"><strong>Window 4</strong><br/><br/></div>
- <div class="window smallWindow" id="window5"><strong>Window 5</strong><br/><br/></div>
- <div class="window smallWindow" id="window6"><strong>Window 6</strong><br/><br/></div>
- </div>
- <div id="explanation">
- <p>This page provides a demonstration of the makeSource and makeTarget functions. Drag Connections from the
- big blue element to any of the small green ones. You can also drag Connections from one green element to another, because Connections in jsPlumb
- are, by default, detachable (this behaviour can be overridden at the default level, or on a per-call basis).</p>
- <p>These functions provide an alternative means of setting up your UI to support draggable connections - in the other demos you will see Endpoints
- being created and assigned to elements, which are then used as the sources and targets for Connections. But in this demonstration we treat entire
- elements as sources and targets, and only when Connections are established do we assign Endpoints for them, according to the parameters specified in
- the makeSource and makeTarget method calls.</p>
- <p>The blue element is configured as a Connection source (and is not draggable), with a list of possible Anchor
- locations:</p>
- <div class="code">
- <pre>
- var smallWindows = jsPlumb.getSelector(".smallWindow");
- for (var i = 0; i < smallWindows.length; i++) {
- jsPlumb.draggable(smallWindows[i]);
- jsPlumb.makeTarget(smallWindows[i], {
- paintStyle: { fillStyle:'#558822' },
- anchor:"TopCenter"
- dropOptions:{ hoverClass:"hover" }
- });
- }
- </pre>
- </div>
- The green elements are configured as Connection targets, with a "TopCenter" anchor, and are draggable:
- <div class="code">
- <pre>
- var smallWindows = jsPlumb.getSelector(".smallWindow");
- for (var i = 0; i < smallWindows.length; i++) {
- jsPlumb.draggable(smallWindows[i]);
- jsPlumb.makeTarget(smallWindows[i], {
- anchor:"TopCenter"
- });
- }
- </pre>
- </div>
- <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/anchorDemo.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>
|