-
Notifications
You must be signed in to change notification settings - Fork 71
/
index.html
91 lines (79 loc) · 2.31 KB
/
index.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Quicksand" />
<link rel="stylesheet" type="text/css" href="/css/pretty-json.css" />
<!-- lib -->
<script type="text/javascript" src="/libs/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="/libs/underscore-min.js" ></script>
<script type="text/javascript" src="/libs/backbone-min.js" ></script>
<!-- src dev
<script type="text/javascript" src="/pretty-json-debug.js" ></script>
-->
<!-- src build -->
<script type="text/javascript" src="/build/pretty-json-min.js" ></script>
<!-- just css for this page example -->
<style type="text/css">
body{
width:700px;
border-style: none;
margin-left: auto;
margin-right: auto;
}
textarea{
width:600px;
padding:4px 7px;
border:1px solid #ccc;
border-radius:4px;
background:#fff;
color:#333;
margin-bottom:7px;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
var el = {
btnAction: $('#action'),
btnClear: $('#clear'),
input: $('#input'),
result: $('#result')
};
var demo = {
name:'John Doe',
age: 20,
children:[{name:'Jack', age:5}, {name:'Ann', age:8}],
wife:{name:'Jane Doe', age:28 }
};
el.input.val(JSON.stringify(demo,null,4));
el.btnAction.on('click', function(){
var json = el.input.val();
var data;
try{ data = JSON.parse(json); }
catch(e){
alert('not valid JSON');
return;
}
var node = new PrettyJSON.view.Node({
el:el.result,
data: data,
dateFormat:"DD/MM/YYYY - HH24:MI:SS"
});
});
el.btnClear.on('click', function(){
el.input.val('');
el.result.html('');
});
});
</script>
<h1>Demo</h1>
<textarea id="input" rows="12"></textarea>
<br/>
<button id="action">go</button>
<button id="clear">clear</button>
<br/>
<br/>
<span id="result"></span>
</body>
</html>