jQuery网页在线流程图

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


HTML

<div id="demo" style="margin:10px"></div> 
<input id="submit" type="button" class="button" value='导出结果' onclick="Export()"/> 
<textarea id="result" row="6">

引入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>

调用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()); 
}HTML
<div id="demo" style="margin:10px"></div> <input id="submit" type="button" class="button" value='导出结果' onclick="Export()"/> <textarea id="result" row="6">

引入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>

调用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()); }
此资源下载价格为28小窝币,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:28 小窝币
VIP优惠:包年VIP免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录