在线流程图（jQuery网页版）

这是一个用来在WEB网页端设计流程图的UI组件，基于Jquery开发。可用来设计各种流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手，技术开发人员和用户都可使用。 并且兼容主流浏览器。


页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。

1. 1、HTML
3.  <div id="demo" style="margin:10px">div> 
4.  <input id="submit" type="button" class="button" value='导出结果' onclick="Export()"/> 
5.  <textarea id="result" row="6">
7.  2、引入jQuery库和GooFlow相关插件：
9.  <script type="text/javascript" src="jquery.js">script>  
10.  <script type="text/javascript" src="GooFlow/data.js">script> 
11.  <script type="text/javascript" src="GooFunc.js">script> 
12.  <script type="text/javascript" src="json2.js">script> 
13.  <script type="text/javascript" src="GooFlow/codebase/GooFlow.js">script>
15.  3、调用GooFlow插件：
17.  var property = { 
18.     width: 1200, 
19.     height: 600, 
20.     toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"], 
21.     haveHead: true, 
22.     headBtns: ["new", "open", "save", "undo", "redo", "reload"], 
23.     //如果haveHead=true，则定义HEAD区的按钮 
24.     haveTool: true, 
25.     haveGroup: true, 
26.     useOperStack: true 
27.  }; 
28.  var remark = { 
29.     cursor: "选择指针", 
30.     direct: "结点连线", 
31.     start: "入口结点", 
32.     "end": "结束结点", 
33.     "task": "任务结点", 
34.     node: "自动结点", 
35.     chat: "决策结点", 
36.     state: "状态结点", 
37.     plug: "附加插件", 
38.     fork: "分支结点", 
39.     "join": "联合结点", 
40.     "complex mix": "复合结点", 
41.     group: "组织划分框编辑开关" 
42.  }; 
43.  var demo; 
44. $(document).ready(function() { 
45.     demo = $.createGooFlow($("#demo"), property); 
46.     demo.setNodeRemarks(remark); 
47.     //demo.onItemDel=function(id,type){ 
48.     //    return confirm("确定要删除该单元吗?"); 
49.     //} 
50.     demo.loadData(jsondata); 
51.  }); 
52.  var out; 
53.  function Export() { 
54.     document.getElementById("result").value = JSON.stringify(demo.exportData()); 
55.  }

复制代码

 

查看该特效演示及免费下载，请访问【素材火】：http://www.sucaihuo.com/js/77.html