Skip to content

Latest commit

 

History

History
186 lines (153 loc) · 5.63 KB

1.usage.md

File metadata and controls

186 lines (153 loc) · 5.63 KB
Raw

Contents

  1. Usage
  2. Options
  3. Operation

1.1. Basic Framework

At first, 2 files (jsmind.css and jsmind.js) are required.

<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.

<script type="text/javascript" src="js/jsmind.draggable.js"></script>

The second, a div element should be in your HTML as container

<div id="jsmind_container"></div>

The last, show an empty mindmap:

<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:

<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

var mind = {
    "meta":{
        "name":"jsMind remote",
        "author":"[email protected]",
        "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

var mind = {
    "meta":{
        "name":"example",
        "author":"[email protected]",
        "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

var mind = {
    "meta":{
        "name":"example",
        "author":"[email protected]",
        "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.

  • 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.

/* greensea theme */
jmnodes.greensea jmnode{background-color:#1abc9c;color:#fff;}
jmnodes.greensea jmnode:hover{background-color:#16a085;}
jmnodes.greensea jmnode.selected{background-color:#11f;color:#fff;}
jmnodes.greensea jmnode.root{}
jmnodes.greensea jmexpander{}
jmnodes.greensea jmexpander:hover{}

COPYRIGHT

No reproduction, No derivatives.