JavaScript Tabsheet

Beispiel: ohne großes Framework
  • Javascript

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

    Free Pascal Beispiele:

    ...

  • PHP

    PHP Beispiele:

    ...

HTML:
tabsheet.htm HTML (851 bytes) 03.09.2020 23:38
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>tabsheets</title>
    <link rel="stylesheet" type="text/css" href="tabsheet.css" />
  </head>
  <body>
    <ul class="tabsheets">
      <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="tabsheet.js"></script>
  </body>
</html>
JavaScript:
tabsheet.js JavaScript (1,38 kByte) 03.09.2020 23:08
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
  function Tabsheets(tabsheets) {
    var current = 0;
    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")) {
        current = i;
      };
      var tabName = sheets[i].querySelector(".sheet-header");
      tabName.style.display = "none";
      var txt = tabName.firstChild.cloneNode(false);
      var tab = document.createElement("li");
      tab.appendChild(txt);
      tab.className = "tab";
      tab.tabid = i;
      tabs.appendChild(tab);
      tab.addEventListener('mousedown', toggle);
    }
    tabs = tabs.children;
    tabs[current].classList.add("active");
    sheets[current].classList.add("active");
  }
  var tabsheetsList = document.querySelectorAll("ul.tabsheets");
  for (var i=0; i<tabsheetsList.length; i++) {
    new Tabsheets(tabsheetsList[i]);
  }
})();
Stylesheet:
tabsheet.css StyleSheet (1020 bytes) 03.09.2020 23:46
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;
}

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.93
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 19. Jun 2021 14:07:06
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.2 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), 2040.859 MHz