JavaScript Tabsheet

Beispiel: ohne großes Framework, eine Unordered List (<ul>) mit List Items (<li>), zum setzen der einheitlichen Höhe in den Tabeinträgen ist einfach die Class "equal-height" der Unordered List (<ul>) hinzuzufügen.
  • JavaScript

    Javascript Beispiele (jsAnimations.js):
    • jsTree
    • jsTabs
    • jsAccordion
    • jsFade
  • Lazarus und Free Pascal

    Free Pascal Beispiele:

    ...

  • PHP

    PHP Beispiele:

    ...

JavaScript, Free Pascal oder PHP

HTML:
tabsheet.htm HTML (1019 Bytes) 06.12.2022 19:40
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>tabsheets</title>
    <link rel="stylesheet" type="text/css" href="tabsheets.css" />
  </head>
  <body>
    <ul class="tabsheets equal-height">
      <li class="active">          
        <h4 class="sheet-header">JavaScript</h4>
        <h5 id="javascript">Javascript Beispiele (jsAnimations.js):</h5>
        <ul>
          <li>jsTree</li>
          <li>jsTabs</li>
          <li>jsAccordion</li>
          <li>jsFade</li>
        </ul>
      </li>
      <li>          
        <h4 class="sheet-header">Lazarus und Free Pascal</h4>
        <h5>Free Pascal Beispiele:</h5>
        <p></p>
      </li>
      <li>          
        <h4 class="sheet-header">PHP</h4>
        <h5 id="php">PHP Beispiele:</h5>
        <p></p>
      </li>
    </ul>
    <p><a href="#javascript">JavaScript</a>, <a href="#freepascal">Free Pascal</a> oder <a href="#php">PHP</a></p>
    <script src="tabsheets.js"></script>
  </body>
</html>
JavaScript:
tabsheet.js JavaScript (3,67 kByte) 13.09.2023 06:59
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
  let localLinks = document.querySelectorAll("[href^='#']");
  let hash = window.location.hash;
  let anchor = null;
  if (hash) {
    let id = hash.substring(1);
    anchor = document.getElementById(id);
  }

  function Tabsheets(tabsheets) {
    let current = -1;
    let sheets = tabsheets.children;
    let tabs = document.createElement("ul");
    let store =  tabsheets.dataset.store;
    if (store) {
      store = 'tabsheets-' + window.location.pathname + '-' + store;
    }
    tabs.className = "tabs";
    tabs.setAttribute('role', 'tablist');
    tabsheets.parentNode.insertBefore(tabs, tabsheets);
    let useSessionStorage = true;

    function toggle(event) {
      tabs[current].classList.remove("active");
      sheets[current].classList.remove("active");
      current = this.tabid;
      tabs[current].classList.add("active");
      sheets[current].classList.add("active");
      event.stopPropagation();
      if (store) {
        sessionStorage.setItem(store, current);
      }
    }

    for (let i=0; i<sheets.length; i++) {
      if (anchor && sheets[i].contains(anchor)) {
        if (current > -1) {
          sheets[current].classList.remove("active");
        }
        sheets[i].classList.add("active");
        current = i;
        useSessionStorage = false;
      } else if (sheets[i].classList.contains("active")) {
        if (current > -1) {
          sheets[i].classList.remove("active");
        } else {
          current = i;
        }
      };
      let txt, tabName = sheets[i].querySelector(".sheet-header");
      if (tabName) {
        txt = tabName.firstChild.cloneNode(false);
      } else {
        txt = document.createTextNode('undefined');
      }
      let tab = document.createElement("li");
      tab.appendChild(txt);
      tab.className = "tab";
      tab.setAttribute('tabindex', '0');
      tab.setAttribute('role', 'tab');
      if (i === current) {
        tab.classList.add("active");
      }
      tab.tabid = i;
      tabs.appendChild(tab);
      tab.addEventListener('click', toggle);
      let ids = sheets[i].querySelectorAll("[id]");
      for (let iId = 0; iId < ids.length; iId++) {
        for (let ilocalLinks = 0; ilocalLinks < localLinks.length; ilocalLinks++) {
          if (localLinks[ilocalLinks].href.split('#')[1] == ids[iId].id) {
            localLinks[ilocalLinks].addEventListener('click', function (event) {
              tab.click();
            });
          }
        }
      }
    }
    tabs = tabs.children;

    if (useSessionStorage && sessionStorage.getItem(store)) {
      if (current > -1) {
        tabs[current].classList.remove("active");
        sheets[current].classList.remove("active");
      }
      current = sessionStorage.getItem(store);
      tabs[current].classList.add("active");
      sheets[current].classList.add("active");
    } else if (current === -1) {
      current = 0;
      tabs[current].classList.add("active");
      sheets[current].classList.add("active");
    }
  }

  let tabsheetsList = document.querySelectorAll("ul.tabsheets"), cnt = tabsheetsList.length, i;
  if (cnt > 0) {
    for (i = 0; i < cnt; i++) {
      if (tabsheetsList[i].children && tabsheetsList[i].children.length > 0) {
        new Tabsheets(tabsheetsList[i]);
      }
    }
    // accessibility: handle tabindex enter keydown event
    document.addEventListener('keydown', function(event) {
      if (event.key === "Enter") {
        if (event.target.classList.contains('tab')) {
          event.target.click();
        }
      }
    });
  }
})();
Stylesheet:
tabsheet.css StyleSheet (1,52 kByte) 12.08.2021 10:23
ul.tabs,
ul.tabsheets {
  font-family: Arial,sans-serif;
  position: relative;
  margin: 0;
  width: 100%;
  list-style: none;
}
ul.tabs {
  padding-left: 0;
}
ul.tabs > li {
  position: relative;
  float: left;
  display: block;
  color: #666;
  font-weight: bold;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
  padding: 3px 5px 2px;
  top: 2px;
  z-index: 1;
  background-color: #eee;
}
ul.tabs > li:not(.active):hover {
  background-color: #fff;
  cursor: pointer;
}
ul.tabs > li.active {
  padding: 4px 5px 3px;
  top: 1px;
  z-index: 10;
  background-color: #fff;
}

ul.tabsheets {
  box-sizing: border-box;
  padding: 10px;
  z-index: 2;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 5px;
  background-color: #fff;
}
ul.tabsheets > li {
  display: none;
}
ul.tabsheets > li.active {
  z-index: 3;
  display: block;
}
ul.tabsheets .sheet-header {
  display: none;
}

ul.tabsheets.equal-height > li {
  padding: 0;
  visibility: hidden;
  float: left;
  width: 100%;
  margin-right: -100%;
  display: block;
}
ul.tabsheets.equal-height > li.active {
  visibility: visible;
}

ul.tabs::after,
ul.tabsheets::after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

@media print {
  ul.tabs {
    display: none;
  }
  ul.tabsheets > li:not(:first-child) {
    border-top: 1px solid #ccc;
  }
  ul.tabsheets.equal-height > li {
    visibility: visible;
    float: none;
    margin-right: 0;
  }
  ul.tabsheets > li,
  ul.tabsheets .sheet-header {
    display: block;
  }
}

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.71
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Tue, 26. Mar 2024 07:33:29

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz