12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!doctype html>
- <html>
- <head>
- <title>jsPlumb demo 2 - jQuery</title>
- <meta http-equiv="X-UA-Compatible" content="IE=7">
- <link rel="stylesheet" href="/mp.css"></link>
- <link rel="stylesheet" href="../../css/jsPlumbDemo.css"></link>
- <style type="text/css">
- body { background-color:white; }
- .window { border:2px dotted #346789; opacity:0.8; filter:alpha(opacity=80); width:14em; height:4em; z-index:20; position:absolute; color:white;font-family:helvetica;padding-top:0.9em; font-size:0.9em;text-align:center;cursor:default;}
- #window1 { background-color:#225588; left:20em;}
- #window2 { top:6em; left:21em;background-color:#558822;left:10em;top:12em;}
- #window3 { top:20em;background-color:#882255; left:40em;top:12em;}
- #window4 { top:4em; left:45em;background-color:#122704; left:4em;top:24em;}
- #window5 {top:27em;left:18em;background-color:#041227;left:22em;top:24em;}
- #window6 {top:35em;left:42em;background-color:#333300;left:47em;top:24em;}
- #window7 {top:18em;left:40em;background-color:#872431;}
- #window8 {left:63em;top:32em;background-color:#045803;}
- </style>
- </head>
- <body onunload="jsPlumb.unload();">
- <div class="menu"><a href="../../doc/usage.html" class="mplink">view documentation</a> | <a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a> | <a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a></div>
-
- <div class="window" id="window1">window one</div>
- <div class="window" id="window2">window two</div>
- <div class="window" id="window3">window three</div>
- <div class="window" id="window4">window four</div>
- <div class="window" id="window5">window five</div>
- <div class="window" id="window6">window six</div>
- <div id="explanation"></div>
-
- <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
- <script type="text/javascript" src="../js/1.2.3/jsPlumb-1.2.3-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.3/jsPlumb-defaults-1.2.3-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.3/jquery.jsPlumb-1.2.3-RC1.js"></script>
- <script type="text/javascript" src="exampleConnector.js"></script>
-
- <script type="text/javascript">
- $(document).ready(function() {
- // notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother
- // than the curves on the first demo, which use the default curviness value.
- jsPlumb.Defaults.Connector = new jsPlumb.Connectors.ExampleConnector(50);
- jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
- jsPlumb.Defaults.PaintStyle = { strokeStyle:'gray', lineWidth:2 };
- jsPlumb.Defaults.EndpointStyle = { fillStyle:'gray' };
- // here we set default source and target endpoints - note the triangle as the target.
- jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Dot({radius:5});
- jsPlumb.Defaults.Anchors = [ jsPlumb.Anchors.BottomCenter, jsPlumb.Anchors.TopCenter ];
- jsPlumb.setDraggableByDefault(true);
-
- jsPlumb.connect({source:'window3', target:'window6'});
- jsPlumb.connect({source:'window1', target:'window2'});
- jsPlumb.connect({source:'window1', target:'window3'});
- jsPlumb.connect({source:'window2', target:'window4'});
- jsPlumb.connect({source:'window2', target:'window5'});
-
- });
- </script>
- </body>
- </html>
|