forked from abodelot/jquery.json-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
76 lines (72 loc) · 1.89 KB
/
demo.html
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
<!doctype HTML>
<html>
<head>
<title>jQuery json-viewer</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="json-viewer/jquery.json-viewer.js"></script>
<link href="json-viewer/jquery.json-viewer.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body {
margin: 0 100px;
font-family: sans-serif;
}
textarea#json-input {
width: 100%;
height: 200px;
}
pre#json-renderer {
border: 1px solid #aaa;
padding: 0.5em 1.5em;
}
</style>
<script>
$(function() {
$('#btn-json-viewer').click(function() {
try {
var input = eval('(' + $('#json-input').val() + ')');
}
catch (error) {
return alert("Cannot eval JSON: " + error);
}
var options = {
collapsed: $('#collapsed').is(':checked'),
withQuotes: $('#with-quotes').is(':checked')
};
$('#json-renderer').jsonViewer(input, options);
});
// Display JSON sample on load
$('#btn-json-viewer').click();
});
</script>
</head>
<body>
<h1><a href="https://github.com/abodelot/jquery.json-viewer">jQuery json-viewer</a></h1>
<textarea id="json-input" autocomplete="off">
{
"id": 1001,
"type": "donut",
"name": "Cake",
"description": "http://en.wikipedia.org/wiki/Doughnut",
"price": 2.55,
"available": {
store: 42,
warehouse: 600
},
"topping": [
{ "id": 5001, "type": "None" },
{ "id": 5002, "type": "Glazed" },
{ "id": 5005, "type": "Sugar" },
{ "id": 5003, "type": "Chocolate" },
{ "id": 5004, "type": "Maple" }
]
}</textarea>
<p>
Options:
<label><input type="checkbox" id="collapsed" />Collapse nodes</label>
<label><input type="checkbox" id="with-quotes" />Keys with quotes</label>
</p>
<button id="btn-json-viewer" title="run jsonViewer()">Transform to HTML</button>
<pre id="json-renderer"></pre>
</body>
</html>