index.htm 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>原生json格式化及高亮</title>
  5. <meta name="description" content="json,格式化,高亮">
  6. <meta name="keywords" content="json,格式化,高亮">
  7. <script src="json/c.js" type="text/javascript"></script>
  8. <link href="json/s.css" type="text/css" rel="stylesheet"></link>
  9. </head>
  10. <body>
  11. <div class="HeadersRow">
  12. <div id="HeaderTitle"> JSON格式化及高亮 &nbsp;&copy;&nbsp;2012&nbsp; &nbsp;<span style='color:#aaa;font-weight:bold;font-style:italic'>Random_Coder</span></div>
  13. <h3 id="HeaderSubTitle">JSON格式化及高亮:</h3>
  14. <textarea id="RawJson">
  15. </textarea>
  16. </div>
  17. <div id="ControlsRow">
  18. <input type="Button" value="格式化" onclick="Process()"/>
  19. <span id="TabSizeHolder">
  20. 缩进量
  21. <select id="TabSize" onchange="TabSizeChanged()">
  22. <option value="1">1</option>
  23. <option value="2" selected="true">2</option>
  24. <option value="3">3</option>
  25. <option value="4">4</option>
  26. <option value="5">5</option>
  27. <option value="6">6</option>
  28. </select>
  29. </span>
  30. <label for="QuoteKeys">
  31. <input type="checkbox" id="QuoteKeys" onclick="QuoteKeysClicked()" checked="true"/>
  32. 引号
  33. </label>&nbsp;
  34. <a href="javascript:void(0);" onclick="SelectAllClicked()">全选</a>
  35. &nbsp;
  36. <span id="CollapsibleViewHolder">
  37. <label for="CollapsibleView">
  38. <input type="checkbox" id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="true"/>
  39. 显示控制
  40. </label>
  41. </span>
  42. <span id="CollapsibleViewDetail">
  43. <a href="javascript:void(0);" onclick="ExpandAllClicked()">展开</a>
  44. <a href="javascript:void(0);" onclick="CollapseAllClicked()">叠起</a>
  45. <a href="javascript:void(0);" onclick="CollapseLevel(3)">2级</a>
  46. <a href="javascript:void(0);" onclick="CollapseLevel(4)">3级</a>
  47. <a href="javascript:void(0);" onclick="CollapseLevel(5)">4级</a>
  48. <a href="javascript:void(0);" onclick="CollapseLevel(6)">5级</a>
  49. <a href="javascript:void(0);" onclick="CollapseLevel(7)">6级</a>
  50. <a href="javascript:void(0);" onclick="CollapseLevel(8)">7级</a>
  51. <a href="javascript:void(0);" onclick="CollapseLevel(9)">8级</a>
  52. </span>
  53. </div>
  54. <div id="Canvas" class="Canvas"></div>
  55. <script type="text/javascript" src="json/m.js"></script>
  56. </body>
  57. </html>