demo.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>jsMind</title>
  7. <link type="text/css" rel="stylesheet" href="../style/jsmind.css" />
  8. <style type="text/css">
  9. html,
  10. body {
  11. margin: 0;
  12. border: 0;
  13. padding: 0;
  14. width: 100%;
  15. height: 100%;
  16. overflow: hidden;
  17. }
  18. #jsmind_container {
  19. width: 100%;
  20. height: 100%;
  21. overflow: auto;
  22. /*background:#f4f4f4;*/
  23. background: #f4f4f4;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <!-- <input type="file" onchange="load_file(this);" />
  29. <button onclick="save_nodetree();">nodetree</button>
  30. <button onclick="replay();">replay</button> -->
  31. <div id="jsmind_container"></div>
  32. <script type="text/javascript" src="../js/jsmind.js"></script>
  33. <script type="text/javascript" src="../js/jsmind.draggable.js"></script>
  34. <script type="text/javascript" src="../features/jsmind.shell.js"></script>
  35. <script type="text/javascript">
  36. var _jm = null;
  37. function load_jsmind() {
  38. var mind = {
  39. meta: {
  40. name: 'demo',
  41. author: '745902130@qq.com',
  42. version: '0.2'
  43. },
  44. format: 'node_array',
  45. data: [
  46. { "id": "root", "isroot": true, "topic": "cocorobopbl" },
  47. { "id": "sub1", "parentid": "root", "topic": "cocorobopbl" },
  48. { "id": "sub11", "parentid": "sub1", "topic": "cocorobopbl" },
  49. { "id": "sub12", "parentid": "sub1", "topic": "cocorobopbl" },
  50. { "id": "sub13", "parentid": "sub1", "topic": "cocorobopbl" },
  51. { "id": "sub2", "parentid": "root", "topic": "cocorobopbl" },
  52. { "id": "sub21", "parentid": "sub2", "topic": "cocorobopbl" },
  53. { "id": "sub22", "parentid": "sub2", "topic": "cocorobopbl" },
  54. { "id": "sub3", "parentid": "root", "topic": "cocorobopbl" },
  55. ]
  56. };
  57. var options = {
  58. container: 'jsmind_container',
  59. editable: true,
  60. theme: 'primary',
  61. shortcut: {
  62. handles: {
  63. test: function (j, e) {
  64. console.log(j);
  65. }
  66. },
  67. mapping: {
  68. test: 89
  69. }
  70. }
  71. }
  72. _jm = jsMind.show(options, mind);
  73. // jm.set_readonly(true);
  74. // var mind_data = jm.get_data();
  75. // alert(mind_data);
  76. }
  77. function load_file(fi) {
  78. var files = fi.files;
  79. if (files.length > 0) {
  80. var file_data = files[0];
  81. jsMind.util.file.read(file_data, function (freemind_data, jsmind_name) {
  82. var mind = jsmind_data;
  83. if (!!mind) {
  84. _jm.show(mind);
  85. } else {
  86. console.error('can not open this file as mindmap');
  87. }
  88. });
  89. }
  90. }
  91. function save_nodetree() {
  92. var mind_data = _jm.get_data('node_tree');
  93. console.log(mind_data);
  94. }
  95. function replay() {
  96. var shell = _jm.shell;
  97. if (!!shell) {
  98. shell.replay();
  99. }
  100. }
  101. load_jsmind();
  102. </script>
  103. </body>
  104. </html>