⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 testline.htm

📁 Web版的WorkFlow流程设计器.采用Javascript编写,不需要服务器端,直接在客户端运行.
💻 HTM
字号:
<HTML>
<STYLE>
	v\:*{behavior:url(#default#VML);}
	img.mid{
		position:absolute;
		border:solid 1px #000000;
		width:7px;
		height:7px;
		background-color:#CCCCCC;
		margin-right:100px;
	}
	div.linetext{
		font-size:12px;
		position:absolute;
		overflow:visible;
	}
</STYLE>	
<script language="javascript" src="../objects/line.js"></script>
<script language="javascript" src="../objects/position.js"></script>
<script language="javascript" src="../acting/doGraphElement.js"></script>
<script>

function reDrawLineMid(index){
	var left,top;
	top=event.top+3;
	left=event.left+3;
	lines[index].midPoint.left=left;
	lines[index].midPoint.top=top;
	var pp=calcArrowPoint(lines[index].midPoint,lines[index].dPoint);
	var cmd="line"+index+".points.value='"+lines[index].sPoint.left+","+lines[index].sPoint.top+","+lines[index].midPoint.left+","+lines[index].midPoint.top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[0].left+","+pp[0].top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[1].left+","+pp[1].top+"'";
	eval(cmd);
	cmd="lineText"+index+".style.top='"+(lines[index].midPoint.top-6)+"px';";
	eval(cmd);
	cmd="lineText"+index+".style.left='"+(lines[index].midPoint.left+10)+"px';";
	eval(cmd);
	//if the point.top more than sourceNode.top then set the point's sPoint to the sourceNode's leftSide
}


function createLine(line){
	//alert(line.name);
	var html;
	var pp=calcArrowPoint(line.midPoint,line.dPoint);
	html="<v:polyline id='line"+line.index+"' style='position:absolute;Z-INDEX:1;' points='"+line.sPoint.left+","+line.sPoint.top+","+line.midPoint.left+","+line.midPoint.top+","+line.dPoint.left+","+line.dPoint.top+","+pp[0].left+","+pp[0].top+","+line.dPoint.left+","+line.dPoint.top+","+pp[1].left+","+pp[1].top+"' filled='f' />";
	html+="<img id='mid"+line.index+"' onDraging='reDrawLineMid("+line.index+")' class='mid' style='Z-INDEX:2;top:"+(line.midPoint.top-3)+";left:"+(line.midPoint.left-3)+"' />";
	html+="<div id='lineText"+line.index+"' style='top:"+(line.midPoint.top-6)+";left:"+(line.midPoint.left+10)+"' class='linetext' >"+line.name+"</div>";
	container.innerHTML+=html;
}

</script>
<BODY bgcolor="#eeeeee" topmargin="0" leftmargin="0" onselectstart="return false">	
	<!--div id="container" style="position:absolute;top:0px;left:0px;width:0px;height:0px;overflow:show;padding-right:100px;padding-bottom:100px;background:#eeeeee"></div-->
	<div id="container"></div>
</BODY>
<script>
var lines=new Array(2);
function init(){
	var i;
	for(i=0;i<10;i++){
	var l1=null;
	l1=new Line();
	l1.name="测试线"+i;
	l1.index=i;
	l1.sPoint=new Position(1,50*(i+1));
	l1.midPoint=new Position(50,40*(i+1));
	l1.dPoint=new Position(100,60*(i+1));
	lines[i]=l1;
	}	
	initDraw();
}
function initDraw(){
var i;
for(i=0;i<lines.length;i++){
	createLine(lines[i]);
	window.status="State: "+i+"%";
}
for(i=0;i<lines.length;i++)
	eval("mid"+i+".style.behavior='url(../htc/sndrag.htc)';");
}
init();


</script>
</HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -