jsplumb笔记

<pre name="code" class="javascript">//找到当前id下的所有子节点ep把他设置为源节点并且赋予从此源节点出发的连接线样式

 

jsPlumb.makeSource($(""),  {
                            parent: newid, 
                            anchor: "Continuous",
                           // connector: ["Flowchart", { curviness: 20}],
                            connector: ["Flowchart", { curviness: 20, stub: [4, 6], gap: 5, cornerRadius: 10, alwaysRespectStubs: true}],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]  cornerRadius:转角处的圆形 gap:接线与端点的距离 stub:连线转角处的位移
                            connectorStyle: connectorPaintStyle, //{ strokeStyle: "black", lineWidth: 1 }, //
                            connectorHoverStyle:connectorHoverStyle,
                            paintStyle: {//连线端的样式
                                fillStyle: "transparent",//中间的填充物
                                outlineColor: "yellow",
                                outlineWidth: 100
                            },
                            hoverPaintStyle: { fillStyle: "red" },
                            connectorPaintStyle: {
                                strokeStyle: "green",
                                lineWidth: 300
                            },
                            connectorHoverPaintStyle: {
                                strokeStyle: "#678",
                                outlineColor: "yellow",
                                outlineWidth: 100
                            },
                            isSource: true, //是否可以拖动（作为连线起点） 
                            isTarget: true, //是否可以放置（连线终点）
                            endpoint: "Blank",// endpoint: ["Dot", { radius: 8}],  //端点的形状
                            connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1}]], //设置箭头的
                            uniqueEndpoint:true,//启用连接端点线设置
                            maxConnections: 1,//端点连接线最多条数
                            onMaxConnections: function (info, e) {
                                alert("最大连接数为 (" + info.maxConnections + ") ！！");
                            }
                        }
                        
                        );

// 设置连接目标节点

 jsPlumb.makeTarget(newid, {
            dropOptions: { 
            hoverClass: "dragHover" },
            anchor: "Continuous",
            endpoint: "Blank",
            uniqueEndpoint: true, //启用连接端点线设置
            maxConnections: 1, //端点连接线最多条数
            onMaxConnections: function (info, e) {
                alert("最大连接数为 (" + info.maxConnections + ") ！！");
            }
           
            //anchor:"TopCenter"<span style="white-space:pre">			</span>
        });

   //            var connection1 = jsPlumb.connect({
            //                source: "window1",
            //                target: "window2",
            //                connector: "Flowchart",
            //                cssClass: "c1",
            //                endpoint: "Blank",
            //                endpointClass: "c1Endpoint",
            //                anchor: "Continuous",
            //                paintStyle: {
            //                    lineWidth: 1,
            //                    strokeStyle: "black"
            //                },

            //                endpointStyle: { fillStyle: "#a7b04b" },
            //                hoverPaintStyle: hoverPaintStyle,
            //                overlays: [
            //			   				["PlainArrow", {
            //			   				    cssClass: "l1arrow",
            //			   				    location: 1, width: 10, length: 12,
            //			   				    events: {
            //			   				        "click": function (arrow, evt) {
            //			   				            alert("clicked on arrow for connection " + arrow.component.id);
            //			   				        },
            //			   				        id: "myArrow"
            //			   				    }
            //			   				}]
            //			]
            //            });

            //            var connectiontest = jsPlumb.connect({
            //                source: "window_big1",
            //                target: "window3",
            //                connector: "Flowchart",
            //                cssClass: "c1",
            //                endpoint: "Blank",
            //                endpointClass: "c1Endpoint",
            //                anchors: [[1, 0.12, 0, 0.1], "LeftMiddle"],
            //                overlays: [["PlainArrow", { location: 1, width: 10, length: 12}]],
            //                paintStyle: {
            //                    lineWidth: 1,
            //                    strokeStyle: "black"
            //                },
            //                endpointStyle: { fillStyle: "#a7b04b" },
            //                hoverPaintStyle: hoverPaintStyle
            //            });

            //            var stateMachineConnector = {
            //                connector: "Flowchart",
            //                paintStyle: { lineWidth: 1, strokeStyle: "black" },
            //                hoverPaintStyle: { strokeStyle: "#dbe300" },
            //                endpoint: "Blank",
            //                anchor: "Continuous",
            //                overlays: [["PlainArrow", { location: 1, width: 10, length: 12}]]
            //            };

            //            jsPlumb.connect({
            //                source: "window3",
            //                target: "window4"
            //            }, stateMachineConnector);

            //            jsPlumb.connect({
            //                source: "window4",
            //                target: "window_big2",
            //                anchors: ["TopCenter", "LeftMiddle"]
            //            }, stateMachineConnector);

            //            jsPlumb.connect({
            //                source: "window5",
            //                target: "window6"
            //            }, stateMachineConnector);
            //            jsPlumb.connect({
            //                source: "window7",
            //                target: "window8"
            //            }, stateMachineConnector);
            //            jsPlumb.connect({
            //                source: "window9",
            //                target: "window10"
            //            }, stateMachineConnector);
            //            jsPlumb.connect({
            //                source: "window4",
            //                target: "window7",
            //                anchors: ["BottomCenter", "LeftMiddle"]
            //            }, stateMachineConnector);
            //            jsPlumb.connect({
            //                source: "window4",
            //                target: "window9",
            //                anchors: ["BottomCenter", "LeftMiddle"]
            //            }, stateMachineConnector);