Beispiel: ohne großes Framework
HTML:
<!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:
// 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:
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;
}
share it: Google +1TwitterFacebookXing