page.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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/astcss/csstree.js"></script>
  17. <script src="./lib/ast/astparser.js"></script>
  18. <script src="./js/AstHelper.js"></script>
  19. <script src="page.js"></script>
  20. </head>
  21. <body>
  22. <div class="zl-container">
  23. <div class="tabs">
  24. <div class="tab active" data-id="tabFirst">选择器调用清单</div>
  25. <div class="tab" data-id="tabSecond">事件</div>
  26. <!-- <div class="tab" data-id="tabThree"></div> -->
  27. </div>
  28. <div class="tab-container">
  29. <div class="tab-content active" id="tabFirst">
  30. <div class="zl-row">
  31. <div class="zl-col-6">
  32. <div class="zl-row">
  33. <div class="zl-table-head table-title">JS中过滤器清单</div>
  34. <div class="zl-table-height">
  35. <div class="table table-bordered" id="filterTable">
  36. </div>
  37. </div>
  38. </div>
  39. <!-- <div class="zl-row">
  40. <div class="zl-table-head">样式属性</div>
  41. <div class="zl-table-height">
  42. <div class="table table-bordered" id="cssJson">
  43. </div>
  44. </div>
  45. </div> -->
  46. <div class="zl-row" style="padding-top: 10px;">
  47. <div class="zl-table-head table-title">样式属性</div>
  48. <div class="zl-table-height">
  49. <div class="table table-bordered" id="cssJson">
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="zl-col-6">
  55. <div class="zl-row">
  56. <div class="zl-col-12">
  57. <div class="zl-table-head">实现代码</div>
  58. <div class="zl-code" id="jscode"></div>
  59. </div>
  60. </div>
  61. <!-- <div class="zl-row">
  62. <div class="zl-col-12">
  63. <div class="zl-table-head">JS对应AST树</div>
  64. <div class="zl-tree" id="astJson"></div>
  65. </div>
  66. </div> -->
  67. </div>
  68. </div>
  69. </div>
  70. <div class="tab-content" id="tabSecond">
  71. <div class="zl-row">
  72. <div class="zl-col-12">
  73. <div class="zl-row">
  74. <div class="zl-table-head table-title">JS事件</div>
  75. <div class="zl-table-height">
  76. <div class="table table-bordered" id="eventTable">
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="tab-content" id="tabThree">
  84. <div class="zl-row">
  85. <div class="zl-col-12">
  86. <div class="zl-row">
  87. <div class="zl-table-head">JS事件</div>
  88. <div class="zl-table-height">
  89. <div class="table table-bordered" id="eventTable">
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </body>
  99. </html>