demo.html 3.4 KB

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