demo.html 3.0 KB

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