这是一个用来在WEB网页端设计流程图的UI组件,基于Jquery开发。可用来设计各种流程图、逻辑流图,数据流图,或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手,技术开发人员和用户都可使用。 并且兼容主流浏览器。
页面底部有演示、免费下载链接。若是想看更多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
相关推荐
jQuery网页在线流程图
这是一个用来在WEB网页端设计流程图的UI组件,基于Jquery开发。可用来设计各种流程图、逻辑流图,数据流图,或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手,技术开发人员和用户...
jQuery网页步骤流程图进度代码基于jquery.1.7.1.min.js制作,有两种流程图效果,代码附带详细中文注释,方便使用。
[精华]网页自制拖动流程图(jquery)返回整体对象[精华]网页自制拖动流程图(jquery)返回整体对象
这是一款在线绘图工具,可视化流程图简易绘图工具的jQuery网页可视化在线绘图工具代码。
jQuery网页左侧工作流程收缩菜单基于jquery-1.9.1.min.js制作,页面左侧竖直侧边栏菜单,可收缩折叠,点击方向箭头按钮,菜单向上或向下滑动。
jQuery网页步骤流程图进度代码基于jquery.1.7.1.min.js制作,有两种流程图效果,代码附带详细中文注释,方便使用。
jQuery业务审批流程图工具代码基于jQuery.1.10.2.min.js制作,可在线编辑,导出结果。
jQuery网页步骤流程图进度代码基于jquery.1.7.1.min.js制作,有两种流程图效果,代码附带详细中文注释,方便使用。
1. 流程图编辑:用户可以在网页上拖拽节点和连接线来创建和编辑流程图,实现对工作流程的可视化表示。 2. 模板引擎:使用JsRender模板引擎,可以方便地将数据渲染到页面上,实现动态内容的展示。 3. 交互性:通过...
非常实用好看的特效代码,可以完美运行,可以二次修改!
这是一个用来在WEB网页端设计流程图的UI组件,在线流程设计器,基于Jquery开发。可用来设计各种流程图、逻辑流图,数据流图,或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手,...
4.1流程图设计 12 4.2系统ER图设计 13 5系统功能模块实现 14 5.1.登录注册页面实现 14 5.2商品列表页面实现 16 5.3商品详细页面实现 17 5.4商品购物车页面实现 18 5.5订单页面实现 19 5.6我的账户 20 6 系统测试 20 ...
CSS3 SVG房屋交易流程图特效.zip
基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效。效果图如下: 在线预览 源码下载 html代码: <div class=step_context></div> 当前步骤: 第<input type=text value=5 id=...
tips[25] = '个人行为与小规模配合压根不需要流程与规范,当交付结果需要大规模的应用时,同一的规格就显得非常重要了。'; tips[26] = '任何创作活动都是为了满足一定的需求,创新是执行过程中的副产品;为了创新而...
EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。...先给大家展示下效果图: 项目需求:在我们平时购物的时候,经常是这样一个步
非常实用的特效代码,可以完美运行,可以二次修改!
顺序控制 分支控制(if ifelse switch) 程序流程图 8-20 3.循环控制①(for) 8-20 4.循环控制②(while dowhile) 打印金字塔案例 8-20 5.打印金字塔案例评讲 布置练习题 8-22 1.break语句 continue语句 常量 8-22 2....