您當(dāng)前位置：首頁(yè) > web前端 > jscript > JavaScript寫的“山寨版”樹形菜單

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

來源：程序員人生發(fā)布時(shí)間：2013-12-28 04:38:39 閱讀次數(shù)：2772次

　　網(wǎng)(LieHuo.Net)教程今天突然心血來潮，想用js寫點(diǎn)東西，也許是悶得太久了吧。于是乎，這山寨版jsTree就出來了。說他山寨是因?yàn)閖s水平有限，寫出來的東西自己玩玩還可，真要用到項(xiàng)目中，還需深加工，還需再改造。廢話少說吧，上代碼：

<!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>本教程來自網(wǎng)　http://www.vxbq.cn/
提示：可修改后代碼再運(yùn)行!

　　只設(shè)計(jì)了最主要的顯示動(dòng)作，樣式的定制及加載都沒進(jìn)行。以后，真要用到得時(shí)候或許我會(huì)再擴(kuò)展活重寫吧。

　　轉(zhuǎn)自：http://www.cnblogs.com/bravfing/

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

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

上一篇 linux服務(wù)器SSH環(huán)境快速?gòu)?fù)制遠(yuǎn)程ftp文件夾命令

下一篇 如何隱藏滾動(dòng)條?IE去掉滾動(dòng)條HTML代碼

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

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