page.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval';">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="./page.css">
  8. <script src="./lib/popper-2.0.0/popper.js"></script>
  9. <script src="./lib/jquery3.7/jquery.js"></script>
  10. <link rel="stylesheet" href="./lib/devexpress/css/dx.light.css">
  11. <script src="./lib/devexpress/js/dx.all.js"></script>
  12. <script src="./lib/babel/babel.min.js"></script>
  13. <script src="./js/jsTree.js"></script>
  14. <script src="./lib/zlExpressEditor/monaco-editor/min/vs/loader.min.js"></script>
  15. <script src="./js/CodeEditor.js"></script>
  16. <script src="./lib/ast/astparser.js"></script>
  17. <script src="./js/AstHelper.js"></script>
  18. <script src="page.js"></script>
  19. </head>
  20. <body>
  21. <div class="zl-container">
  22. <div class="tabs">
  23. <div class="tab active" data-id="tabFirst">元素</div>
  24. <div class="tab" data-id="tabSecond">事件</div>
  25. </div>
  26. <div class="tab-container">
  27. <div class="tab-content active" id="tabFirst">
  28. <div class="zl-row">
  29. <div class="zl-col-6">
  30. <div class="zl-row">
  31. <div class="zl-table-head">JS中过滤器清单</div>
  32. <div class="zl-table-height">
  33. <div class="table table-bordered" id="filterTable">
  34. </div>
  35. </div>
  36. </div>
  37. <div class="zl-row">
  38. <div class="zl-table-head">样式属性</div>
  39. <div class="zl-table-height">
  40. <div class="table table-bordered" id="cssJson">
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <div class="zl-col-6">
  46. <div class="zl-row">
  47. <div class="zl-col-12">
  48. <div class="zl-table-head">JS实现代码</div>
  49. <div class="zl-code" id="jscode"></div>
  50. </div>
  51. </div>
  52. <!-- <div class="zl-row">
  53. <div class="zl-col-12">
  54. <div class="zl-table-head">JS对应AST树</div>
  55. <div class="zl-tree" id="astJson"></div>
  56. </div>
  57. </div> -->
  58. <div class="zl-row">
  59. <div class="zl-table-head">属性设置来源</div>
  60. <div class="zl-code">
  61. <div class="table table-bordered" id="cssBelong">
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="tab-content" id="tabSecond">
  69. <div class="zl-row">
  70. <div class="zl-col-12">
  71. <div class="zl-row">
  72. <div class="zl-table-head">JS事件</div>
  73. <div class="zl-table-height">
  74. <div class="table table-bordered" id="eventTable">
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </body>
  84. </html>