首页 >php教程 >php手册 >在线流程图(jQuery网页版)

在线流程图(jQuery网页版)

WBOY
WBOY原创
2016-06-07 11:38:542574浏览

这是一个用来在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

AD:真正免费,域名+虚机+企业邮箱=0元

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn