`
cuiyadll
  • 浏览: 203839 次
文章分类
社区版块
存档分类
最新评论

在线流程图(jQuery网页版)

 
阅读更多

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


页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。

  1. 1HTML
  2.  <div id="demo" style="margin:10px"></div> 
  3.  <input id="submit" type="button" class="button" value='导出结果' onclick="Export()"/> 
  4.  <textarea id="result" row="6">
  5.  2、引入jQuery库和GooFlow相关插件:
  6.  <script type="text/javascript" src="jquery.js"></script>  
  7.  <script type="text/javascript" src="GooFlow/data.js"></script> 
  8.  <script type="text/javascript" src="GooFunc.js"></script> 
  9.  <script type="text/javascript" src="json2.js"></script> 
  10.  <script type="text/javascript" src="GooFlow/codebase/GooFlow.js"></script>
  11.  3、调用GooFlow插件:
  12.  var property = { 
  13.     width: 1200, 
  14.     height: 600, 
  15.     toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"], 
  16.     haveHead: true, 
  17.     headBtns: ["new", "open", "save", "undo", "redo", "reload"], 
  18.     //如果haveHead=true,则定义HEAD区的按钮 
  19.     haveTool: true, 
  20.     haveGroup: true, 
  21.     useOperStack: true 
  22.  }; 
  23.  var remark = { 
  24.     cursor: "选择指针", 
  25.     direct: "结点连线", 
  26.     start: "入口结点", 
  27.     "end": "结束结点", 
  28.     "task": "任务结点", 
  29.     node: "自动结点", 
  30.     chat: "决策结点", 
  31.     state: "状态结点", 
  32.     plug: "附加插件", 
  33.     fork: "分支结点", 
  34.     "join": "联合结点", 
  35.     "complex mix": "复合结点", 
  36.     group: "组织划分框编辑开关" 
  37.  }; 
  38.  var demo; 
  39. $(document).ready(function() { 
  40.     demo = $.createGooFlow($("#demo"), property); 
  41.     demo.setNodeRemarks(remark); 
  42.     //demo.onItemDel=function(id,type){ 
  43.     //    return confirm("确定要删除该单元吗?"); 
  44.     //} 
  45.     demo.loadData(jsondata); 
  46.  }); 
  47.  var out; 
  48.  function Export() { 
  49.     document.getElementById("result").value = JSON.stringify(demo.exportData()); 
  50.  }
复制代码
 

查看该特效演示及免费下载,请访问【素材火】:http://www.sucaihuo.com/js/77.html

分享到:
评论

相关推荐

    流程图jquery版

    在"流程图jquery版"中,主要的知识点包括: 1. **jQuery基础**:理解jQuery的核心概念,如选择器(用于选取HTML元素)、DOM操作(添加、删除或修改元素)、事件处理(绑定和触发事件)以及动画效果。这些都是构建...

    jQuery网页在线流程图

    《jQuery网页在线流程图》 在网页开发中,流程图是一种直观、清晰地展示程序或系统操作步骤的有效工具。jQuery,作为一个广泛使用的JavaScript库,能够简化DOM操作、事件处理、动画效果等,使得在网页中实现动态...

    jQuery+css 流程图插件

    总之,"jQuery+css 实现的单分支流程图插件"提供了一种简便的方法来在网页上创建互动式的流程图。结合jQuery的便利性和CSS的灵活性,开发者可以快速构建直观、美观的流程展示,同时还能轻松处理用户交互。

    Jquery 创建流程图

    jsPlumb与jQuery的结合使用,使得在网页上绘制和管理流程图变得非常直观和便捷。 **二、安装和引入jsPlumb** 首先,你需要在项目中引入jsPlumb库。通常,你可以通过CDN链接或者下载本地文件来实现。在HTML文件头部...

    jQuery在线绘制流程图工具代码

    《jQuery在线绘制流程图工具代码解析》 在现代网页开发中,流程图作为一种直观的表达方式,被广泛用于展示逻辑流程、工作流程或系统架构。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的功能,其中包括...

    jQuery网页步骤流程图进度代码.zip

    在`jQuery网页步骤流程图进度代码.js`中,可能包含对`$(document).ready()`函数的调用,用于在页面加载完成后执行初始化逻辑。 4. **流程图逻辑**:接下来,我们需要定义如何根据用户的操作(如点击按钮)更新流程...

    jQuery项目在线流程图

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

    jQuery网页可视化在线绘图工具代码

    【jQuery网页可视化在线绘图工具代码】是一款基于jQuery库的网页应用,旨在提供一个便捷的平台,让用户能够通过浏览器进行图形化的流程图绘制。这款工具实现了网页可视化的概念,允许用户通过直观的交互方式,无需...

    JQuery实现流程图效果

    本教程将深入探讨如何利用jQuery来创建流程图效果,这对于网页交互和数据展示至关重要。 首先,流程图是一种图形表示特定算法或过程的方式,它可以清晰地展示步骤之间的逻辑关系。在网页上实现流程图,可以使用SVG...

    jquery简易流程图编辑控件

    **jQuery简易流程图编辑控件详解** 在网页开发中,流程图是一种常用的数据展示和交互方式,能够清晰地表达步骤和决策过程。jQuery作为一个轻量级、高效的JavaScript库,为开发者提供了丰富的插件来实现各种功能,...

    [精华]网页自制拖动流程图(jquery)返回整体对象

    总结起来,利用jQuery的拖放功能,我们可以创建一个交互式、可拖动的网页流程图,并在用户操作后保存和恢复其状态。这种方法使得网页应用的流程图更具动态性和个性化,提高了用户的参与度和满意度。在实际项目中,还...

    WEB流程图(jquery实现)

    标题中的“WEB流程图(jquery实现)”指的是使用jQuery库来创建Web应用程序中的流程图。jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,使得开发者能够更高效地构建动态网页。流程...

    jQuery + d3绘制流程图.zip_d3_d3.js 流程图_d3流程图_d3画流程图_jquery d3

    通过这个教程或示例,开发者不仅可以学会如何用jQuery和d3.js绘制流程图,还能理解如何将两种库的优势结合,提高网页的交互性和可视化质量。在实际项目中,这种组合可以用于创建各种复杂的、数据驱动的可视化应用,...

    jQuery业务审批流程图工具代码.zip

    "jQuery业务审批流程图工具代码"正是这样一款基于jQuery技术实现的实用工具,它使得在线编辑和导出审批流程变得更加便捷。本文将深入探讨该工具的核心功能和实现原理,帮助开发者更好地理解和应用。 首先,我们要...

    jQuery创意线条步骤流程图动画特效

    《jQuery创意线条步骤流程图动画特效详解》 在网页设计中,吸引用户的注意力并引导他们了解复杂的流程或步骤是至关重要的。"jQuery创意线条步骤流程图动画特效"就是一种巧妙的解决方案,它利用jQuery和CSS3的技术,...

    jQuery工作流程步骤进度插件

    **jQuery工作流程步骤...其易于使用、高度可定制的特点,使得ystep成为实现流程图效果的理想选择。在实际项目中,只需合理利用ystep提供的API和配置选项,就能创造出符合业务需求的精美进度条,提升用户的交互体验。

    jQuery网页左侧工作流程收缩菜单.zip

    "jQuery网页左侧工作流程收缩菜单"是一个专为提升网页界面效率和用户友好性而设计的组件。这个项目基于jQuery库的1.9.1版本,一个广泛使用的JavaScript库,以其简洁、高效和强大的功能深受开发者喜爱。 jQuery库的...

    jquery实现PDF在线预览 jquery实现在线预览PDF文档

    以上就是使用jQuery和PDF.js实现PDF在线预览的基本流程。在实际应用中,你可能还需要考虑其他因素,比如加载进度指示、错误处理、页面缩放和旋转等。同时,如果你需要处理大量的PDF文件,可能还需要考虑性能优化,...

    jQuery左侧流程图菜单列表代码.zip

    《jQuery实现的左侧流程图菜单列表详解》 在网页设计中,导航菜单是不可或缺的一部分,它为用户提供了方便快捷的页面跳转途径。本篇文章将深入解析“jQuery左侧流程图菜单列表代码”,这是一种创新的菜单设计,以...

Global site tag (gtag.js) - Google Analytics