您當前位置：首頁 > web前端 > jscript > JavaScript寫的“山寨版”樹形菜單

JavaScript寫的“山寨版”樹形菜單

來源：程序員人生發布時間：2013-12-28 04:38:39 閱讀次數：2777次

　　網(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.jyygyx.com/
提示：可修改后代碼再運行!

　　只設計了最主要的顯示動作，樣式的定制及加載都沒進行。以后，真要用到得時候或許我會再擴展活重寫吧。

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 linux服務器SSH環境快速復制遠程ftp文件夾命令

下一篇 如何隱藏滾動條?IE去掉滾動條HTML代碼

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

JavaScript寫的“山寨版”樹形菜單