JsPlumb实例展示

$(function(){
   
$("#top_server").css({"left":"1%","top":"40%"});
$("#firewall").css({"left":"10%","top":"40%"});
$("#vpn2").css({"left":"23%","top":"20%"});
$("#vpn").css({"left":"23%","top":"60%"});
$("#exchange").css({"left":"38%","top":"40%"});
$("#wangzha").css({"left":"60%","top":"40%"});
$("#exchange1").css({"left":"77%","top":"40%"});
$("#cms").css({"left":"87%","top":"40%"});


jsPlumb.ready(function() {

                //设置拖动
                jsPlumb.draggable("top_server");
                jsPlumb.draggable("firewall");
                jsPlumb.draggable("auth");
                jsPlumb.draggable("vpn");
                jsPlumb.draggable("exchange");
                jsPlumb.draggable("wangzha");
                jsPlumb.draggable("cms");
                jsPlumb.draggable("equ1");
                jsPlumb.draggable("equ2");
                jsPlumb.draggable("exchange1");
                jsPlumb.draggable("vpn2");
                jsPlumb.draggable("auth");
                jsPlumb.draggable("zhen");
                var hoverPaintStyle = { lineWidth:2,strokeStyle:"#818AA3" };
                jsPlumb.importDefaults({
                    DragOptions : { cursor: 'pointer'}, //拖动时鼠标停留在该元素上显示指针，通过css控制
                    EndpointStyles : { width:10, height:10,cursor: 'pointer'},//连接点的默认颜色
                    Connector : "Straight", //设置连线为直线
                    Endpoint : "Rectangle",//连接点的默认形状
                    Anchor : "Left",//连接点的默认位置
                    MaxConnections:1000,//同上
                    ConnectionsDetachable:false,
                    HoverPaintStyle:hoverPaintStyle
                });
                var defaults = {
                    paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜色
                    connectorStyle:{ strokeStyle:"#B4B9C5", lineWidth:2 },//连线颜色、粗细
                    connector:[ "Flowchart", { stub:[10, 20], gap:5, cornerRadius:2} ],
                    isSource:true,
                    isTarget:true,
                    endpoint:"Blank"
                };
                var rootnode={
                    endpoint:["Image", { src:"images/sub.png" }],//设置连接点的形状为圆形
                    paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜色
                    connectorStyle:{ strokeStyle:"#B4B9C5", lineWidth:2 },//连线颜色、粗细
//              connector:["Straight",{gap:5}],
                    connector:[ "Flowchart", { stub:[10, 20], gap:10, cornerRadius:2} ],
                    cssClass:"cursorEndpoint"
                };
                var s1=jsPlumb.addEndpoint("top_server", {anchor:"AutoDefault"},rootnode);//将exampleEndpoint1类型的点绑定到id为top_server的元素上
                
              //添加拓扑关系
                var firewall=jsPlumb.addEndpoint("firewall", defaults);//
                jsPlumb.connect({source:s1,target:firewall});
                var fire=jsPlumb.addEndpoint("firewall",{anchor:"Right"}, rootnode);//

                var vpn2=jsPlumb.addEndpoint("vpn2",defaults);//
                jsPlumb.connect({source:fire, target:vpn2});
                var vpn3=jsPlumb.addEndpoint("vpn2",{anchor:"Right"}, rootnode);//

                var vpn=jsPlumb.addEndpoint("vpn",defaults);//
                jsPlumb.connect({source:fire, target:vpn});
                var vpn1=jsPlumb.addEndpoint("vpn",{anchor:"Right"}, rootnode);//

                var exchange=jsPlumb.addEndpoint("exchange",defaults);//
                jsPlumb.connect({source:vpn3, target:exchange});
                jsPlumb.connect({source:vpn1, target:exchange});
                var exchange1=jsPlumb.addEndpoint("exchange",{anchor:"Right"}, rootnode);//
                var exchange2=jsPlumb.addEndpoint("exchange",{anchor:"Top"}, rootnode);//
                var exchange3=jsPlumb.addEndpoint("exchange",{anchor:"Bottom"}, rootnode);//

                var shenfen=jsPlumb.addEndpoint("shenfen",defaults);//
                jsPlumb.connect({source:exchange2, target:shenfen});
              });
});