当下流行的网页在线设计流程图

浏览:4322 发布日期:2015/04/26 分类:前端开发 关键字: 设计流程图 GooFlow
有次开会,用网页在线设计流程图来演示,在场许多客户都说牛哈,今天就分享给大家吧!~
网页在线设计流程图GooFlow插件可用来设计各种流程图、逻辑流图,数据流图,或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手,技术开发人员和用户都可使用。 并且兼容主流浏览器。
调用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()); 
}
GooFlow插件演示效果http://www.sucaihuo.com/js/77.html

附件 jQuery网页在线流程图.zip ( 426.17 KB 下载:53 次 )

最佳答案
评论( 相关
后面还有条评论,点击查看>>