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:

    ...

HTML:
tabsheet.htm HTML (868 bytes) 20.07.2021 09:24
<!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>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>PHP Beispiele:</h5>
        <p>...</p>
      </li>
    </ul>
    <script src="tabsheets.js"></script>
  </body>
</html>
JavaScript:
tabsheet.js JavaScript (1,92 kByte) 17.07.2021 18:36
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
  function Tabsheets(tabsheets) {
    var current = -1;
    var sheets = tabsheets.children;
    var tabs = document.createElement("ul");
    tabs.className = "tabs";
    tabsheets.parentNode.insertBefore(tabs, tabsheets);
    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();
    }
    for (var i=0; i<sheets.length; i++) {
      if (sheets[i].classList.contains("active")) {
        if (current > -1) {
          sheets[i].classList.remove("active");
        } else {
          current = i;
        }
      };
      var tabName = sheets[i].querySelector(".sheet-header");
      var txt = tabName.firstChild.cloneNode(false);
      var tab = document.createElement("li");
      tab.appendChild(txt);
      tab.className = "tab";
      tab.setAttribute('tabindex', '0');
      if (i == current) {
        tab.classList.add("active");
      }
      tab.tabid = i;
      tabs.appendChild(tab);
      tab.addEventListener('click', toggle);
    }
    tabs = tabs.children;
    if (current == -1) {
      current = 0;
      tabs[current].classList.add("active");
      sheets[current].classList.add("active");
    }
  }
  var tabsheetsList = document.querySelectorAll("ul.tabsheets");
  if (tabsheetsList.length > 0) {
    for (var i=0; i<tabsheetsList.length; i++) {
      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,39 kByte) 20.07.2021 09:19
ul.tabs, ul.tabsheets {
  font-family: Arial,sans-serif;
  position: relative;
  margin: 0;
  width: 100%;
  list-style: none;}
ul.tabs {
  z-index: 10;
  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 {
  padding: 0 0 10px 0;
  z-index: 2;
  clear: both;
}
ul.tabsheets > li {
  padding: 10px 10px 10px 10px;
  z-index: 3;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 5px;
  background-color: #fff;
  display: none;
}
ul.tabsheets > li::after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}
ul.tabsheets > li.active {
  display: block;
}
ul.tabsheets .sheet-header {
  display: none;
}

ul.tabsheets.equal-height {
  display: flex;
}
ul.tabsheets.equal-height > li {
  float: left;
  visibility: collapse;
  width: 100%;
  display: initial;
}
ul.tabsheets.equal-height > li.active {
  visibility: visible;
}

@media print {
  ul.tabs {
    display: none;
  }
  ul.tabsheets > li,
  ul.tabsheets .sheet-header {
    display: block;
  }
}

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.101
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sun, 18. Jul 2021 17:42:24
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.3 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 1343.283 MHz