<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
v\:*{BEHAVIOR:url(#default#VML)}body{margin:0,0,0,0;}#group{position:absolute;top:0px;left:0px;height:100%;width:100%;z-index:-1000;}#menu table{font-size:11px;background-image:url(img/menubg.gif);z-index:1000;height:100%;}#menu td{white-space:nowrap;}#movebar{font-size:11px;z-index:1000;cursor:move;height:30;width:8;}#movebar div{height:30;width:8;background-image:url(img/grid-blue-split.gif);}#menu img{vertical-align:middle;height:16px;}#menu span{vertical-align:bottom;cursor:hand;padding-left:3px;padding-top:5px;padding-bottom:2px;padding-right:5;}.x-window{}.x-window-tc{background:transparent url(img/window/top-bottom.png) repeat-x 0 0;overflow:hidden;zoom:1;height:25px;padding-top:5px;font-size:12px;cursor:move;}.x-window-tl{background:transparent url(img/window/left-corners.png) no-repeat 0 0;padding-left:6px;zoom:1;z-index:1;position:relative;}.x-window-tr{background:transparent url(img/window/right-corners.png) no-repeat right 0;padding-right:6px;}.x-window-bc{background:transparent url(img/window/top-bottom.png) repeat-x 0 bottom;zoom:1;text-align:center;height:30px;padding-top:4px;}.x-window-bl{background:transparent url(img/window/left-corners.png) no-repeat 0 bottom;padding-left:6px;zoom:1;}.x-window-br{background:transparent url(img/window/right-corners.png) no-repeat right bottom;padding-right:6px;zoom:1;}.x-window-mc{border:1px solid #99bbe8;padding:0;margin:0;font:normal 11px tahoma,arial,helvetica,sans-serif;background:#dfe8f6;width:384px;height:231px;}.x-window-ml{background:transparent url(img/window/left-right.png) repeat-y 0 0;padding-left:6px;zoom:1;}.x-window-mr{background:transparent url(img/window/left-right.png) repeat-y right 0;padding-right:6px;zoom:1;}.x-tool-close{overflow:hidden;width:15px;height:15px;float:right;cursor:pointer;background:transparent url(img/window/tool-sprites.gif) no-repeat;background-position:0 -0;margin-left:2px;}.x-tab-panel-header{border:1px solid #8db2e3;padding-bottom:2px;border-top-width:0;border-left-width:0;border-right-width:0;height:26px;}.x-tab-panel-body{overflow-y:auto;height:200px;display:none;}.x-tab-panel-body-show{overflow-y:auto;height:200px;padding-top:3px;}.x-tab-strip-top{float:left;width:100%;height:27px;padding-top:1px;background:url(img/window/tab-strip-bg.gif) #cedff5 repeat-x top;}.x-tab-strip-wrap{width:100%;border-bottom:1px solid #8db2e3;}.x-tab-strip-top ul{list-style:none;margin:0px;padding:0px;}.x-tab-strip-top li{float:left;display:block;width:60px;padding-left:3px;text-align:center;font-size:11px;}.x-tab-strip-top .x-tab-left{background:transparent url(img/window/tabs-sprite.gif) no-repeat 0 -51px;padding-left:10px;}.x-tab-strip-top .x-tab-right{background:transparent url(img/window/tabs-sprite.gif) no-repeat right -351px;padding-right:10px;}.x-tab-strip-top .x-tab-middle{background:transparent url(img/window/tabs-sprite.gif) repeat-x 0 -201px;height:25px;overflow:hidden;padding-top:5px;cursor:hand;}.x-tab-strip-top .x-tab-strip-active .x-tab-left{background:transparent url(img/window/tabs-sprite.gif) no-repeat 0 0px;padding-left:10px;}.x-tab-strip-top .x-tab-strip-active .x-tab-right{background:transparent url(img/window/tabs-sprite.gif) no-repeat right -301px;padding-right:10px;}.x-tab-strip-top .x-tab-strip-active .x-tab-middle{background:transparent url(img/window/tabs-sprite.gif) repeat-x 0 -151px;height:25px;overflow:hidden;padding-top:5px;font-weight:bold;cursor:hand;}.x-form-field{font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin:0;background:#FFFFFF url(../images/default/form/text-bg.gif) repeat-x scroll 0 0;border:1px solid #B5B8C8;padding:1px 3px;width:200;overflow:hidden;}.btn{BORDER-RIGHT:#7b9ebd 1px solid;PADDING-RIGHT:2px;BORDER-TOP:#7b9ebd 1px solid;PADDING-LEFT:2px;FONT-SIZE:12px;FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);BORDER-LEFT:#7b9ebd 1px solid;CURSOR:hand;COLOR:black;PADDING-TOP:2px;BORDER-BOTTOM:#7b9ebd 1px solid}
</style>
<script language="javascript">
function Group(){this.id=null;this.name=null;this.count=0;this.nodes=[];this.lines=[];this.selectedObj=[];this.selectedLineFrom=[];this.selectedLineTo=[];this.mouseX= -1;this.mouseY= -1;this.mouseEndX= -1;this.mouseEndY= -1;this.action=null;this.lineFlag=null;this.multiSelect=false;this.ctrlKey=false;this.nodeMirror=null;this.lineMirror=null;this.bottomHeight=10;this.rightWidth=10;this.init=function(){var obj=document.getElementById('group');obj.setAttribute('bindClass',this);obj.onmousedown=GroupEvent.mouseDown;obj.onmousemove=GroupEvent.mouseMove;obj.onmouseup=GroupEvent.mouseUp;obj.onkeydown=GroupEvent.keyDown;obj.onkeyup=GroupEvent.keyUp;this.lineMirror=new Line();this.lineMirror.textFlag=false;this.lineMirror.mirrorFlag=true;this.lineMirror.init();this.lineMirror.setDisplay('none');this.lineMirror.strokeObj.dashStyle='dashdot';this.lineMirror.obj.strokecolor='#000000';this.nodeMirror=new Node();this.nodeMirror.strokeFlag=true;this.nodeMirror.shadowFlag=false;this.nodeMirror.textFlag=false;this.nodeMirror.mirrorFlag=true;this.nodeMirror.init();this.nodeMirror.setDisplay('none');this.nodeMirror.obj.strokecolor='black';this.nodeMirror.obj.style.zIndex='100';this.nodeMirror.obj.filled=false;this.nodeMirror.strokeObj.dashstyle='dot';};this.getObjectNum=function(){this.count++;return this.count;};this.point=function(flag){if(flag=='down'){this.mouseX=GroupEvent.getMouseX();this.mouseY=GroupEvent.getMouseY();}else if(flag=='up'){this.mouseEndX=GroupEvent.getMouseX();this.mouseEndY=GroupEvent.getMouseY();}};this.getEventNode=function(flag){var res=null;var nodeNum=this.nodes.length;var node=null;var x;var y;if(flag=='down'){x=this.mouseX;y=this.mouseY;}else if(flag=='up'){x=this.mouseEndX;y=this.mouseEndY;}for(var i=(nodeNum-1);i>=0;i--){node=this.nodes[i];if(node.pointInObj(x,y)){res=node;break;}}return res;};this.getEventLine=function(){var res=null;var lineNum=this.lines.length;var line=null;var x=this.mouseX;var y=this.mouseY;var isStroke= -1;for(var i=(lineNum-1);i>=0;i--){line=this.lines[i];if(line.pointInObj(x,y)){if(res==null||line.obj.style.zIndex=='22'){res=null;res=GroupEvent.insertObjInArr(res,line);isStroke=line.pointInStroke(x,y);if(isStroke==0){this.selectedLineTo=[];this.selectedLineFrom=[];this.selectedLineTo=GroupEvent.insertObjInArr(this.selectedLineTo,line);}else if(isStroke==1){this.selectedLineTo=[];this.selectedLineFrom=[];this.selectedLineFrom=GroupEvent.insertObjInArr(this.selectedLineFrom,line);}}}}return res;};this.moveSelectedObj=function(){var x=GroupEvent.getMouseX();var y=GroupEvent.getMouseY();var num=this.selectedObj.length;var lineNum=this.lines.length;var line=null;for(var i=0;i<num;i++){this.selectedObj[i].move(x,y,this.mouseX,this.mouseY);for(var j=0;j<lineNum;j++){line=this.lines[j];if((line.fromObj==this.selectedObj[i])||(line.toObj==this.selectedObj[i])){line.relink();}}}};this.moveSelectedObjEnd=function(){var num=this.selectedObj.length;for(var i=0;i<num;i++){this.selectedObj[i].moveEnd();}};this.moveLine=function(){var x=GroupEvent.getMouseX();var y=GroupEvent.getMouseY();var num=this.selectedLineTo.length;for(var i=0;i<num;i++){this.selectedLineTo[i].setTo(x,y,null);}num=this.selectedLineFrom.length;for(var i=0;i<num;i++){this.selectedLineFrom[i].setFrom(x,y,null);}};this.moveLineEnd=function(selNode){var num=this.selectedLineTo.length;if(selNode!=null){for(var i=0;i<num;i++){if(this.fuckyou(this.selectedLineTo[i].fromObj,selNode)){this.selectedLineTo[i].setTo(this.mouseEndX,this.mouseEndY,selNode);this.selectedLineTo[i].relink();}else{this.selectedLineTo[i].relink();}}}else{for(var i=0;i<num;i++){this.selectedLineTo[i].relink();
没有合适的资源?快使用搜索试试~ 我知道了~
纯JS实现画工作流的流程图
共46个文件
gif:30个
png:5个
psd:4个
4星 · 超过85%的资源 需积分: 49 374 下载量 111 浏览量
2012-01-17
10:25:44
上传
评论 6
收藏 67KB RAR 举报
温馨提示
使用纯JS实现画工作流的流程图,不使用任何插件,是你可以实现自己的WEB工作流设计工具
资源推荐
资源详情
资源评论
收起资源包目录
hsq_flow_tool.rar (46个子文件)
hsq_flow_tool
hsq
hsq.html 73KB
img
img_1.ico 766B
img.gif 202B
member.gif 972B
drop-add.gif 1001B
btn.gif 1KB
grid-blue-split.gif 817B
end.gif 185B
user_green.gif 985B
page-next-disabled.gif 875B
img_2.gif 238B
img_1.gif 342B
forward.gif 990B
node.gif 1008B
delete.gif 944B
mini-right.gif 872B
window
top-bottom.psd 9KB
left-corners.png 272B
left-corners.psd 15KB
right-corners.psd 15KB
top-bottom.png 191B
icon-error.gif 2KB
left-right.psd 1KB
tab-strip-bg.png 259B
right-corners.png 340B
icon-info.gif 2KB
left-right.png 145B
icon-warning.gif 1KB
tabs-sprite.gif 2KB
tool-sprites.gif 4KB
icon-question.gif 2KB
Thumbs.db 18KB
page-next.gif 875B
folder.gif 1003B
pick-button.gif 1KB
grid.gif 960B
start.gif 185B
bg.jpg 363B
loading.gif 771B
menubg.gif 904B
img.ico 766B
save.gif 1014B
folder_open.gif 997B
drop-yes.gif 1016B
Thumbs.db 46KB
Thumbs.db 6KB
共 46 条
- 1
suzg110
- 粉丝: 0
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
- 5
- 6
前往页