<!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>
效果图:
个人上传的文件夹里面有，可以下载
新闻热点
疑难解答
