您的位置：首页 > Web前端 > JavaScript

jsplumb小例子

2015-07-25 16:04 483 查看

varparentWin=window.opener;

//关闭父窗口

parentWin.close();

window.parent.close()

window.top.close()

PaintStyleParameters

ThisisthefulllistofparametersyoucansetinapaintStyleobject,butnotethat

fillStyle

isignoredbyConnectors,and

strokeStyle

isignoredbyEndpoints.Also,ifyoucreateaConnectionusingjsPlumb.connectanddonotspecifyanyEndpointstyles,theEndpointswillderivetheirfillStylefromtheConnector'sstrokeStyle.

fillStyle

strokeStyle

and

outlineColor

canbespecifiedusinganyvalidCSS3syntax.

fillStyle-colorforanEndpoint,eg.rgba(100,100,100,50),"blue","#456","#993355",rgb(34,56,78).
strokeStyle-colorforaConnector.seefillStyleexamples.
lineWidth-widthofaConnector'sline.Aninteger.
outlineWidth-widthoftheoutlineforanEndpointorConnector.Aninteger.
outlineColor-coloroftheoutlineforanEndpointorConnector.seefillStyleexamples.
dashstyle-ThiscomesfromVML,andallowsyoutocreatedashedordottedlines.IthasabettersyntaxthantheequivalentattributeinSVG(

stroke-dasharray

,discussedbelow),sojsPlumbsupportsthisforbothrenderers.
The

dashstyle

attributeisspecifiedasanarrayofstrokesandspaces,whereeachvalueissomemultipleofthewidthoftheConnector,andthat'swhereit'sbetterthanSVG,whichjustusesabsolutepixelvalues.

TheVMLspecisagoodplacetofindvalidvaluesfordashstyle.NotethatjsPlumbdoesnotsupportthestringvaluesforthisattribute("solid","dashdot",etc).

InSVGrendermode,jsPlumbusesthe

lineWidth

parameterinconjunctionwiththevaluesina

dashstyle

attributetocreateanappropriatevaluefor

stroke-dasharray

.

stroke-dasharray-SVGonly.ThisistheSVGequivalentof

dashstyle

.
TheSVGspecdiscussesvalidvaluesforthisparameter.ButbeawarethatjsPlumbdoesnotconvertthisintoavalid

dashstyle

attributewhenusingtheVMLrenderer.Bettertouse

dashstyle

.
stroke-dashoffset-SVGonly.ThisisusedinSVGtospecifyhowfarintothedashpatterntostartpainting.Formoreinformation,seetheSVGspec
joinstyle-VMLandSVGonly.Aswith

dashstyle

,thisisaVMLattributethatjsPlumbsupportsforbothVMLandSVG-jsPlumbturnsthisintoa

stroke-linejoin

attributewhenrenderingwithSVG.Thisattributespecifies
howyouwantindividualsegmentsofconnectorstobejoined;theVMLandSVGspecsbothhaveexamplesofthis,ofwhichmanyarethesamebetweenthetwo,whichiswhyjsPlumbwillautomaticallyconvertthisattributeintotheSVGequivalent.
stroke-linejoin-SVGonly.ThisistheequivalentofVML's

joinstyle

attribute,butaswith

stroke-dasharray

,jsPlumbdoesnotconvertthisintosomethingapproriateforVML.So,using

joinstyle

willenableyoutosupportmorebrowserswithlesseffort.

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

<metaname="viewport"content="width=device-width">

<style>

#divclasshost{top:1500px;left:600px;}

.demo{position:relative;width:100%;height:2000px;}

.outclass{width:50px;height:50px;border:1pxsolidblue;position:absolute;}

.divclass{width:50px;height:50px;border:1pxsolidblue;position:absolute;}

.divclasshost{width:200px;height:400px;border:1pxsolidblue;position:absolute;}

</style>

</head>

<body>

<divclass="demo"id="demo">

<divid="divclasshost"class="divclasshost">主机</div>

</div>

<scriptsrc="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>

<scriptsrc="http://m13671097712.blog.163.com/blog/jquery-1.3.2.js"></script>

<scripttype="text/javascript">

