123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- <!doctype html>
- <html>
- <head>
- <title>test page template</title>
- <style>
- #demo {
- overflow:scroll;
- margin-top:5em;
- }
-
- .w {
- width:5em;
- padding:1em;
- position:absolute;
- border: 1px solid black;
- z-index:5;
- }
- ._jsPlumb_connector {
- z-index:4;
- }
-
- ._jsPlumb_endpoint {
- z-index:6;
- }
- .dragHover { border:1px dotted red; }
- body {
- background-color: #E0E0E0;
- /*font-size: 90%;*/
- /*background-image: url(../img/dynamicAnchorBg.jpg); */
- font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;;
- }
- a {
- text-decoration: none;
- color: #01a3c6;
- font-weight: bold;
- padding: 0.3em;
- border-radius: 0.2em;
- }
- a:hover {
- color: #1b911b;
- background-color: #f0f0f0;
- }
- path, ._jsPlumb_endpoint {
- cursor: pointer;
- }
- div.canvas-wrapper {
- position: absolute;
- display: block;
- }
- div.canvas {
- width: 80%;
- height: 300px;
- margin-left: 3px;
- margin-top: -50px; /* space reserve for top toolbar */
- position: relative;
- }
- div.action_prestyle {
- font-size: 12px;
- color: #C9C9C9;
- padding: 3px 5px;
- position: absolute;
- z-index: 4;
- /*border: 1px solid #808080;*/
- box-shadow: 0px 0px 5px 0px #292929;
- -o-box-shadow: 0px 0px 5px 0px #292929;
- -webkit-box-shadow: 0px 0px 2px 0px #292929;
- -moz-box-shadow: 0px 0px 5px 0px #292929;
- border-radius: 5px;
- opacity: 0.8;
- filter: alpha(opacity=80);
- cursor: move;
- background-color: #141414;
- background: -webkit-linear-gradient(top, #2E2E2E, #000000);
- background: -moz-linear-gradient(top, #2E2E2E, #000000);
- background: -ms-linear-gradient(top, #2E2E2E, #000000);
- background: -o-linear-gradient(top, #2E2E2E, #000000);
- background: linear-gradient(top, #2E2E2E, #000000);
- }
- div.action_default {
- width: 100px;
- }
- div.action_shortbox {
- width: 60px;
- }
- div.action_icon_only {
- width: 20px;
- height: 20px;
- /*
- border: none;
- background: none;
- background-color: transparent;
- box-shadow: none;
- */
- }
- div.action_icon_only p {
- display: none
- }
- div.action_prestyle p {
- margin: 0px 0px 0px 25px;
- }
- div.action-icon {
- position: relative;
- float: left;
- width: 20px;
- height: 20px;
-
- cursor: pointer;
-
- }
- .pointer-label {
- font-size: 12px;
- color: #000000;
- padding-bottom: 40px;
- }
- /*
- ._jsPlumb_connector {
- border:1px solid blue;
- }
- ._jsPlumb_endpoint {
- border:1px solid green;
- }
- ._jsPlumb_overlay {
- border:1px solid yellow;
- }
- */
- </style>
- <style>
-
- </style>
- </head>
- <body>
- <div class="canvas-wrapper">
- <div id="canvas" class="canvas">
- <div id="from" class="action_prestyle" style="top: 110px; left: 15px; background-color: rgb(11, 99, 158);">
- <div class="action-icon">
- <img border="0" src="http://findicons.com/files/icons/1035/human_o2/128/media_playback_start.png" width="20" height="20">
- </div>
- <p>from</p>
- </div>
- <div id="to" class="action_prestyle" style="top: 246px; left: 308px; background-color: rgb(11, 99, 158);">
- <div class="action-icon">
- <img border="0" src="http://findicons.com/files/icons/1035/human_o2/128/media_playback_start.png" width="20" height="20">
- </div>
- <p>to</p>
- </div>
- </div>
- </div>
-
- <script type="text/javascript" src="../../js/lib/jquery-1.6.3-min.js"></script>
- <script type="text/javascript" src="../../js/lib/jquery-ui-1.8.13-min.js"></script>
- <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
- <!-- main jsplumb engine -->
- <script type="text/javascript" src="../../js/1.3.7/jsPlumb-1.3.7-RC1.js"></script>
- <!-- connectors, endpoint and overlays -->
- <script type="text/javascript" src="../../js/1.3.7/jsPlumb-defaults-1.3.7-RC1.js"></script>
- <!-- state machine connectors -->
- <script type="text/javascript" src="../../js/1.3.7/jsPlumb-connectors-statemachine-1.3.7-RC1.js"></script>
- <!-- SVG renderer -->
- <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-svg-1.3.7-RC1.js"></script>
- <!-- canvas renderer -->
- <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-canvas-1.3.7-RC1.js"></script>
- <!-- vml renderer -->
- <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-vml-1.3.7-RC1.js"></script>
- <!-- jquery jsPlumb adapter -->
- <script type="text/javascript" src="../../js/1.3.7/jquery.jsPlumb-1.3.7-RC1.js"></script>
-
- <script>
- jsPlumb.ready(function() {
- jsPlumb.Defaults.Anchor = "Continuous";
- jsPlumb.Defaults.HoverPaintStyle = {
- strokeStyle: "#42a62c",
- lineWidth: 2
- };
- var connection = jsPlumb.connect({
- source: 'from',
- target: 'to',
- paintStyle: {
- strokeStyle: 'black',
- lineWidth: 2,
- fillStyle: '#456'
- },
- connector: 'Straight',
- overlays:[
- ["Label", {
- label: 'Sample Label',
- location: 0.5,
- id: 'label',
- cssClass: 'pointer-label'
- }],
- ["Arrow", {
- location: 1,
- length: 20,
- width: 15,
- id: 'arrow',
- foldback: 0.9
- }]
-
- ]
- });
-
- });
- </script>
- </body>
- </html>
|