实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title></title> <link href="designer/designer.css" type="text/css" rel="stylesheet"/> <link href="lib/jquery-easyui/themes/default/easyui.css" type="text/css" rel="stylesheet"/> <!-- common, all times required, imports --> <SCRIPT src='lib/wz_jsgraphics.js'></SCRIPT> <SCRIPT src='lib/mootools.js'></SCRIPT> <SCRIPT src='lib/moocanvas.js'></SCRIPT> <SCRIPT src='lib/draw2d.js'></SCRIPT> <!-- example specific imports --> <SCRIPT src="designer/MyCanvas.js"></SCRIPT> <SCRIPT src="designer/ResizeImage.js"></SCRIPT> <SCRIPT src="designer/designer.js"></SCRIPT> <SCRIPT src="designer/event/Start.js"></SCRIPT> <SCRIPT src="designer/event/End.js"></SCRIPT> <SCRIPT src="designer/connection/MyInputPort.js"></SCRIPT> <SCRIPT src="designer/connection/MyOutputPort.js"></SCRIPT> <SCRIPT src="designer/connection/DecoratedConnection.js"></SCRIPT> <SCRIPT src="designer/task/Task.js"></SCRIPT> <SCRIPT src="designer/task/UserTask.js"></SCRIPT> <SCRIPT src="designer/task/ManualTask.js"></SCRIPT> <SCRIPT src='lib/jquery-1.4.4.min.js'></SCRIPT> <script src="lib/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script> </head> <script type="text/javascript"> <!-- var jq = jQuery.noConflict(); var taskArray=[]; jq(function(){ _process_panel = jq('#process-panel'); workflow.scrollArea=_process_panel.get(0); _task_obj = jq('#task'); _properties_panel_obj = jq('#designer').layout('panel','east'); jq('.easyui-linkbutton').draggable({ proxy:function(source){ var n = jq('<div class="draggable-model-proxy"></div>'); n.html(jq(source).html()).appendTo('body'); return n; }, deltaX:0, deltaY:0, revert:true, cursor:'auto', onStartDrag:function(){ jq(this).draggable('options').cursor='not-allowed'; }, onStopDrag:function(){ jq(this).draggable('options').cursor='auto'; } }); jq('#paintarea').droppable({ accept:'.easyui-linkbutton', onDragEnter:function(e,source){ jq(source).draggable('options').cursor='auto'; }, onDragLeave:function(e,source){ jq(source).draggable('options').cursor='not-allowed'; }, onDrop:function(e,source){ //jq(this).append(source) //jq(this).removeClass('over'); var wfModel = jq(source).attr('wfModel'); if(wfModel){ var x=jq(source).draggable('proxy').offset().left; var y=jq(source).draggable('proxy').offset().top; var xOffset = workflow.getAbsoluteX(); var yOffset = workflow.getAbsoluteY(); var scrollLeft = workflow.getScrollLeft(); var scrollTop = workflow.getScrollTop(); //alert(xOffset "|" yOffset "|" scrollLeft "|" scrollTop); addModel(wfModel,x-xOffset scrollLeft,y-yOffset scrollTop); } } }); }); function addModel(name,x,y){ var task = eval("new " name "()"); //userTask.setContent("DM Approve"); task.setId(name new Date().getTime()); workflow.addFigure(task,x,y); var id = task.getId(); var jqTask = jq(task.getHTMLElement()); jqTask.bind('click',{id:id},function(e){ alert(e.data.id); _properties_panel_obj.panel('refresh','taskProperties.html'); }); taskArray[taskArray.length]={id:task.getId(),task:jqTask}; } //--> </script> <body id="designer" class="easyui-layout" style="overflow-y: hidden" scroll="no"> <div region="west" split="true" iconCls="palette-icon" title="Palette" style="width:150px;overflow:hidden;"> <div class="easyui-accordion" fit="true" border="false"> <!-- <div id="connection" title="Connection" iconCls="palette-menu-icon" class="palette-menu">--> <!-- <a href="##" class="easyui-linkbutton" plain="true" iconCls="sequence-flow-icon">SequenceFlow</a><br>--> <!-- </div>--> <div id="event" title="Event" iconCls="palette-menu-icon" class="palette-menu"> <a href="##" class="easyui-linkbutton" plain="true" iconCls="start-event-icon">Start</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="end-event-icon">End</a><br> </div> <div id="task" title="Task" iconCls="palette-menu-icon" selected="true" class="palette-menu"> <a href="##" class="easyui-linkbutton" plain="true" iconCls="user-task-icon" wfModel="draw2d.UserTask">User Task</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="manual-task-icon" wfModel="draw2d.ManualTask">Manual Task</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="service-task-icon">Service Task</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="script-task-icon">Script Task</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="mail-task-icon">Mail Task</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="receive-task-icon">Receive Task</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="business-rule-task-icon">Business Rule Task</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="subprocess-icon">SubProcess</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="callactivity-icon">CallActivity</a><br> </div> <div id="gateway" title="Gateway" iconCls="palette-menu-icon" class="palette-menu"> <a href="##" class="easyui-linkbutton" plain="true" iconCls="parallel-gateway-icon">ParallelGateway</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="exclusive-gateway-icon">ExclusiveGateway</a><br> </div> <div id="boundary-event" title="Boundary event" iconCls="palette-menu-icon" class="palette-menu"> <a href="##" class="easyui-linkbutton" plain="true" iconCls="timer-boundary-event-icon">TimerBoundaryEvent</a><br> <a href="##" class="easyui-linkbutton" plain="true" iconCls="error-boundary-event-icon">ErrorBoundaryEvent</a><br> </div> </div> </div> <div id="process-panel" region="center" split="true" iconCls="process-icon" title="Process" style="overflow:hidden;overflow-x:auto;overflow-y:auto;padding:1px;"> <div id="paintarea" style="POSITION: relative; WIDTH: 3000px; HEIGHT: 3000px" ></div> </div> <div id="properties-panel" region="east" split="true" iconCls="properties-icon" title="Properties" style="width:300px;"> </div> <div id="toolbar-panel" region="north" border="false" style="height:36px;background:#E1F0F2;"> <div style="background:#E1F0F2;padding:5px;"> <a href="javascript:void(0)" id="sb1" class="easyui-splitbutton" menu="#mm1" iconCls="icon-edit" onclick="javascript:alert('edit')">Edit</a> <a href="javascript:void(0)" id="sb2" class="easyui-splitbutton" menu="#mm2" iconCls="icon-ok" onclick="javascript:alert('ok')">Ok</a> <a href="javascript:void(0)" id="mb3" class="easyui-menubutton" menu="#mm3" iconCls="icon-help">Help</a> </div> <div id="mm1" style="width:150px;"> <div iconCls="icon-undo">Undo</div> <div iconCls="icon-redo">Redo</div> <div class="menu-sep"></div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div class="menu-sep"></div> <div> <span>Toolbar</span> <div style="width:150px;"> <div>Address</div> <div>Link</div> <div>Navigation Toolbar</div> <div>Bookmark Toolbar</div> <div class="menu-sep"></div> <div>New Toolbar...</div> </div> </div> <div iconCls="icon-remove">Delete</div> <div>Select All</div> </div> <div id="mm2" style="width:100px;"> <div iconCls="icon-ok">Ok</div> <div iconCls="icon-cancel">Cancel</div> </div> <div id="mm3" style="width:150px;"> <div>Help3</div> <div class="menu-sep"></div> <div>About3</div> </div> </div> <script type="text/javascript"> <!-- var workflow = new draw2d.MyCanvas("paintarea"); // Add the start,end,connector to the canvas var startObj = new draw2d.Start("designer/icons/type.startevent.none.png"); startObj.setId("startObj"); workflow.addFigure(startObj, 50,200); var endObj = new draw2d.End("designer/icons/type.endevent.none.png"); endObj.setId("endObj"); workflow.addFigure(endObj,700,200); //--> </script> </body> </html>
好例子网口号:伸出你的我的手 — 分享!
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论