jsPlumb.ready(function(){

varinstance=jsPlumb.getInstance();//创建实例

varhoverPaintStyle={strokeStyle:"#7ec3d9"};//声明颜色样式。下方调用

varw23Stroke="rgb(189,11,11)";//声明rgb颜色样式。下方调用

varconnectorStrokeColor="rgba(50,50,200,1)",//声明样式方便下方调用

connectorHighlightStrokeColor="rgba(180,180,200,1)",

hoverPaintStyle={strokeStyle:"#7ec3d9"};//设置线的鼠标浮动样式加入

varhostheight=Number(document.getElementById("divclasshost").offsetHeight)-2;//得到主机的高度

varhosttop=Number(document.getElementById("divclasshost").offsetTop);//得到主机上边距距离

vara=10;//声明传入接口图标个数

//循环画图标，和连线。

for(vari=1;i<=a;i++){

$(".demo").append("<divid='bussiness"+i+"'class='divclass'>传入接口</div>");//创建DIV图标

varbussinessheight=Number(document.getElementById("bussiness"+i).offsetHeight)-2;//得到图标高度

//根据图标高度与主机高度比较然后从新设置图标的位置。

if(a*bussinessheight>hostheight){

document.getElementById("bussiness"+i).style.top=hosttop-(a*bussinessheight-hostheight)/2+(i-1)*bussinessheight+(i*5)-25+'px';

}else{

document.getElementById("bussiness"+i).style.top=(hosttop+i*(hostheight/(a+1))-bussinessheight/2)+'px';

}

document.getElementById("bussiness"+i).style.left='40px';

//bussiness1与divclasshost连线方法

varcontent1=instance.connect({

source:"bussiness"+i,//原点

target:"divclasshost",//终点

connector:"Straight",//线的类型

anchors:["ContinuousRight",[0,i/(a+1),1,0]],

//ContinuousRight是开始图标的连线端点位置

//[0,i/(a+1),1,0]是结束图标的连线端点位置。

//ContinuousRight是端点不重复。Right是端点重复在一个点上。

//[0,0.2,1,0]是定位到一个点上。

paintStyle:{//线的样式属性

lineWidth:2,//线的宽度属性

strokeStyle:w23Stroke,//线的颜色属性

//dashstyle:"41",//分段显示4是每段长度1是段与段之间的长度

}

,hoverPaintStyle:hoverPaintStyle//设置线的鼠标浮动样式加入

,endpointStyle:{radius:1}//结束端点风格

,overlays:[["PlainArrow",{location:1,width:15,length:12}]]//箭头样式

});

}

varb=10;//声明传出接口图标个数

for(varj=1;j<=b;j++){

$(".demo").append("<divid='out"+j+"'class='outclass'>传出接口</div>");

varoutheight=Number(document.getElementById("out"+j).offsetHeight)-2;

if(b*outheight>hostheight){

document.getElementById("out"+j).style.top=hosttop-(b*outheight-hostheight)/2+(j-1)*outheight+(j*5)-25+'px';

}else{

document.getElementById("out"+j).style.top=(hosttop+j*(hostheight/(b+1))-outheight/2)+'px';

}

document.getElementById("out"+j).style.left='900px';

//bussiness1与divclasshost连线方法

instance.connect({

source:"divclasshost",//原点

target:"out"+j,//终点

connector:"Straight",

anchors:[[1,j/(b+1),1,1],"ContinuousLeft"],

paintStyle:{//线的样式属性

lineWidth:2,//线的宽度属性

strokeStyle:w23Stroke,//线的颜色属性

//dashstyle:"41",//分段显示4是每段长度1是段与段之间的长度

}

,hoverPaintStyle:hoverPaintStyle//设置线的鼠标浮动样式加入

,endpointStyle:{radius:1}//结束端点风格

,overlays:[["PlainArrow",{location:1,width:15,length:12}]]//箭头

});

}

//document.getElementById("bussiness1").style.top=(hosttop+1*(hostheight/4)-bussinessheight/2)+'px';

//document.getElementById("bussiness2").style.top=(hosttop+2*(hostheight/4)-bussinessheight/2)+'px';

//document.getElementById("bussiness3").style.top=(hosttop+3*(hostheight/4)-bussinessheight/2)+'px';

//document.getElementById("bussiness5").style.top=(hosttop+1*(hostheight/4)-bussinessheight/2)+'px';

//document.getElementById("bussiness6").style.top=(hosttop+2*(hostheight/4)-bussinessheight/2)+'px';

//document.getElementById("bussiness7").style.top=(hosttop+3*(hostheight/4)-bussinessheight/2)+'px';

instance.draggable(jsPlumb.getSelector(".outclass"),{containment:".demo"});//设置outclass可拖动

instance.draggable(jsPlumb.getSelector(".divclass"),{containment:".demo"});//设置divclass可拖动

instance.draggable(jsPlumb.getSelector(".divclasshost"),{containment:".demo"});//设置divclasshost可拖动

});

