页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。
1、HTML
<div id="demo" style="margin:10px"></div>
<input id="submit" type="button" class="button" value='导出结果' onclick="Export()"/>
<textarea id="result" row="6">
2、引入jQuery库和GooFlow相关插件：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="GooFlow/data.js"></script>
<script type="text/javascript" src="GooFunc.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="GooFlow/codebase/GooFlow.js"></script>
3、调用GooFlow插件：
var property = {
width: 1200,
height: 600,
toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"],
haveHead: true,
headBtns: ["new", "open", "save", "undo", "redo", "reload"],
//如果haveHead=true，则定义HEAD区的按钮
haveTool: true,
haveGroup: true,
useOperStack: true
};
var remark = {
cursor: "选择指针",
direct: "结点连线",
start: "入口结点",
"end": "结束结点",
"task": "任务结点",
node: "自动结点",
chat: "决策结点",
state: "状态结点",
plug: "附加插件",
fork: "分支结点",
"join": "联合结点",
"complex mix": "复合结点",
group: "组织划分框编辑开关"
};
var demo;
$(document).ready(function() {
demo = $.createGooFlow($("#demo"), property);
demo.setNodeRemarks(remark);
//demo.onItemDel=function(id,type){
// return confirm("确定要删除该单元吗?");
//}
demo.loadData(jsondata);
});
var out;
function Export() {
document.getElementById("result").value = JSON.stringify(demo.exportData());
}查看该特效演示及免费下载，请访问【素材火】：http://www.sucaihuo.com/js/77.html 