demo.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>流程图DEMO</title>
  6. <!--[if lt IE 9]>
  7. <?import namespace="v" implementation="#default#VML" ?>
  8. <![endif]-->
  9. <link rel="stylesheet" type="text/css" href="css/GooFlow2.css" />
  10. <script type="text/javascript" src="js/data.js"></script>
  11. <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
  12. <script type="text/javascript" src="js/GooFunc.js"></script>
  13. <script type="text/javascript" src="js/GooFlow.js"></script>
  14. </head>
  15. <body>
  16. <div id="goolflow"></div>
  17. <script type="text/javascript">
  18. var property = {
  19. width: 1200,
  20. height: 600,
  21. toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "recombination"],
  22. haveHead: true,
  23. headBtns: ["new", "open", "save", "undo", "redo", "reload"], //如果haveHead=true,则定义HEAD区的按钮
  24. haveTool: true,
  25. haveGroup: true,
  26. useOperStack: true
  27. };
  28. var remark = {
  29. cursor: "选择指针",
  30. direct: "结点连线",
  31. start: "入口结点",
  32. "end": "结束结点",
  33. "task": "任务结点",
  34. node: "自动结点",
  35. chat: "决策结点",
  36. state: "状态结点",
  37. plug: "附加插件",
  38. fork: "分支结点",
  39. "join": "联合结点",
  40. recombination: "复合结点",
  41. group: "组织划分框编辑开关"
  42. };
  43. var goolflow;
  44. $(document).ready(function() {
  45. goolflow = $.createGooFlow($("#goolflow"), property);
  46. goolflow.setNodeRemarks(remark);
  47. goolflow.loadData(jsondata);
  48. goolflow.onBtnSaveClick = function() {
  49. console.log(goolflow.exportData())
  50. }
  51. });
  52. </script>
  53. </body>
  54. </html>