<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>KityMinder Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
<link rel="stylesheet" href="dist/kityminder.css" rel="stylesheet">
<style type="text/css">
body
{
margin: 0;
padding: 0;
height: 100%;
}
#minder-view
{
position: absolute;
border: 1px solid #ccc;
left: 10px;
top: 10px;
bottom: 10px;
right: 10px;
z-index:99999;
}
</style>
<script type="text/javascript" src="modules/kity/dist/kity.min.js"></script>
</head>
<body>
<script id="minder-view" type="application/kityminder" minder-data-type="json">
{
"root": {
"data": {
"id": "34fe062d0c35",
"created": 1550070290,
"text": "新建脑图",
"note": " 详细信息详细信息详细信息"
},
"children": [{
"data": {
"id": "brym316cyso0",
"created": 1550070360746,
"text": "分支主题",
"layout": null,
"priority": 1,
"font-family": "微软雅黑,Microsoft YaHei",
"font-size": 32
},
"children": [{
"data": {
"id": "brym34bzos00",
"created": 1550070367616,
"text": "分支主题",
"layout": null,
"font-family": "微软雅黑,Microsoft YaHei",
"font-size": 16,
"image": "https://www.imooc.com/static/img/index/redPacket.png",
"imageTitle": "红包",
"imageSize": {
"width": 112,
"height": 128
}
},
"children": []
}]
}, {
"data": {
"id": "brym3262e4g0",
"created": 1550070362904,
"text": "分支主题",
"layout": null,
"priority": 2
},
"children": [{
"data": {
"id": "brym352zmog0",
"created": 1550070369248,
"text": "分支主题",
"layout": null,
"progress": null,
"note": "今天好高兴"
},
"children": []
}]
}, {
"data": {
"id": "brym32ujty80",
"created": 1550070364384,
"text": "分支主题",
"layout": null,
"priority": null,
"progress": 5
},
"children": [{
"data": {
"id": "bryo18w8z340",
"created": 1550075863039,
"text": "分支主题",
"hyperlink": "http://www.baidu.com今天好高兴",
"hyperlinkTitle": "",
"layout": null
},
"children": []
}]
}, {
"data": {
"id": "brym33hp0co0",
"created": 1550070365784,
"text": "分支主题",
"layout": null,
"priority": 4,
"progress": null
},
"children": []
}, {
"data": {
"id": "brynwnpyg0w0",
"created": 1550075503489,
"text": "分支主题",
"progress": 9,
"layout": null
},
"children": []
}]
},
"template": "right",
"theme": "snow",
"version": "1.4.43"
}
</script>
</body>
<script type="text/javascript" src="dist/kityminder.core.js"></script>
<!-- 弹出层 -->
<script type="text/javascript" src="layer/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
// 创建 km 实例
/* global kityminder */
var km = window.km = new kityminder.Minder();
km.setup('#minder-view');
//进制拖动
//km.disable();
//km.execCommand('hand');
//拖动
km.execCommand('camera', km.getRoot());
km.on('shownoterequest', function (event) {
console.log(event.node.data.note);
layer.msg(event.node.data.note);
});
km.on('hidenoterequest', function (event) {
console.log(event);
});
km.on('selectionchange', function () {
var node = km.getSelectedNode();
if (node) {
console.log(node);
console.log(node.data.text);
console.log(node.data.id);
}
});
</script>
</html>
评论1
最新资源