1.usage

2023-12-14 21:34| 来源: 网络整理| 查看: 265

基本用法 * 选项界面操控实验性功能截图 (导出图片) 参与贡献贡献代码指南 1.1. 基本框架

首先，需要在页面上引用 jsmind.js 和 jsmind.css 两个文件，这里我们引用的是 CDN 上的资源，请注意使用最新的版本。

常用的 CDN 有 UNPKG，jsDelivr，以及 jsDelivr 的国内镜像。文件路径大概像这样：

https://unpkg.com/[email protected]/es6/jsmind.js https://cdn.jsdelivr.net/npm/[email protected]/es6/jsmind.js https://jsd.onmicrosoft.cn/npm/[email protected]/es6/jsmind.js

示例中url中都有版本号，强烈建议你在项目里也指明版本号，以避免版本升级给你的项目带来风险。访问 NPM 上的 jsMind 可以获取 jsmind 的最新版本号。

如果希望能够通过鼠标拖拽的方式移动节点，需要额外引用 jsmind.draggable-node.js 文件

其次，要为 jsMind 准备一个容器，jsMind 将在这个容器里显示思维导图。可自行定义容器的id、大小及样式。

最后，添加下面一段代码即可显示一个空白的思维导图：

var options = { // options 将在下一章中详细介绍 container:'jsmind_container', // [必选] 容器的ID，或者为容器的对象 editable:true, // [可选] 是否启用编辑 theme:'orange' // [可选] 主题 }; var jm = new jsMind(options); jm.show();

或者，使用下面的代码显示一个包含既定内容的思维导图：

var mind = { /* jsMind 数据，详见下一节的说明 */ }; var options = { container:'jsmind_container', editable:true, theme:'orange' }; var jm = new jsMind(options); // 让 jm 显示这个 mind 即可 jm.show(mind); 1.2. 数据格式

jsMind 支持三种数据格式，分别是 node_tree、node_array 和 freemind 格式。jsMind 可以加载其中任一种格式，也能将数据导出为任一种格式。

下面是三种数据格式的简单示例：

A. node_tree 格式，jsMind 的默认数据格式 var mind = { /* 元数据，定义思维导图的名称、作者、版本等信息 */ "meta":{ "name":"jsMind-demo-tree", "author":"[email protected]", "version":"0.2" }, /* 数据格式声明 */ "format":"node_tree", /* 数据内容 */ "data":{"id":"root","topic":"jsMind","children":[ {"id":"easy","topic":"Easy","direction":"left","expanded":false,"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","expanded":true,"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 格式 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", "expanded":false, "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 格式 var mind = { /* 元数据，定义思维导图的名称、作者、版本等信息 */ "meta":{ "name":"example", "author":"[email protected]", "version":"0.2" }, /* 数据格式声明 */ "format":"freemind", /* 数据内容 */ "data":" " }; 注

除 freemind 格式外，其余两种格式的基本数据结构如下：

{ "id":"open", // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略 "topic":"Open Source", // [必选] 节点上显示的内容 "direction":"right", // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right "expanded":true, // [可选] 该节点是否是展开状态，默认为 true } 1.3. 主题

jsMind 默认提供了 15 种主题，你可以访问功能示例页面浏览这些主题。

primary warning danger success info greensea nephrite belizehole wisteria asphalt orange pumpkin pomegranate clouds asbestos

当然，你也可以添加自己的主题。只需在 jsmind.css 中按照以下格式添加样式定义即可：

/* greensea theme */ /* greensea 即是主题名 */ 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{} /* 鼠标悬停展开/关闭节点的控制点样式 */ 1.4. 样式

除了上述主题外，你还可以为每一个节点设置单独的样式，目前 jsMind 支持以下自定义样式：

background-color: 节点的背景颜色，如 #1abc9c, blue foreground-color: 节点的文本颜色，如 #1abc9c, blue width: 节点的宽度(px)，如 400 height: 节点的高度(px)，如 400 font-size: 节点的文本字体大小(px)，如 32 font-weight: 节点的文本重量，如 bold font-style: 节点的文本样式，如 italic background-image: 节点的背景图片，可使用 url，如 http://fakeurl.com/fake-picture.png，或 data url 形式，如 data:image/png;base64,... background-rotation: 节点的背景图片旋转角度，如 30 leading-line-color: 节点的引导线颜色，如 #1abc9c, blue。

设置方法：

通过 API 配置：在 data 参数里添加上述配置即可，api 定义见 [3.4. 界面操控 - 添加节点] let data = {'width': 400, 'leading-line-color': '#33ff33'} jm.add_node(....., data) 在数据定义(数据文件)中配置：把上述参数添加到 node 的定义中即可，如： var mind = { ... format: 'node_tree', data: { id: 'root', topic: 'jsMind', children: [ { 'id': 'image-node', 'background-image': 'ant.png', 'width': '100', 'height': '100', } ], ... } 版权声明

禁止转载、禁止演绎。

jsMind 项目仍在不断升级变化，版本更新时会同时更新对应的文档。为避免给使用者带来困惑，在没有得到书面许可前，禁止转载本文档，同时禁止对本文档进行任何形式的更改。

【本文地址】

1.usage

1.usage

今日新闻

推荐新闻