您当前位置：首页 > web前端 > jscript > JavaScript写的“山寨版”树形菜单

JavaScript写的“山寨版”树形菜单

来源：程序员人生发布时间：2013-12-28 04:38:39 阅读次数：2611次

　　网(LieHuo.Net)教程今天突然心血来潮，想用js写点东西，也许是闷得太久了吧。于是乎，这山寨版jsTree就出来了。说他山寨是因为js水平有限，写出来的东西自己玩玩还可，真要用到项目中，还需深加工，还需再改造。废话少说吧，上代码：

<!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>山寨版jsTree-LIEHUO.NET</title><style type="text/css">ul{padding:0; margin-left:20px;}ul li{list-style:none; width:100px; padding:0; margin:0;}</style><script type="text/javascript">function Tree(containerID){ this.childEl = document.createElement("ul"); this.containerEl = document.getElementById(containerID);}Tree.prototype = { addNode:function(node){ this.childEl.appendChild(node.el); node.parentEl = this.childEl; }, render:function(){ this.containerEl.appendChild(this.childEl); }}function treeNode(text){ this.parentEl = null; this.el = null; this.text = text; this.childEl = null; this.init(); this.clickEvent();}treeNode.prototype = { init:function(){ this.el = document.createElement("li"); this.el.appendChild(document.createTextNode(this.text)); }, addNode:function(node){ if(this.childEl==null) { this.el.style.cursor = "pointer"; this.childEl = document.createElement("ul"); this.childEl.style.display = "none"; } this.parentEl.appendChild(this.childEl); this.childEl.appendChild(node.el); node.parentEl = this.childEl; }, clickEvent:function(){ var me = this; me.el.onclick = function(){ if(me.childEl!=null) { me.childEl.style.display == "none"? function(){me.childEl.style.display = "block"}(): function(){me.childEl.style.display = "none"}(); } } }}window.onload = function(){ var tree = new Tree("testDiv"); for(var i=0;i<5;i++) { var node = new treeNode(0+","+i); tree.addNode(node); for(var j=0;j<5;j++) { var node1 = new treeNode(1+","+j); node.addNode(node1); for(var m=0;m<5;m++) { var node2 = new treeNode(2+","+m); node1.addNode(node2); for(var n=0;n<5;n++) { var node3 = new treeNode(3+","+n); node2.addNode(node3); } } } } tree.render();}</script></head><body><div id="testDiv"></div></body></html>本教程来自网　http://www.wfuyu.com/
提示：可修改后代码再运行!

　　只设计了最主要的显示动作，样式的定制及加载都没进行。以后，真要用到得时候或许我会再扩展活重写吧。

　　转自：http://www.cnblogs.com/bravfing/

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 linux服务器SSH环境快速复制远程ftp文件夹命令

下一篇 如何隐藏滚动条?IE去掉滚动条HTML代码

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点