JavaScript Treeview

Beispiel: ohne großes Framework
  • Programmiersprachen
    • Maschinensprachen
      • Assembler
    • Hochsprachen
      • C
      • Java
      • Pascal
    • Scriptsprachen
      • PHP
      • Javascript
      • Perl
      • VB-Script
HTML:
treeview.htm HTML (763 Bytes) 30.11.2021 23:49
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </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 (2,26 kByte) 30.11.2021 23:47
// 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");
  if (treeList.length > 0) {
    if (!document.getElementById('treeview.css')) {
      var style = document.createElement("link");
      style.type = 'text/css';
      style.addEventListener('load', function () {
        init();
      });
      style.href = '/code/treeview/treeview.css';
      style.id = 'treeview.css';
      style.rel = 'stylesheet';
      document.head.appendChild(style);
    } else {
      init();
    }
    function init() {
      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;
}

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