Beispiel: ohne großes Framework
- Programmiersprachen
- Maschinensprachen
- Assembler
- Hochsprachen
- C
- Java
- Pascal
- Scriptsprachen
- PHP
- JavaScript
- Perl
- VB-Script
- Maschinensprachen
HTML:
<html>
<head>
<script type="text/javascript" src="jsTreeview.js"></script>
<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>
</body>
</html>JavaScript:
function getElementsByClassName(searchClass, tagName, domNode) {
if (domNode == null) domNode = document;
if (tagName == null) tagName = '*';
var el = new Array();
var tags = domNode.getElementsByTagName(tagName);
var tcl = " "+searchClass+" ";
for(var i=0,j=0; i<tags.length; i++) {
var test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1) {
el[j++] = tags[i];
}
};
return el;
}
function getChildNodes(parentElement, tagName) {
var childs = parentElement.childNodes;
var children = [];
for (var i=0; i<childs.length; i++) {
if (((childs[i].nodeType == 1) ? childs[i].tagName.toLowerCase() : '') == tagName) {
children.push(childs[i]);
}
};
return children;
}
function jsTree(){
this.branches = 0;
}
jsTree.prototype = {
toggle: function(id) {
var el = document.getElementById(id);
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' : '';
},
init: function(tree, ebenen) {
var self = this;
if (!ebenen) ebenen = [];
var liNodes = getChildNodes(tree, 'li');
for (var i=0; i<liNodes.length; i++) {
if (liNodes[i].getElementsByTagName('ul').length>0) {
var el = document.createElement("a");
el.className = (i==liNodes.length-1) ? "lastPlus" : "nextPlus";
++this.branches;
el.id = "branch" + this.branches;
el.onclick = function(ev) {
self.toggle(this.id);
if ((ev) && (ev.stopPropagation)) {
ev.stopPropagation();
};
};
ebenen.push((i==liNodes.length-1) ? 'blank' : 'cont');
this.init(liNodes[i].getElementsByTagName('ul')[0], ebenen);
ebenen.pop();
} else {
var el = document.createElement("span");
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);
}
}
}
}
function initTrees() {
var treeList = getElementsByClassName("tree", "ul");
for (var i=0; i<treeList.length; i++) {
var tree = new jsTree();
tree.init(treeList[i]);
};
}
if (window.addEventListener) {
window.addEventListener('load', function(event) {initTrees();});
} else if (window.attachEvent) {
window.attachEvent('onload', function(event) {initTrees();});
} else {
window['onload'] = function(event) {initTrees();};
}Stylesheet:
ul.tree, ul.tree ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
ul.tree li {
padding: 0;
margin: 0;
line-height: 18px;
}
ul.tree ul {
display: none;
}
ul.tree ul.visible {
display: block;
}
ul.tree a.nextPlus, ul.tree a.lastPlus, ul.tree a.nextMinus, ul.tree a.lastMinus,
ul.tree span.cont, ul.tree span.next, ul.tree span.blank, ul.tree span.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 span.blank {
background-position: 0 0;
}
ul.tree span.cont {
background-position: -18px 0;
}
ul.tree span.next {
background-position: -36px 0;
}
ul.tree span.last {
background-position: -54px 0;
}
ul.tree a.nextPlus {
background-position: -72px 0;
}
ul.tree a.lastPlus {
background-position: -90px 0;
}
ul.tree a.nextMinus {
background-position: -108px 0;
}
ul.tree a.lastMinus {
background-position: -126px 0;
}
share it: Google +1TwitterFacebookXing