enum_editor.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>选项表达式编辑</title>
  6. <script src="../extra/jquery/jquery.min.js"></script>
  7. <script src="../extra/layer/layer.min.js"></script>
  8. <script src="enum_editor.js"></script>
  9. <style>
  10. input.enum-input {
  11. height: 22px;
  12. border: 1px solid #999;
  13. border-radius: 4px;
  14. width: calc(100% - 78px);
  15. }
  16. fieldset {
  17. border: 1px solid #a1a1a1;
  18. margin-top: 6px;
  19. }
  20. .condition_radio {
  21. display: flex;
  22. flex-direction: column;
  23. }
  24. .options_selector {
  25. display: flex;
  26. flex-direction: column;
  27. }
  28. .conn_selector {
  29. display: flex;
  30. flex-direction: column;
  31. }
  32. input.enum-input:focus {
  33. outline: none;
  34. border: 1px solid #2b8258;
  35. }
  36. input#search_text:focus {
  37. outline: none;
  38. border: 1px solid #2b8258;
  39. }
  40. input#search_text {
  41. height: 22px;
  42. border: 1px solid #999;
  43. border-radius: 4px;
  44. }
  45. button {
  46. height: 26px;
  47. border: 1px solid #999;
  48. border-radius: 4px;
  49. color:darkblue
  50. }
  51. #clear_options {
  52. position: absolute;
  53. right: 20px;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="enum-main">
  59. <div class="condition_selector">
  60. <label class="enum-label">显示文本</label>
  61. <input type="text" class="enum-input" name="name" id="name" value="" />
  62. </div>
  63. <fieldset name="symbol">
  64. <legend>运算符</legend>
  65. <div class="condition_radio">
  66. <label class="enum-label-radio">
  67. <input type="radio" name="condition" value="0" checked /><span>
  68. 等于(=)
  69. </span>
  70. </label>
  71. <label class="enum-label-radio">
  72. <input type="radio" name="condition" value="1" /><span>
  73. 不等于(≠)
  74. </span>
  75. </label>
  76. <label class="enum-label-radio">
  77. <input type="radio" name="condition" value="2" /><span>
  78. 包含(Includes)
  79. </span>
  80. </label>
  81. <label class="enum-label-radio">
  82. <input type="radio" name="condition" value="3" /><span>
  83. 不包含(Not Includes)
  84. </span>
  85. </label>
  86. </div>
  87. </fieldset>
  88. <fieldset>
  89. <legend>备选项</legend>
  90. <div id="option_type">
  91. <label>
  92. <input type="radio" name="option_type" id="isMulti" value="0" />静态选项
  93. </label>
  94. <label style="color:brown">
  95. <input type="radio" name="option_type" id="isSingle" value="1" />动态选项
  96. </label>
  97. <!-- 按钮:清除选项 -->
  98. <button id="clear_options" hidden>清除选项</button>
  99. <div id="search_info" hidden>
  100. <label for="search_text">
  101. 搜索内容:
  102. <input type="text" name="search_text" id="search_text" title="支持按名称模糊查找"/>
  103. </label>
  104. <button id="search_btn">搜索</button>
  105. <br>
  106. <label id="search_result">已选内容:</label>
  107. </div>
  108. <hr />
  109. </div>
  110. <div class="options_selector">
  111. </div>
  112. </fieldset>
  113. </div>
  114. </body>
  115. </html>