You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
5.7 KiB
187 lines
5.7 KiB
[Contents](index.md)
|
|
|
|
1. **Usage**
|
|
2. [Options](2.options.md)
|
|
3. [Operation](3.operation.md)
|
|
|
|
|
|
1.1. Basic Framework
|
|
===
|
|
|
|
At first, 2 files (jsmind.css and jsmind.js) are required.
|
|
|
|
```html
|
|
<link type="text/css" rel="stylesheet" href="style/jsmind.css" />
|
|
<script type="text/javascript" src="js/jsmind.js"></script>
|
|
```
|
|
|
|
add script jsmind.draggable.js for enabling drag-and-drop feature.
|
|
|
|
```html
|
|
<script type="text/javascript" src="js/jsmind.draggable.js"></script>
|
|
```
|
|
|
|
The second, a div element should be in your HTML as container
|
|
|
|
```html
|
|
<div id="jsmind_container"></div>
|
|
```
|
|
|
|
The last, show an empty mindmap:
|
|
|
|
```javascript
|
|
<script type="text/javascript">
|
|
var options = { // for more detail at next chapter
|
|
container:'jsmind_container', // [required] id of container
|
|
editable:true, // [required] whether allow edit or not
|
|
theme:'orange' // [required] theme
|
|
};
|
|
var jm = new jsMind(options);
|
|
jm.show();
|
|
</script>
|
|
```
|
|
|
|
Or, show a mindmap with some topics:
|
|
|
|
```javascript
|
|
<script type="text/javascript">
|
|
var mind = { /* jsMind data, for more detail at next section */ };
|
|
var options = {
|
|
container:'jsmind_container',
|
|
editable:true,
|
|
theme:'orange'
|
|
};
|
|
var jm = new jsMind(options);
|
|
// show it
|
|
jm.show(mind);
|
|
</script>
|
|
```
|
|
|
|
1.2. Data Format
|
|
===
|
|
|
|
Three formats are supported by jsMind: `node-tree format`,`node-array format`,`freemind format`. jsMind can load either format below, also can export data for any format.
|
|
|
|
These are simple demo for the 3 data format:
|
|
|
|
A. node-tree format
|
|
---
|
|
|
|
```javascript
|
|
var mind = {
|
|
"meta":{
|
|
"name":"jsMind remote",
|
|
"author":"hizzgdev@163.com",
|
|
"version":"0.2"
|
|
},
|
|
"format":"node_tree",
|
|
"data":{"id":"root","topic":"jsMind","children":[
|
|
{"id":"easy","topic":"Easy","direction":"left","children":[
|
|
{"id":"easy1","topic":"Easy to show"},
|
|
{"id":"easy2","topic":"Easy to edit"},
|
|
{"id":"easy3","topic":"Easy to store"},
|
|
{"id":"easy4","topic":"Easy to embed"}
|
|
]},
|
|
{"id":"open","topic":"Open Source","direction":"right","children":[
|
|
{"id":"open1","topic":"on GitHub"},
|
|
{"id":"open2","topic":"BSD License"}
|
|
]},
|
|
{"id":"powerful","topic":"Powerful","direction":"right","children":[
|
|
{"id":"powerful1","topic":"Base on Javascript"},
|
|
{"id":"powerful2","topic":"Base on HTML5"},
|
|
{"id":"powerful3","topic":"Depends on you"}
|
|
]},
|
|
{"id":"other","topic":"test node","direction":"left","children":[
|
|
{"id":"other1","topic":"I'm from local variable"},
|
|
{"id":"other2","topic":"I can do everything"}
|
|
]}
|
|
]}
|
|
};
|
|
```
|
|
|
|
B. node-array format
|
|
---
|
|
|
|
```javascript
|
|
var mind = {
|
|
"meta":{
|
|
"name":"example",
|
|
"author":"hizzgdev@163.com",
|
|
"version":"0.2"
|
|
},
|
|
"format":"node_array",
|
|
"data":[
|
|
{"id":"root", "isroot":true, "topic":"jsMind"},
|
|
|
|
{"id":"easy", "parentid":"root", "topic":"Easy", "direction":"left"},
|
|
{"id":"easy1", "parentid":"easy", "topic":"Easy to show"},
|
|
{"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},
|
|
{"id":"easy3", "parentid":"easy", "topic":"Easy to store"},
|
|
{"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},
|
|
|
|
{"id":"open", "parentid":"root", "topic":"Open Source", "direction":"right"},
|
|
{"id":"open1", "parentid":"open", "topic":"on GitHub"},
|
|
{"id":"open2", "parentid":"open", "topic":"BSD License"},
|
|
|
|
{"id":"powerful", "parentid":"root", "topic":"Powerful", "direction":"right"},
|
|
{"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},
|
|
{"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},
|
|
{"id":"powerful3", "parentid":"powerful", "topic":"Depends on you"},
|
|
]
|
|
};
|
|
```
|
|
|
|
C. freemind format
|
|
---
|
|
|
|
```javascript
|
|
var mind = {
|
|
"meta":{
|
|
"name":"example",
|
|
"author":"hizzgdev@163.com",
|
|
"version":"0.2"
|
|
},
|
|
"format":"freemind",
|
|
"data":"<map version=\"1.0.1\"> <node ID=\"root\" TEXT=\"jsMind\" > <node ID=\"easy\" POSITION=\"left\" TEXT=\"Easy\" > <node ID=\"easy1\" TEXT=\"Easy to show\" /> <node ID=\"easy2\" TEXT=\"Easy to edit\" /> <node ID=\"easy3\" TEXT=\"Easy to store\" /> <node ID=\"easy4\" TEXT=\"Easy to embed\" /> </node> <node ID=\"open\" POSITION=\"right\" TEXT=\"Open Source\" > <node ID=\"open1\" TEXT=\"on GitHub\" /> <node ID=\"open2\" TEXT=\"BSD License\" /> </node> <node ID=\"powerful\" POSITION=\"right\" TEXT=\"Powerful\" > <node ID=\"powerful1\" TEXT=\"Base on Javascript\" /> <node ID=\"powerful2\" TEXT=\"Base on HTML5\" /> <node ID=\"powerful3\" TEXT=\"Depends on you\" /> </node> <node ID=\"other\" POSITION=\"left\" TEXT=\"test node\" > <node ID=\"other1\" TEXT=\"I'm from local variable\" /> <node ID=\"other2\" TEXT=\"I can do everything\" /> </node> </node> </map>"
|
|
};
|
|
```
|
|
|
|
1.3. Themes
|
|
---
|
|
|
|
15 themes were supported in jsmind, you can preview those themes by visiting [feature-demo](http://hizzgdev.github.io/jsmind/example/2_features.html).
|
|
|
|
+ primary
|
|
+ warning
|
|
+ danger
|
|
+ success
|
|
+ info
|
|
+ greensea
|
|
+ nephrite
|
|
+ belizehole
|
|
+ wisteria
|
|
+ asphalt
|
|
+ orange
|
|
+ pumpkin
|
|
+ pomegranate
|
|
+ clouds
|
|
+ asbestos
|
|
|
|
or, you can add your custom theme in jsmind.css.
|
|
|
|
```css
|
|
/* greensea theme */
|
|
jmnodes.theme-greensea jmnode{background-color:#1abc9c;color:#fff;}
|
|
jmnodes.theme-greensea jmnode:hover{background-color:#16a085;}
|
|
jmnodes.theme-greensea jmnode.selected{background-color:#11f;color:#fff;}
|
|
jmnodes.theme-greensea jmnode.root{}
|
|
jmnodes.theme-greensea jmexpander{}
|
|
jmnodes.theme-greensea jmexpander:hover{}
|
|
```
|
|
|
|
|
|
COPYRIGHT
|
|
===
|
|
No reproduction, No derivatives.
|
|
|