1 <div style="position: fixed; top: 0; left: 0; bottom: 0; width: 48%; overflow-y: auto;">2 <div style="padding: 16px;">3 The following is <strong>Jedi</strong>, a JSON editor. You can edit numbers, strings and booleans. It4 is also possible collapse arrays and objects.<br>5 6 Edit something and see the events in the right panel.<br>7 <br>8 </div>9 <div id="container"></div>10 <h2>Code example</h2>11 <pre id="code-example"></pre>12 </div>13 14 <div style="position: fixed; top: 0; right: 0; bottom: 0; width: 48%; overflow-y: auto;">15 <h2>Events</h2>16 <div id="events" style="font-family: monospace;"></div>17 </div>18 19 <script type="text/javascript">20 21 function print_event(key, value) {22 var events = document.getElementById('events');23 var msg = document.createElement('div');24 msg.innerHTML = '<strong>'+key+'</strong> = '+JSON.stringify(value);25 26 if (null === events.firstChild) {27 events.appendChild(msg);28 } else {29 events.insertBefore(msg, events.firstChild);30 }31 32 events.insertBefore(msg, last);33 }34 35 </script>36 37 <script id="jedi-code" type="text/javascript">38 var my_json = {39 age: 28,40 name: "manolo",41 married: false,42 colors: ["red", "blue", "green"],43 address: {44 street: "Elm",45 number: 7,46 },47 friends: [48 {49 name: "Fulanito",50 surname: "Fulanez",51 married: true,52 },53 {54 name: "Menganito",55 surname: "Menganez",56 married: false,57 },58 ],59 };60 61 var jedi = new Jedi();62 jedi.setData(my_json);63 jedi.event_change = function(key, value) {64 print_event(key, value);65 };66 67 var container = document.getElementById('container');68 container.appendChild(jedi.dom);69 </script>70 71 <script type="text/javascript">72 73 var code = document.getElementById('jedi-code');74 var pre = document.getElementById('code-example');75 pre.innerHTML = code.innerHTML;76 77 </script>78 Enlace
El enlace para compartir es: