1 <div class="title" style="position:absolute; height: 100px; left: 0; right: 0; top: 0; text-align: center; font-size: 50px;">2 3 <div class="moises">4 <ruby class="water"><span style="text-align: right; display: inline-block; width: 80px;">J</span><rt><span style="color: silver;">JSON</span></rt></ruby><ruby class="water"><span style="text-align: left; display: inline-block; width: 80px;">edi</span><rt><span style="color: silver;">editor</span></rt></ruby>5 </div>6 7 </div>8 9 <div style="position:absolute; top: 100px; left: 0; right: 0; bottom: 0; margin: 16px;">10 <div style="position: absolute; top: 0; left: 0; bottom: 0; width: 48%; overflow-y: auto;">11 <div style="padding: 16px;">12 The following is <strong>Jedi</strong>, a JSON editor. You can edit numbers, strings and booleans. It13 is also possible collapse arrays and objects.<br>14 15 Edit something and see the events in the right panel.<br>16 <br>17 </div>18 <div id="container"></div>19 <h2>Code example</h2>20 <pre id="code-example"></pre>21 </div>22 23 <div style="position: absolute; top: 0; right: 0; bottom: 0; width: 48%; overflow-y: auto;">24 <h2>Events</h2>25 <div id="events" style="font-family: monospace;"></div>26 </div>27 </div>28 29 <script type="text/javascript">30 31 function print_event(key, value) {32 var events = document.getElementById('events');33 var msg = document.createElement('div');34 msg.innerHTML = '<strong>'+key+'</strong> = '+JSON.stringify(value);35 36 if (null === events.firstChild) {37 events.appendChild(msg);38 } else {39 events.insertBefore(msg, events.firstChild);40 }41 42 events.insertBefore(msg, last);43 }44 45 </script>46 47 <script id="jedi-code" type="text/javascript">48 var my_json = {49 age: 28,50 name: "manolo",51 married: false,52 colors: ["red", "blue", "green"],53 address: {54 street: "Elm",55 number: 7,56 },57 friends: [58 {59 name: "Fulanito",60 surname: "Fulanez",61 married: true,62 },63 {64 name: "Menganito",65 surname: "Menganez",66 married: false,67 },68 ],69 };70 71 var jedi = new Jedi();72 jedi.setData(my_json);73 jedi.event_change = function(key, value) {74 print_event(key, value);75 };76 77 var container = document.getElementById('container');78 container.appendChild(jedi.dom);79 </script>80 81 <script type="text/javascript">82 83 var code = document.getElementById('jedi-code');84 var pre = document.getElementById('code-example');85 pre.innerHTML = code.innerHTML;86 87 </script>88 89 90 91 <style type="text/css">92 body {93 font-family: sans-serif;94 }95 96 .moises {97 display: inline-block;98 }99 100 .moises ruby {101 transition: padding 0.2s ease-out;102 display: inline-block;103 }104 105 .moises:hover ruby {106 padding: 0 50px 0 50px;107 }108 109 </style>Enlace
El enlace para compartir es: