pretty-json/index.html at master · codebusters/pretty-json · GitHub

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
<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.8.3.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')
        };

        el.btnAction.on('click', function(){
            var json = el.input.val();

            var o;
            try{ o = JSON.parse(json); }
            catch(e){
                alert('not valid JSON');
                return;
            }

            var node = new PrettyJSON.view.Node({
                el:el.result,
                data:o
            });
        });

        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>