</script>

</body>

</html>
阅读(8)|评论(0)|阅读全文>>

jsplumb（2）在2个图标之间绘制一条线

2014-6-1314:36:46

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

<metaname="viewport"content="width=device-width">

<style>

.demo{position:relative;width:100%;height:600px;}

#div1{top:5em;left:4em;}

#div2{top:5em;left:20em;}

.divclass{width:100px;height:100px;border:1pxsolidblue;position:absolute;}

</style>

</head>

<body>

<divclass="demo">

<divid="div1"class="divclass"></div>

<divid="div2"class="divclass"></div>

</div>

<scriptsrc="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>

<scripttype="text/javascript">

jsPlumb.ready(function(){

varinstance=jsPlumb.getInstance();

varw23Stroke="rgb(189,11,11)";//rgb颜色

//div1与div2连线方法

varconnection3=instance.connect({

source:"div1",//原点

target:"div2",//终点

paintStyle:{//线的样式属性

lineWidth:10,//线的宽度属性

strokeStyle:w23Stroke,//线的颜色属性

outlineColor:"#666",//线的边框颜色属性

outlineWidth:4//线的边框宽度属性

}

});

instance.draggable(jsPlumb.getSelector(".divclass"),{containment:".demo"});

});

</script>

</body>

</html>

2.画虚线代码如下：

varw23Stroke="rgb(189,11,11)";//rgb颜色

[b]//varhoverPaintStyle={strokeStyle:"#7ec3d9"};//设置线的鼠标浮动样式加入

//div1与div2连线方法

varconnection3=instance.connect({

source:"div1",//原点

target:"div2",//终点

paintStyle:{//线的样式属性

lineWidth:10,//线的宽度属性

strokeStyle:w23Stroke,//线的颜色属性
dashstyle:"41",//分段显示4是每段长度1是段与段之间的长度

}

//[b],hoverPaintStyle:hoverPaintStyle//[b]设置线的鼠标浮动样式加入

//,endpoint:"Rectangle",//端点形状方形，去掉默认是圆形。

[/b][/b]});
[/b]

阅读(8)|评论(0)|阅读全文>>

jsplumb（1）绘制2个图标可托拉拽

2014-6-1313:48:24

1.首先建立<div>容器。代码如下：

<divclass="demo">

</div>

<style>

.demo{width:100%;height:500px;margin:auto;border:1pxsolidred;}

</style>

2.在div容器中建立2个图标div。代码如下：

<divclass="demo">

<divid="div1"class="divclass"></div>

<divid="div2"class="divclass"></div>

</div>

<style>

.demo{position:relative;width:100%;height:600px;}

#div1{top:5em;left:4em;}

#div2{top:5em;left:10em;}

.divclass{width:100px;height:100px;border:1pxsolidblue;position:absolute;}

</style>

3.导入<scriptsrc="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>

4.编写js代码如下：

<scripttype="text/javascript">

jsPlumb.ready(function(){

varinstance=jsPlumb.getInstance();//创建实例

instance.draggable(jsPlumb.getSelector(".divclass"),{containment:".demo"});//设置divclass样式在demo样式中可拖动

});

</script>

全部代码如下：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

<metaname="viewport"content="width=device-width">

<style>

.demo{position:relative;width:100%;height:600px;}

#div1{top:5em;left:4em;}

#div2{top:5em;left:10em;}

.divclass{width:100px;height:100px;border:1pxsolidblue;position:absolute;}

</style>

</head>

<body>

<divclass="demo">

<divid="div1"class="divclass"></div>

<divid="div2"class="divclass"></div>

</div>

<scriptsrc="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>

<scripttype="text/javascript">

jsPlumb.ready(function(){

varinstance=jsPlumb.getInstance();

instance.draggable(jsPlumb.getSelector(".divclass"),{containment:".demo"});

});

</script>

</body>

