-
Notifications
You must be signed in to change notification settings - Fork 3
/
home.htm
224 lines (220 loc) · 7.76 KB
/
home.htm
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSON Editor</title>
<style>
body {
font-family: Consolas, "Couriers New", monospace;
margin: 0;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
mark {
background-color: #ffe288;
padding: 0 .5ex;
border-radius: 5px;
}
#modal {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .4;
z-index: 100;
}
#dialog {
position: fixed;
top: 50%;
left: 50%;
z-index: 200;
border: 2px solid #00a5e7;
border-radius: 8px;
min-width: 320px;
background: #fff;
}
#dialog h3 {
margin: 0;
font-size: 16px;
padding: 4px 16px 4px 4px;
border-bottom: 2px solid #00a5e7;
}
#dialog p {
line-height: 24px;
padding: 14px 16px 8px 12px;
text-indent: 16px;
margin: 0;
background: transparent none no-repeat 8px 16px;
}
#dialog.error p {
background-image: url(images/error.png);
}
</style>
<link rel="stylesheet" href="style/input.css" />
<link rel="stylesheet" href="style/visual.css" />
<link rel="stylesheet" href="style/plugin.css" />
<link rel="stylesheet" href="plugins/boolean-editor/style.css" />
<link rel="stylesheet" href="plugins/tab/style.css" />
<link rel="stylesheet" href="plugins/theme-switcher/preview.css" />
<link rel="stylesheet" href="plugins/date-editor/style.css" />
<link rel="stylesheet" href="plugins/collapser/style.css" />
<link rel="stylesheet" href="plugins/string-editor/style.css" />
</head>
<body>
<div id="page">
<div id="content">
<h1>JSON Visualizer</h1>
<form action="visual" method="post">
<textarea id="json" name="json"></textarea>
<div id="instruction">
<p>输入一段<a href="http://www.json.org/json-zh.html" title="介绍 JSON"><mark>JSON</mark></a>或拖动一个包含<a href="http://www.json.org/json-zh.html" title="介绍 JSON">JSON</a>的<mark>文本文件</mark>。试一下这段<mark id="test">测试数据</mark></p>
<input type="submit" id="submit" value="可视化">
</div>
</form>
</div>
<aside id="sidebar">
<h2>更新日志</h2>
<ol id="events">
<li>
<time>2011-03-18</time>
<ul>
<li>添加requestInfoSection函数</li>
<li>Path插件</li>
</ul>
</li>
<li>
<time>2011-03-17</time>
<ul>
<li>优化DOM结构</li>
</ul>
</li>
<li>
<time>2011-03-07</time>
<ul>
<li>添加可视化过程事件</li>
<li>Collapsert由插件实现</li>
<li>插件体系 - Behavior模块</li>
<li>插件体系 - Behavior模块</li>
<li>String Editor插件</li>
</ul>
</li>
<li>
<time>2011-03-06</time>
<ul>
<li>完善Agent模块</li>
<li>重构类型体系，可扩展类型</li>
<li>Date Calendar类型插件 - 仅演示类型扩展系统</li>
</ul>
</li>
<li>
<time>2011-03-05</time>
<ul>
<li>重构插件模块</li>
<li>插件体系 - Agent模块</li>
</ul>
</li>
<li>
<time>2011-03-03</time>
<ul>
<li>重构各大插件模块</li>
</ul>
</li>
<li>
<time>2011-03-02</time>
<ul>
<li>插件体系 - ModalFrame模块</li>
<li>换肤插件 - 仅DEMO用意</li>
</ul>
</li>
<li>
<time>2011-02-29</time>
<ul>
<li>优化Popup的位置算法</li>
<li>插件体系 - Toolbar模块</li>
<li>Tab插件 - 仅DEMO用意</li>
</ul>
</li>
<li>
<time>2011-02-28</time>
<ul>
<li>引入jQuery 1.7.1</li>
<li>插件体系 - Popup模块</li>
<li>Boolean Editor插件 - 仅DEMO用意</li>
</ul>
</li>
<li>
<time>2011-02-24</time>
<ul>
<li>首页简单制作</li>
<li>错误提示功能</li>
<li>使用Javascript对TAB宽度进行严格校准</li>
<li>字符串值换行控制</li>
</ul>
</li>
<li>
<time>2011-02-23</tile>
<ul>
<li>JSON可视化</li>
</ul>
</li>
</ol>
<h2>计划事项</h2>
<ol id="tasks">
<li>
<span>第一阶段</span>
<ul>
<li>数值滑动插件</li>
<li>颜色拾取插件</li>
<li>布尔型取反插件</li>
<li>数组排序插件</li>
</ul>
</li>
<li>
<span>第二阶段</span>
<ul>
<li>键值内联编辑插件</li>
<li>属性删除插件</li>
<li>状态机解析JSON</li>
</ul>
</li>
</ol>
</aside>
</div>
<div id="visual" style="display: none;">
<div id="root" class="visual-root"></div>
</div>
<div id="modal" style="display: none;"></div>
<div id="dialog" style="display: none;">
<h3></h3>
<p></p>
</div>
<script src="script/jquery-1.7.1.js"></script>
<script src="script/home.js"></script>
<script src="script/input.js"></script>
<script src="script/visual.js"></script>
<script src="script/plugin-base.js"></script>
<script src="script/plugin-toolbar.js"></script>
<script src="script/plugin-popup.js"></script>
<script src="script/plugin-modal-frame.js"></script>
<script src="script/plugin-agent.js"></script>
<script src="script/plugin-behavior.js"></script>
<script src="plugins/boolean-editor/plugin.js"></script>
<script src="plugins/tab/plugin.js"></script>
<script src="plugins/theme-switcher/plugin.js"></script>
<script src="plugins/date-editor/plugin.js"></script>
<script src="plugins/collapser/plugin.js"></script>
<script src="plugins/string-editor/plugin.js"></script>
<script src="plugins/path/plugin.js"></script>
</body>
</html>