From 72d33a8d4541b28a450aab09ffbd17d77490c93b Mon Sep 17 00:00:00 2001 From: maochaoying <925670706@qq.com> Date: Tue, 9 May 2023 16:38:13 +0800 Subject: [PATCH] tabs --- config.js | 1 - index.html | 230 ++++++++++++++++++++++++++++++++++++++++++------------------- 2 files changed, 158 insertions(+), 73 deletions(-) diff --git a/config.js b/config.js index 04a6528..12b6ee3 100644 --- a/config.js +++ b/config.js @@ -1,7 +1,6 @@ const websocketAddress = "ws://192.168.1.138:19001"; const config = { 你好: "123", - b: "1231231", }; const commonMessage = { diff --git a/index.html b/index.html index dc53ee4..83c8210 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,9 @@ padding: 0; box-sizing: border-box; } + li { + list-style: none; + } .container { display: flex; width: 100vw; @@ -26,9 +29,10 @@ display: flex; box-sizing: border-box; flex-direction: column; - flex: 0.6; padding: 24px; overflow: scroll; + width: 400px; + min-width: 400px; } .right_message { height: 100vh; @@ -78,6 +82,8 @@ } .status { padding: 4px 0; + border-bottom: solid 2px #ddd; + margin-bottom: 10px; } .tabs { margin: 20px 0; @@ -94,9 +100,9 @@ cursor: pointer; } - .active { + /* .active { border-bottom: 2px solid blue; - } + } */ .tab-panel { display: none; @@ -156,6 +162,38 @@ border-bottom: solid 1px #ddd; margin-bottom: 10px; } + + .mod-tab .tab_top { + float: left; + padding: 5px 20px; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + background-color: #ddd; + } + .header .tab_top:last-child { + border-right: 1px solid #ccc; + } + .content { + border: 1px solid #ccc; + width: 100%; + height: 100%; + } + .header::after { + content: ""; + display: block; + clear: both; + } + + .mod-tab .header .active { + background-color: #fff; + } + + .mod-tab .content .panel { + display: none; + } + .mod-tab .content .active { + display: block; + } @@ -166,83 +204,106 @@

当前状态： 未连接

-
-

上报解析

-
-

ADDRESS：

- -
-
-

VALUE：

- -
-
-
-

回执解析

-
-

ADDRESS：

- +
+
+ + +
-
-

VALUE：

- -
-
-

结果：

- -
-
-
-
    -
  • 通用指令
    • -
  • 指令列表
    • -
-
-
-
-
-

ID

- +
+
+
+

上报解析

+
+

ADDRESS：

+
-
-

BASE

- +
+

VALUE：

+
-
-

OFFSET

- +
+
+

回执解析

+
+

ADDRESS：

+
-
-

VALUE

- +
+

VALUE：

+ +
+
+

结果：

+
-
- - - - +
+
    +
  • 通用指令
    • +
  • 指令列表
    • +
+
+
+
+
+

ID

+ +
+
+

BASE

+ +
+
+

OFFSET

+ +
+
+

VALUE

+ +
+
+
+ + + + +
+
+
+
+
+
-
-
-
+
panel2
+
panel3
@@ -379,6 +440,7 @@ } }; const connectWs = () => { + console.log(123); const input = document.querySelector("#ws_connnect_input"); const status = document.querySelector("#status"); const address = input.value; @@ -481,5 +543,29 @@ const msg = getCommonOrderInput("set_auto_report_period"); sendOrder(msg); }; + + document.querySelectorAll(".tab_top").forEach(function (node) { + node.addEventListener("click", function () { + var index; + this.parentElement + .querySelectorAll(".tab_top") + .forEach(function (e, inx) { + //e.style.display='none' 跳转的时候隐藏按钮 + e.classList.remove("active"); + if (node === e) { + index = inx; + } + }); + this.classList.add("active"); + this.parentElement.nextElementSibling + .querySelectorAll(".panel") + .forEach(function (panel) { + panel.classList.remove("active"); + }); + this.parentElement.nextElementSibling + .querySelectorAll(".panel") + [index].classList.add("active"); + }); + });