簡単なjs Treeの運用
15865 ワード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
ul.__tree__, ul.__tree__ ul {
background: url(vline.png) repeat-y;
margin: 0 0 0 10px;
padding: 0;
}
ul.__tree__ li {
background: url(node.png) no-repeat;
list-style: none;
padding: 0 12px;
}
ul.__tree__ li.__last_child__ {
background: #fff url(lastnode.png) no-repeat;
}
ul.__tree__ span.__selected__ {
background: blue !important;
color: white;
}
</style>
</head>
<body>
<ul id="t">
<li>
<ul>
<li> 1</li>
<li><a onclick="alert('look mom, I\'m here!');"> 2</a>
<ul>
<li> 2.1</li>
<li> </li>
<li> </li>
</ul>
</li>
<li> .3</li>
<li> </li>
<li> </li>
</ul>
</li>
<li>
<ul>
<li> 1</li>
<li><a onclick="alert('look mom, I\'m here!');"> 2</a>
<ul>
<li> 2.1</li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</li>
<li> .3</li>
<li> </li>
<li> </li>
</ul>
</li>
<!--<li> </li>
<li> </li>-->
</ul>
<script type="text/javascript">
/*function Tree11(id,name,nianlin,shengao,tizhong){
var i=1;
var j=5;
for(i;i<j;i++){
document.getElementById("t").insertBefore(i);
alert(0);
}
}
window.onload(tree11);
*/
function Tree(elId, opt) {
this.elem = document.getElementById(elId);
this.elem.className += " __tree__ ";
this.selected = null;
this.defOpts = {
icons : [ "list.gif", "fold.gif", "open.gif" ],
getIcon : function(li, tree) {
if (opt && opt.getIcon)
return opt.getIcon(li, tree);
var uls = li.getElementsByTagName("ul");
var icons = (opt && opt.icons) ? opt.icons : this.icons;
if (uls.length == 0)
return icons[0]
return icons[uls[0].style.display == "none" ? 1 : 2];
},
onClickImage : function(li, tree) {
if (opt && opt.onClickImage)
return opt.onClickImage(li, tree);
var uls = li.getElementsByTagName("ul");
if (uls.length == 0)
return;
uls[0].style.display = (uls[0].style.display != "none") ? "none" : "block";
var imgs = li.getElementsByTagName("img");
imgs[0].src = this.getIcon(li);
}
};
this.initItem = function(li) {
li.tree = this;
if (li.initDone)
return;
li.initDone = true;
var img = document.createElement("img");
img.src = this.defOpts.getIcon(li, this);
img.onclick = function(e) {
e = e || window.event;
var t = e.target || e.srcElement;
t.parentNode.tree.defOpts.onClickImage(t.parentNode, this);
}
var span = document.createElement("span");
for (var i = li.childNodes.length - 1; i >= 0; i--)
if (li.childNodes[i].nodeName == "UL")
this.initChildren(li.childNodes[i])
else
span.insertBefore(li.removeChild(li.childNodes[i]), span.firstChild);
li.insertBefore(span, li.firstChild);
li.insertBefore(img, li.firstChild);
span.onclick = function(e) {
e = e || window.event;
var li = e.target || e.srcElement;
while (li && li.nodeName != "LI")
li = li.parentNode;
if (!li)
return;
if (li.tree.selected)
li.tree.selected.className = li.tree.selected.className.replace(", __selected__ ,", "");
var span = li.firstChild.nextSibling;
span.className += ", __selected__ ,";
li.tree.selected = span;
}
};
this.initChildren = function(ul) {
var last = true;
for (var li = ul.lastChild; li; li = li.previousSibling)
if (li.nodeName == "LI") {
this.initItem(li);
if (last) {
li.className += ", __last_child__ ,";
last = false;
}
}
}
this.initChildren(this.elem);
return this;
}
new Tree("t");
</script>
</body>
</html>
個人がアップロードしたフォルダの中にあります。ダウンロードできます。