JavaScript Treeview

Beispiel: ohne großes Framework
  • Programmiersprachen
    • Maschinensprachen
      • Assembler
    • Hochsprachen
      • C
      • Java
      • Pascal
    • Scriptsprachen
      • PHP
      • Javascript
      • Perl
      • VB-Script
HTML:
treeview.htm HTML (828 bytes) 04.09.2020 00:16
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="treeview.css" />
  </head>
  <body>
    <ul class="tree">
      <li>Programmiersprachen          
        <ul>
          <li>Maschinensprachen              
            <ul>
              <li>Assembler</li>
            </ul>
          </li>
          <li>Hochsprachen              
            <ul>
              <li>C</li>
              <li>Java</li>
              <li>Pascal</li>
            </ul>
          </li>
          <li>Scriptsprachen              
            <ul>
              <li>PHP</li>
              <li>Javascript</li>
              <li>Perl</li>
              <li>VB-Script</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <script src="treeview.js"></script>
  </body>
</html>
JavaScript:
treeview.js JavaScript (1,78 kByte) 04.09.2020 00:22
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
  function Tree(tree){
    function toggle(event) {
      var el = this;
      if (el.className == 'nextPlus') {
        el.className = 'nextMinus';
      } else if (el.className == 'nextMinus') {
        el.className = 'nextPlus';
      } else if (el.className == 'lastPlus') {
        el.className = 'lastMinus';
      } else if (el.className == 'lastMinus') {
        el.className = 'lastPlus';
      };
      var branch = el.parentNode.getElementsByTagName('ul')[0];
      branch.className = (branch.className == '') ? 'visible' : '';
      event.stopPropagation();
    }
    function init(tree, ebenen) {
      if (!ebenen) {
        ebenen = [];
      };
      var liNodes = tree.children;
      for (var i=0, len=liNodes.length; i < len; i++) {
        var el = document.createElement("span");
        if (liNodes[i].getElementsByTagName('ul').length > 0) {
          el.className = (i==liNodes.length-1) ? "lastPlus" : "nextPlus";
          el.addEventListener('click', toggle);
          ebenen.push((i==liNodes.length-1) ? 'blank' : 'cont');
          init(liNodes[i].getElementsByTagName('ul')[0], ebenen);
          ebenen.pop();
        } else {
          el.className = (i==liNodes.length-1) ? "last" : "next";
        };
        liNodes[i].insertBefore(el, liNodes[i].firstChild);
        for (var a=ebenen.length-1; a>=0; a--) {
          var el = document.createElement("span");
          el.className = ebenen[a];
          liNodes[i].insertBefore(el, liNodes[i].firstChild);
        }
      }
    }
    init(tree);
  }

  var treeList = document.querySelectorAll("ul.tree");
  for (var i=0; i<treeList.length; i++) {
    new Tree(treeList[i]);
  }
})();
Stylesheet:
treeview.css StyleSheet (1,08 kByte) 04.09.2020 00:08
ul.tree, ul.tree ul {
  font-family: Arial,sans-serif;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.tree li {
  padding: 0;
  margin: 0;
}
ul.tree ul {
  display: none;
}
ul.tree ul.visible {
  display: block;
}
ul.tree .focus {
  background-color: navy;
  color: #fff;
}
ul.tree .nextPlus, ul.tree .lastPlus, ul.tree .nextMinus, ul.tree .lastMinus,
ul.tree .cont, ul.tree .next, ul.tree .blank, ul.tree .last {
  float: left;
  display: block;
  width: 18px;
  height: 18px;
  background: transparent url(/styles/images/branch.png) no-repeat 0 0;
  margin: 0 2px 0 0;
  padding: 0;
}
ul.tree .blank {
  background-position: 0 0;
}
ul.tree .cont {
  background-position: -18px 0;
}
ul.tree .next {
  background-position: -36px 0;
}
ul.tree .last {
  background-position: -54px 0;
}
ul.tree .nextPlus {
  background-position: -72px 0;
  cursor: pointer;
}
ul.tree .lastPlus {
  background-position: -90px 0;
  cursor: pointer;
}
ul.tree .nextMinus {
  background-position:-108px 0;
  cursor: pointer;
}
ul.tree .lastMinus {
  background-position: -126px 0;
  cursor: pointer;
}

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