「MediaWiki:Tangle/定数表/dev.js」：修訂間差異

MediaWiki:Tangle/定数表/dev.js (檢視原始碼)

於 2024年11月25日 (一) 17:12 的修訂

增加 2,988 位元組、 2024年11月25日 (星期一)

撤销Star0（讨论）的版本60033

Star0

常驻人员、介面管理員、管理員

6,571

次編輯

@@ 行 1： / 行 1： @@
+$(function () {
+   const container = document.getElementById("chart-constant-js-cut-in-1");
+   const htmlContent = `
+  <div class="button-container">
+   <button class="button" data-target="chart-constant-table-12 chart-constant-table-11" data-color="#FF9500">
+    <span class="label">12和11</span>
+   </button>
+   <button class="button" data-target="chart-constant-table-10" data-color="#c31c40">
+    <span class="label">10</span>
+   </button>
+   <button class="button" data-target="chart-constant-table-9" data-color="#65226f">
+    <span class="label">9</span>
+   </button>
+   <button class="button" data-target="chart-constant-table-8" data-color="#2bb36b">
+    <span class="label">8</span>
+   </button>
+   <button class="button reset" data-target="all">
+    <span class="label">重置</span>
+   </button>
+  </div>
+`;
+   const cssContent = `
+  .button-container {
+   display: flex;
+   gap: 0.8em;
+   margin-bottom: 0.8em;
+  }
+  .button {
+   font-size: 15px;
+   padding: 0.6em 1.3em;
+   font-weight: 500;
+   color: #000;
+   border: none;
+   position: relative;
+   overflow: hidden;
+   border-radius: 0.5em;
+   background: transparent;
+   transition: background 0.3s, color 0.3s;
+   cursor: pointer;
+   box-shadow: 0 0 10px #7f7f7f;
+  }
+  .button .label {
+   position: relative;
+  }
+  .button.active {
+   color: #fff;
+   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  }
+  .reset {
+   color: #000;
+  }
+  .hidden {
+   display: none !important;
+  }
+`;
+   const jsContent = `
+  const buttons = document.querySelectorAll(".button");
+  const tables = document.querySelectorAll("[class^='chart-constant-table']");
+  buttons.forEach((button) => {
+   button.addEventListener("click", () => {
+    if (button.classList.contains("reset")) {
+     tables.forEach((table) => table.classList.remove("hidden"));
+     buttons.forEach((btn) => {
+      btn.classList.remove("active");
+      btn.style.background = "transparent";
+     });
+     return;
+    }
+    buttons.forEach((btn) => {
+     btn.classList.remove("active");
+     btn.style.background = "transparent";
+    });
+    button.classList.add("active");
+    const color = button.getAttribute("data-color");
+    if (color) {
+     button.style.background = color;
+    }
+    const targets = button.getAttribute("data-target").split(" ");
+    tables.forEach((table) => table.classList.add("hidden"));
+    targets.forEach((target) => {
+     const matchedTables = document.querySelectorAll("div." + target);
+     matchedTables.forEach((table) => table.classList.remove("hidden"));
+    });
+   });
+  });
+`;
+   container.innerHTML = htmlContent;
+   const styleElement = document.createElement("style");
+   styleElement.innerHTML = cssContent;
+   document.head.appendChild(styleElement);
+   const scriptElement = document.createElement("script");
+   scriptElement.innerHTML = jsContent;
+   document.body.appendChild(scriptElement);
+});