</html>

阅读(1)|评论(0)|阅读全文>>

jsplumb

2014-6-1210:44:40

加载jsplumb两种方法

1.

jsPlumb.bind("ready",function(){

//要执行jsplumb代码

});

2.
jsPlumb.ready(function(){

//要执行jsplumb代码

});

jsplumb代码解析如下：

varfirstInstance=jsPlumb.getInstance();//创建实例

//设置实例默认属性
firstInstance.importDefaults({Connector:["Bezier",{curviness:150}],//连线类型

BezierStateMachineStraight曲线Flowchart流程图线[/code]

Anchors:["TopCenter","BottomCenter"]

});

//使用实例进行连线

firstInstance.connect({source:"element1",//连线的原点（源）target:"element2",//连线的终点（目标指向）scope:"someScope"});

//建立一个带默认属性的实例
[/code]

varsecondInstance=jsPlumb.getInstance({PaintStyle:{lineWidth:6,strokeStyle:"#567567",outlineColor:"black",outlineWidth:1},Connector:["Bezier",{curviness:30}],Endpoint:["Dot",{radius:5}],EndpointStyle:{fillStyle:"#567567"},Anchor:[0.5,0.5,1,1]});secondInstance.connect({source:"element4",target:"element3",scope:"someScope"});

//设置默认容器

jsPlumb.setContainer($("body"));

方法一
jsPlumb.setContainer(document.getElementById("foo"));方法二jsPlumb.addEndpoint(someDiv,{endpointoptions});给div加端点[/code]

阅读(6)|评论(0)|阅读全文>>

Jsplum拓扑图firstdemo，简单的图标拖拉拽

2014-6-1016:47:29

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

<metaname="viewport"content="width=device-width">

<styletype="text/css">

#window1{top:5em;left:4em;border:1pxsolidred;height:100px;width:100px;}

body{

padding:0;

margin:0;

font-family:'OpenSans','HelveticaNeue',Helvetica,Arial,sans-serif;

background-color:whitesmoke;

}

.demo{

position:relative;

width:100%;

background-color:white;

overflow:auto;

margin-top:53px;

margin-bottom:25px;

height:600px;

}

.window{

background-color:white;

border:1pxsolid#346789;

box-shadow:2px2px19px#e0e0e0;

-o-box-shadow:2px2px19px#e0e0e0;

-webkit-box-shadow:2px2px19px#e0e0e0;

-moz-box-shadow:2px2px19px#e0e0e0;

-moz-border-radius:0.5em;

border-radius:0.5em;

width:5em;height:5em;

position:absolute;

color:black;

padding:0.5em;

width:80px;

height:80px;

line-height:80px;

-webkit-transition:-webkit-box-shadow0.15sease-in;

-moz-transition:-moz-box-shadow0.15sease-in;

-o-transition:-o-box-shadow0.15sease-in;

transition:box-shadow0.15sease-in;

}

.window:hover{

border:1pxsolid#123456;

box-shadow:2px2px19px#444;

-o-box-shadow:2px2px19px#444;

-webkit-box-shadow:2px2px19px#444;

-moz-box-shadow:2px2px19px#fff;

opacity:0.9;

filter:alpha(opacity=90);

}

.windowa{

font-family:helvetica;

}

</style>

</head>

<body>

<divid="main">



<divclass="demo">

<divclass="window"id="window1"><strong>Window1</strong></div>

</div>



</div>

<scriptsrc="http://m13671097712.blog.163.com/blog/../jsplumbb/dom.jsPlumb-1.6.2-min.js"></script>

<scripttype="text/javascript">

jsPlumb.bind("ready",function(){

varinstance=jsPlumb.getInstance();

instance.bind("dblclick",function(connection,originalEvent){alert("doubleclickonconnectionfrom"+connection.sourceId+"to"+connection.targetId);});
instance.bind("endpointClick",function(endpoint,originalEvent){alert("clickonendpointonelement"+endpoint.elementId);});
instance.bind("contextmenu",function(component,originalEvent){

ale

rt("contextmenuoncomponent"+component.id);

originalEvent.preventDefault();

returnfalse;

});

//设置图标可以拖拽方法

instance.draggable(jsPlumb.getSelector(".window"),{containment:".demo"});

jsPlumb.fire("jsPlumbDemoLoaded",instance);

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航