Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 文章标签
  • 文章投稿
  • 关于我们

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

Mind elixir

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://mindelixir.ink/#/
GitHub:https://github.com/ssshooter/mind-elixir-core
描述信息:一个免费开源的思维导图内核
访问官网
GitHub

安装

NPM

npm i mind-elixir -S
import MindElixir, { E } from 'mind-elixir'

script 标签引入

<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>

HTML 结构

<div class="outer">
  <div id="map"></div>
</div>
<style>
  .outer {
    position: relative;
    margin: 50px;
  }
  #map {
    height: 500px;
    width: 100%;
    overflow: auto;
  }
</style>

初始化

let mind = new MindElixir({
  el: '#map',
  direction: MindElixir.LEFT,
  data: MindElixir.new('new topic'), // 也可以把 getDataAll 得到的数据初始化
  draggable: true, // 启用拖动 default true
  contextMenu: true, // 启用右键菜单 default true
  toolBar: true, // 启用工具栏 default true
  nodeMenu: true, // 启用节点菜单 default true
  keypress: true, // 启用快捷键 default true
})
mind.init()

// get a node
E('node-id')

Data Export

mind.getAllData()
// see src/example.js


使用提示

direction 选项

direction 选项可选 MindElixir.LEFT、MindElixir.RIGHT 和 MindElixir.SIDE。

HTML 结构

挂载的目标需要定宽高,可以是百分百;外层元素建议设置 position: relative;,否则菜单位置以视窗为标准分布。

E 函数

在使用节点操作方法时需要传入的参数可以借助 E 函数获得。

mind.insertSibling(E('bd4313fbac40284b'))

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://web.fly63.com/nav/2258

更多»
热门资源
Vue
Vue.js是一套构建用户界面的渐进式JavaScript框架
官网
GitHub
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网
GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网
GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网
GitHub
jquery
一个快速、简洁的JavaScript代码库
官网
GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网
GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网
GitHub
nw.js
轻量级桌面应用开发的捷径
官网
GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网
GitHub
nuxt.js
基于 Vue.js 的轻量级、服务端渲染 (SSR) 应用框架
官网
GitHub
Next.js
实现react的服务端渲染的框架
官网
GitHub
Electron
基于Chromium 和 Node.js, 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
官网
GitHub
类似于Mind elixir的资源
vue-rx
Vue.js的RxJS集成
点击进入
GitHub
cool-admin
基于egg.js的后台开发框架
官网
Corona SDK
一个著名的跨平台框架
官网
jquery
一个快速、简洁的JavaScript代码库
官网
GitHub
construct-js
一个用于创建字节级别数据结构的库
点击进入
GitHub
ShareDB
用于并发编辑系统的前端数据库
点击进入
GitHub
workbox
谷歌推进的 web 应用新模型,将网站升级成 PWA
官网
GitHub
Flux
Facebook用户建立客户端Web应用的前端架构
官网
GitHub
目录

手机扫一扫预览

首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架

Copyright © 2018 Web前端开发网 All Rights Reserved. 分享编程学习资源(教程/框架/库)、在线工具、技术教程、内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。