web设计器--设计流程图(raphael)(一)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
web设计器--设计流程图（raphael）（一）
案例是采用raphael的js文件进行画图，适用web设计，可以下载案例，里边是一些html的案例，下载后自己研究一下数据格式引入到自己的项目里。Demo下载地址：
/detail/lilinoscar/8332927Code：[html] view plain copy <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"> <link
type="text/css"
href="lib/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> <script type="text/javascript"
src="lib/raphael-min.js"></script> <script
type="text/javascript"
src="lib/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js">&l t;/script> <script type="text/javascript"
src="lib/jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.mi n.js"></script> <script type="text/javascript"
src="myflow.js"></script> <script
type="text/javascript"
src="myflow.jpdl4.js"></script> <script
type="text/javascript"
src="myflow.editors.js"></script> <script
type="text/javascript"> $(function()
{ $('#myflow') .myflow(
{ basePath : "",
restore : eval("({states:{rect4:{type:'start',text:{text:'开始'}, attr:{ x:409, y:10, width:50, height:50}, props:{text:{value:'开始
'},temp1:{value:''},temp2:{value:''}}},rect5:{type:'task',text:{t ext:'任务1'}, attr:{ x:386, y:116, width:100, height:50}, props:{text:{value:'任务
1'},assignee:{value:''},form:{value:''},desc:{value:''}}},rect6:{ type:'fork',text:{text:'分支'}, attr:{ x:410, y:209, width:50, height:50}, props:{text:{value:'分支
'},temp1:{value:''},temp2:{value:''}}},rect7:{type:'task',text:{t ext:'任务2'}, attr:{ x:192, y:317, width:100, height:50}, props:{text:{value:'任务
2'},assignee:{value:''},form:{value:''},desc:{value:''}}},rect8:{ type:'task',text:{text:'任务3'}, attr:{ x:385, y:317, width:100,
height:50}, props:{text:{value:'任务
3'},assignee:{value:''},form:{value:''},desc:{value:''}}},rect9:{ type:'task',text:{text:'任务4'}, attr:{ x:556, y:320, width:100, height:50}, props:{text:{value:'任务
4'},assignee:{value:''},form:{value:''},desc:{value:''}}},rect10 :{type:'join',text:{text:'合并'}, attr:{ x:410, y:416, width:50, height:50}, props:{text:{value:'合并
'},temp1:{value:''},temp2:{value:''}}},rect11:{type:'end',text:{ text:'结束'}, attr:{ x:409, y:633, width:50, height:50}, props:{text:{value:'结束
'},temp1:{value:''},temp2:{value:''}}},rect12:{type:'task',text:{ text:'任务5'}, attr:{ x:384, y:528, width:100, height:50}, props:{text:{value:'任务
5'},assignee:{value:''},form:{value:''},desc:{value:''}}}},paths :{path13:{from:'rect4',to:'rect5', dots:[],text:{text:'TO 任务
1'},textPos:{x:37,y:-4},
props:{text:{value:''}}},path14:{from:'rect5',to:'rect6', dots:[],text:{text:'TO 分支'},textPos:{x:56,y:-1},
props:{text:{value:''}}},path15:{from:'rect6',to:'rect8', dots:[],text:{text:'TO 任务3'},textPos:{x:24,y:-5},
props:{text:{value:''}}},path16:{from:'rect8',to:'rect10', dots:[],text:{text:'TO 合并'},textPos:{x:41,y:8},