Webデザイナ--設計フローチャート(raphael)
ケースはraphaelのjsファイルを採用して絵を描いて、web設計を適用して、ケースをダウンロードすることができて、中はいくつかhtmlのケースで、ダウンロードした後に自分でデータフォーマットを研究して自分のプロジェクトに導入します.
Demoダウンロードアドレス:http://download.csdn.net/detail/lilinoscar/8332927
Code:
Demoダウンロードアドレス:http://download.csdn.net/detail/lilinoscar/8332927
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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"></script>
<script type="text/javascript"
src="lib/jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.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:{text:' 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:{text:' 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}, props:{text:{value:''}}},path17:{from:'rect10',to:'rect12', dots:[],text:{text:'TO 5'},textPos:{x:36,y:-5}, props:{text:{value:''}}},path18:{from:'rect12',to:'rect11', dots:[],text:{text:'TO '},textPos:{x:32,y:0}, props:{text:{value:''}}},path19:{from:'rect6',to:'rect7', dots:[{x:244,y:232}],text:{text:'TO 2'},textPos:{x:0,y:-10}, props:{text:{value:'TO 2'}}},path20:{from:'rect7',to:'rect10', dots:[{x:242,y:435}],text:{text:'TO '},textPos:{x:-3,y:17}, props:{text:{value:'TO '}}},path21:{from:'rect6',to:'rect9', dots:[{x:607,y:234}],text:{text:'TO 4'},textPos:{x:0,y:-10}, props:{text:{value:'TO 4'}}},path22:{from:'rect9',to:'rect10', dots:[{x:607,y:439}],text:{text:'TO '},textPos:{x:-8,y:16}, props:{text:{value:'TO '}}}},props:{props:{name:{value:' '},key:{value:''},desc:{value:''}}}})"),
tools : {
save : {
onclick : function(data) {
alert('save:
' + data);
}
}
}
});
});
</script>
<style type="text/css">
body {
margin: 0;
pading: 0;
text-align: left;
font-family: Arial, sans-serif, Helvetica, Tahoma;
font-size: 12px;
line-height: 1.5;
color: black;
background-image: url(img/bg.png);
}
.node {
width: 70px;
text-align: center;
vertical-align: middle;
border: 1px solid #fff;
}
.mover {
border: 1px solid #ddd;
background-color: #ddd;
}
.selected {
background-color: #ddd;
}
.state {
}
#myflow_props table {
}
#myflow_props th {
letter-spacing: 2px;
text-align: left;
padding: 6px;
background: #ddd;
}
#myflow_props td {
background: #fff;
padding: 6px;
}
#pointer {
background-repeat: no-repeat;
background-position: center;
}
#path {
background-repeat: no-repeat;
background-position: center;
}
#task {
background-repeat: no-repeat;
background-position: center;
}
#state {
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="myflow_tools"
style="position: absolute; top: 10; left: 10; background-color: #fff; width: 70px; cursor: default; padding: 3px;"
class="ui-widget-content">
<div id="myflow_tools_handle" style="text-align: center;"
class="ui-widget-header"> </div>
<div class="node" id="myflow_save"><img src="img/save.gif" /> </div>
<div>
<hr />
</div>
<div class="node selectable" id="pointer"><img
src="img/select16.gif" /> </div>
<div class="node selectable" id="path"><img
src="img/16/flow_sequence.png" /> </div>
<div>
<hr />
</div>
<div class="node state" id="start" type="start"><img
src="img/16/start_event_empty.png" /> </div>
<div class="node state" id="state" type="state"><img
src="img/16/task_empty.png" /> </div>
<div class="node state" id="task" type="task"><img
src="img/16/task_empty.png" /> </div>
<div class="node state" id="fork" type="fork"><img
src="img/16/gateway_parallel.png" /> </div>
<div class="node state" id="join" type="join"><img
src="img/16/gateway_parallel.png" /> </div>
<div class="node state" id="end" type="end"><img
src="img/16/end_event_terminate.png" /> </div>
<div class="node state" id="end-cancel" type="end-cancel"><img
src="img/16/end_event_cancel.png" /> </div>
<div class="node state" id="end-error" type="end-error"><img
src="img/16/end_event_error.png" /> </div>
</div>
<div id="myflow_props"
style="position: absolute; top: 30; right: 50; background-color: #fff; width: 220px; padding: 3px;"
class="ui-widget-content">
<div id="myflow_props_handle" class="ui-widget-header"> </div>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
</tr>
</table>
<div> </div>
</div>
<div id="myflow"></div>
</body>
</html>