demo.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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" src="js/jsmind.draggable.js"></script>
  36. <script type="text/javascript">
  37. var _jm = null;
  38. function load_jsmind() {
  39. var mind = {
  40. meta: {
  41. name: 'demo',
  42. author: '745902130@qq.com',
  43. version: '0.2'
  44. },
  45. format: 'node_array',
  46. data: [
  47. { "id": "root", "isroot": true, "topic": "cocorobopbl" },
  48. { "id": "sub1", "parentid": "root", "topic": "cocorobopbl" },
  49. { "id": "sub11", "parentid": "sub1", "topic": "cocorobopbl" },
  50. { "id": "sub12", "parentid": "sub1", "topic": "cocorobopbl" },
  51. { "id": "sub13", "parentid": "sub1", "topic": "cocorobopbl" },
  52. { "id": "sub2", "parentid": "root", "topic": "cocorobopbl" },
  53. { "id": "sub21", "parentid": "sub2", "topic": "cocorobopbl" },
  54. { "id": "sub22", "parentid": "sub2", "topic": "cocorobopbl" },
  55. { "id": "sub3", "parentid": "root", "topic": "cocorobopbl" },
  56. ]
  57. };
  58. var options = {
  59. container: 'jsmind_container',
  60. editable: true,
  61. theme: 'primary',
  62. shortcut: {
  63. handles: {
  64. test: function (j, e) {
  65. console.log(j);
  66. }
  67. },
  68. mapping: {
  69. test: 89
  70. }
  71. }
  72. }
  73. _jm = jsMind.show(options, mind);
  74. // jm.set_readonly(true);
  75. // var mind_data = jm.get_data();
  76. // alert(mind_data);
  77. }
  78. function load_file(fi) {
  79. var files = fi.files;
  80. if (files.length > 0) {
  81. var file_data = files[0];
  82. jsMind.util.file.read(file_data, function (freemind_data, jsmind_name) {
  83. var mind = jsmind_data;
  84. if (!!mind) {
  85. _jm.show(mind);
  86. } else {
  87. console.error('can not open this file as mindmap');
  88. }
  89. });
  90. }
  91. }
  92. function save_nodetree() {
  93. var mind_data = _jm.get_data('node_tree');
  94. console.log(mind_data);
  95. }
  96. function replay() {
  97. var shell = _jm.shell;
  98. if (!!shell) {
  99. shell.replay();
  100. }
  101. }
  102. load_jsmind();
  103. </script>
  104. </body>
  105. </html>