在线流程图（jQuery网页版）
- WBOYOriginal
- 2016-06-07 11:38:542527browse
这是一个用来在WEB网页端设计流程图的UI组件，基于Jquery开发。可用来设计各种流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手，技术开发人员和用户都可使用。 并且兼容主流浏览器。
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。1、HTML<br>
<br>
<div></div> <br>
<input> <br>
<textarea><br>
<br>
2、引入jQuery库和GooFlow相关插件：<br>
<br>
<script></script> <br>
<script></script> <br>
<script></script> <br>
<script></script> <br>
<script></script><br>
<br>
3、调用GooFlow插件：<br>
<br>
var property = { <br>
width: 1200, <br>
height: 600, <br>
toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"], <br>
haveHead: true, <br>
headBtns: ["new", "open", "save", "undo", "redo", "reload"], <br>
//如果haveHead=true，则定义HEAD区的按钮 <br>
haveTool: true, <br>
haveGroup: true, <br>
useOperStack: true <br>
}; <br>
var remark = { <br>
cursor: "选择指针", <br>
direct: "结点连线", <br>
start: "入口结点", <br>
"end": "结束结点", <br>
"task": "任务结点", <br>
node: "自动结点", <br>
chat: "决策结点", <br>
state: "状态结点", <br>
plug: "附加插件", <br>
fork: "分支结点", <br>
"join": "联合结点", <br>
"complex mix": "复合结点", <br>
group: "组织划分框编辑开关" <br>
}; <br>
var demo; <br>
$(document).ready(function() { <br>
demo = $.createGooFlow($("#demo"), property); <br>
demo.setNodeRemarks(remark); <br>
//demo.onItemDel=function(id,type){ <br>
// return confirm("确定要删除该单元吗?"); <br>
//} <br>
demo.loadData(jsondata); <br>
}); <br>
var out; <br>
function Export() { <br>
document.getElementById("result").value = JSON.stringify(demo.exportData()); <br>
}</textarea>查看该特效演示及免费下载，请访问【素材火】：http://www.sucaihuo.com/js/77.html
AD：真正免费，域名+虚机+企业邮箱=0元