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; } Author: Udo Schmal, published: 25.04.2012, last modified: 06.09.2023