想要在markdown文档里画一个树状图，但是手码又太累，于是就搞了这个玩意，纯当娱乐~
首先画一张“九宫格”树状图
觉得不好看可以自己画，只要包含这11种状态：首部、中部、尾部的叶子节点，首部、中部、尾部的非叶子节点以及每个节点的展开/收起状态，根节点的展开/收起状态。
接下来写一个jQuery插件
最简单的插件格式如下：
1
2
3
| $.fn.pluginName = function() {
}
|
把我们的插件写到一个新的文件里，如jquery.tree.js：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ;(function () {
var Tree = function (ele, data, opt) {
this.init = function () {
}
this.getMDStr = function () {
}
}
$.fn.tree = function (data) {
var tree = new Tree(this, data)
tree.init()
return tree
}
})()
|
这里把所有相关的逻辑封装到Tree这个类里，然后返回实例对象，供外部访问。
为了不污染全局作用域，使用自执行函数 (function(){ … })() 把代码包裹起来，文件头部添加分号为了防止在插件前引入了没有以分号结束的其他脚本，导致js解析失败。
把样式抽取到单独的css文件
如：jquery.tree.css。
OK，基本结构搞定，其他的细枝末节就放到源码里了。
效果预览：
树状图：
Markdown：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| ┌── 原核生物界
│ ├── 细菌
│ │ ├── 球菌
│ │ ├── 杆菌
│ │ └── 螺形菌
│ ├── 蓝藻
│ │ ├── 有色球藻
│ │ ├── 念珠藻
│ │ ├── 颤藻
│ │ └── 螺旋藻
│ ├── 放线菌
│ ├── 支原体
│ ├── 衣原体
│ └── 立克次氏体
├── 原生生物界
│ ├── 根足门
│ ├── 有孔虫门
│ ├── 辐足虫门
│ ├── 鞭毛虫门
│ ├── 纤毛虫门
│ ├── 孢子虫门
│ ├── 顶复门
│ └── 硅藻门
├── 菌物界
│ ├── 半子囊菌门
│ ├── 黑粉菌门
│ ├── 子囊菌门
│ ├── 锈菌门
│ └── 担子菌门
├── 植物界
│ ├── 低等植物
│ │ ├── 绿藻门
│ │ ├── 裸藻门
│ │ ├── 金藻门
│ │ ├── 黄藻门
│ │ └── 甲藻门
│ └── 高等植物
│ ├── 苔藓植物门
│ │ ├── 苔纲
│ │ ├── 藓纲
│ │ │ ├── 泥炭藓目
│ │ │ ├── 黑藓目
│ │ │ └── 真藓目
│ │ └── 角苔纲
│ ├── 蕨类植物门
│ └── 种子植物门
│ ├── 裸子植物
│ └── 被子植物
│ ├── 双子叶植物
│ └── 单子叶植物
│ ├── 泽泻亚纲
│ ├── 槟榔亚纲
│ │ ├── 棕榈目
│ │ ├── 环花草目
│ │ ├── 露兜树目
│ │ └── 天南星目
│ ├── 鸭跖草亚纲
│ ├── 姜亚纲
│ └── 百合亚纲
└── 动物界
├── 无脊椎动物
│ ├── 原生动物
│ ├── 棘皮动物
│ ├── 软体动物
│ ├── 扁形动物
│ ├── 环节动物
│ ├── 腔肠动物
│ ├── 节肢动物
│ └── 线形动物
└── 脊椎动物
|
完整代码戳这里
在线演示