12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- ;(function() {
-
- window.jsPlumbDemo = {
-
- init : function() {
- // list of possible anchor locations for the blue source element
- var sourceAnchors = [
- [ 0, 1, 0, 1 ],
- [ 0.25, 1, 0, 1 ],
- [ 0.5, 1, 0, 1 ],
- [ 0.75, 1, 0, 1 ],
- [ 1, 1, 0, 1 ]
- ];
-
- jsPlumb.importDefaults({
- // set default anchors. the 'connect' calls below will pick these up, and in fact setting these means
- // that you also do not need to supply anchor definitions to the makeSource or makeTarget functions.
- Anchors : [ sourceAnchors, "TopCenter" ],
- // drag options
- DragOptions : { cursor: "pointer", zIndex:2000 },
- // default to blue at source and green at target
- EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }],
- // blue endpoints 7 px; green endpoints 11.
- Endpoints : [ ["Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
- // default to a gradient stroke from blue to green. for IE provide all green fallback.
- PaintStyle : {
- gradient:{ stops:[ [ 0, "#225588" ], [ 1, "#558822" ] ] },
- strokeStyle:"#558822",
- lineWidth:10
- }
- });
- // make 'window1' a connection source.
- jsPlumb.makeSource("window1", {
- //anchor:sourceAnchors // you could supply this if you want, but it was set in the defaults above.
- });
- // get the list of ".smallWindow" elements. getSelector is just a helper method that abstracts out the underlying
- // library; you don't need to use it - you could use $(".smallWindow") in jquery, $$(".smallWindow") in
- // MooTools, or Y.all(".smallWindow") in YUI.
- //
- var smallWindows = jsPlumb.getSelector(".smallWindow");
- for (var i = 0; i < smallWindows.length; i++) {
- jsPlumb.draggable(smallWindows[i]);
- jsPlumb.makeTarget(smallWindows[i], {
- //anchor:"TopCenter", // you could supply this if you want, but it was set in the defaults above.
- dropOptions:{ hoverClass:"hover" }
- });
- }
- // and finally connect a couple of small windows, just so the demo doesnt look broken when it loads.
- // note that
- jsPlumb.connect({ source:"window1", target:"window5" });
- jsPlumb.connect({ source:"window1", target:"window2" });
- }
- };
- })();
|