在线流程图（jQuery网页版）-php手册-PHP中文网

首页

php教程

php手册

在线流程图（jQuery网页版）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 11:38 AM

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