<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);