本文实例讲述了javascript动态生成树形菜单的方法。分享给大家供大家参考,具体如下:
//======================================== //Envrionment to hold Listeners //======================================== tv_listeners = new Array() ; function listener( type , handler ) { this.type = type ; this.handler = handler ; this.id = tv_listeners.length ; tv_listeners[ tv_listeners.length ] = this ; } function addListener( type , handler ) { new listener( type , handler ) ; } //=== END ===== //========================================= // Hold the top item //========================================= tv_topnodeitem = null ; //===== END ======= //========================================= //Hold nodeitems , and supply a nodeitem Register //========================================= nodeitems = new Array() ; function nodeitemRegister( obj ) { nodeitems[ nodeitems.length ] = obj ; return nodeitems.length - 1 ; } //=== END ======= //================================= //Custom a stack //Class : stack //metheds : get() // put( obj ) //================================= function stack() { this.value = new Array() ; this.cursor = 0 ; } function stack_get() { this.cursor = this.cursor - 1 ; return this.value[ this.cursor ] ; } function stack_put( obj ) { this.value[ this.cursor ] = obj ; this.cursor = this.cursor + 1 ; } stack.prototype.get = stack_get ; stack.prototype.put = stack_put ; //=======END ========== //========================================= // Define a public stack //========================================= userstack = new stack() ; //====== END =========== //========================================= //Image List //========================================= treeview_box_0_none = "../images/4_clos.gif" ; treeview_box_0_line = "../images/4_none.gif" ; treeview_box_2_open = "../images/2_open.gif" ; treeview_box_2_none = "../images/2_none.gif" ; treeview_box_2_close = "../images/2_clos.gif" ; treeview_box_1_open = "../images/3_open.gif" ; treeview_box_1_none = "../images/3_none.gif" ; treeview_box_1_close = "../images/3_clos.gif" ; //=============================================== //Class : nodeitem //status------------------------1:two-direction 0:nobox 0: disactivite // 2:three-0direction 1:close-box 1: activite // 2:open-box //=============================================== function nodeitem( parentkey , key , lable , img ) { this.lable = lable ; this.key = key ; this.parent = findNode( parentkey ) ; if( this.parent != null ) { aa = this.parent.status ; if( aa.substring( 1 , 2 ) == "0" ) this.parent.status = aa.substring( 0 , 1 ) + "1" + aa.substring( 2 , 3 ) ; if( this.parent.maxsubitem != null ) this.parent.maxsubitem.status = "2" + this.parent.maxsubitem.status.substring( 1 , 3 ) ; this.parent.subitems[ this.parent.subitems.length ] = this ; this.parent.maxsubitem = this ; } else { if( tv_topnodeitem != null ) { alert( "不能有两个顶项!" ) ; return ; } tv_topnodeitem = this ; } this.img = img ; this.tag = null ; this.status = "100" ; this.subitems = new Array() ; this.maxsubitem = null ; this.id = nodeitemRegister( this ) ; //********************** this.questionId = 0; this.description = ""; //this.url = null; //********************** //added by msb for the sort and move up/down /*if ( this == tv_topnodeitem ) { this.nodeIndex = 0; } else { this.nodeIndex = this.parent.subitems.length; }*/ //end added } //added by msb for the sort and move up/down function nodeitem_moveUp() { if (this == tv_topnodeitem) return; //topitem ssubitems = this.parent.subitems; for ( i=0; i<ssubitems.length; i++ ) { if( ssubitems[i] == this ) { break; } } if (i==0) return; ssubitems[i] = ssubitems[i-1]; ssubitems[i-1] = this; if (i==ssubitems.length-1) { ssubitems[i-1].status = "2" + ssubitems[i-1].status.substring(1, 3); ssubitems[i].status = "1" + ssubitems[i].status.substring(1, 3); } /* itemTemp = this; ssubitems[this.nodeIndex-1] */ /* for ( i=0; i<ssubitems.length; i++ ) { if( ssubitems[i] != null && ssubitems[i].nodeIndex == (this.nodeIndex-1) ) previousitem = ssubitems[i] } previousitem.nodeIndex = this.nodeIndex; this.nodeIndex = this.nodeIndex -1; swap(this,previousitem); */ //label_on_click(this.id); this.parent.refresh(); lable_on_click(this.id); }//moveUp() function nodeitem_moveDown() { if (this == tv_topnodeitem) return; //topitem ssubitems = this.parent.subitems; for ( i=0; i<ssubitems.length; i++ ) { if( ssubitems[i] == this ) { break; } } if (i==ssubitems.length-1) return; ssubitems[i] = ssubitems[i+1]; ssubitems[i+1] = this; if (i==ssubitems.length-2) { ssubitems[i+1].status = "1" + ssubitems[i+1].status.substring(1, 3); ssubitems[i].status = "2" + ssubitems[i].status.substring(1, 3); } this.parent.refresh(); lable_on_click(this.id); }//moveDown() /*function swap (item1, item2) { nodeitems[item1.id] = item2; nodeitems[item2.id] = item1; idTemp = item1.id; item1.id = item2.id; item2.id = idTemp; }*/ //end added function nodeitem_setTag( obj ) { this.tag = obj ; } function nodeitem_getTag() { return this.tag ; } function nodeitem_show() { str = "<span id = 'preface" + this.id + "'><table border='0' cellspacing='0' cellpadding='0'><tr><td>" ; str_f = "" ; for( j = this.parent ; j != null ; j = j.parent ) { if( j.status.substring( 0 , 1 ) == 1 ) str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle'>" + str_f ; else str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle'>" + str_f ; } str = str + str_f ; str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ; switch( this.status.substring( 0 , 2 ) ) { case "10" : str += treeview_box_1_none ; break ; case "11" : str += treeview_box_1_close ; break ; case "12" : str += treeview_box_1_open ; break ; case "20" : str += treeview_box_2_none ; break ; case "21" : str += treeview_box_2_close ; break ; case "22" : str += treeview_box_2_open ; break ; } str += "' align='absmiddle' onclick='box_on_click(this)'>" ; if( this.img == "" ) str += this.img ; else str += "<img src = '" + this.img + "' align='absmiddle' width='16' height='16'>" ; str += "</td><td><table border='0' cellspacing='1' cellpadding='1' style='font-size:9pt; color:#333333' id='lablePanel" + this.id + "'><tr><td ondblclick = 'lable_on_dblclick(" + this.id + ")' onclick='lable_on_click(" + this.id + ")' style='cursor:hand' id='f_lablePanel" + this.id + "' nowrap>" + this.lable + "</td></tr></table></td></tr></table>" ; str += "</span><span id = 'tv_panel_" + this.id + "' style='display:" ; if( this.status.substring( 1 , 2 ) == '2' ) str += "" ; else str += "none" ; str += "'></span>" ; if( this.parent == null ) for(var i in document.all){ if (document.all[i].tagName == "BODY") { document.all[i].insertAdjacentHTML( "AfterBegin" , str ) ; break } } else document.all( "tv_panel_" + this.parent.id ).insertAdjacentHTML( "BeforeEnd" , str ) ; for( m = 0 ; m < this.subitems.length ; m ++ ) if( this.subitems[ m ] != null ) { userstack.put( m ) ; this.subitems[ m ].show() ; m = userstack.get() ; } } function nodeitem_refresh() { str = "<table border='0' cellspacing='0' cellpadding='0'><tr><td>" ; str_f = "" ; for( j = this.parent ; j != null ; j = j.parent ) { if( j.status.substring( 0 , 1 ) == 1 ) str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle'>" + str_f ; else str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle'>" + str_f ; } str = str + str_f ; str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ; switch( this.status.substring( 0 , 2 ) ) { case "10" : str += treeview_box_1_none ; break ; case "11" : str += treeview_box_1_close ; break ; case "12" : str += treeview_box_1_open ; break ; case "20" : str += treeview_box_2_none ; break ; case "21" : str += treeview_box_2_close ; break ; case "22" : str += treeview_box_2_open ; break ; } str += "' align='absmiddle' onclick='box_on_click(this)'>" ; if( this.img == "" ) str += this.img ; else str += "<img src = '" + this.img + "' align='absmiddle' width='16' height='16'>" ; str += "</td><td><table border='0' cellspacing='1' cellpadding='1' style='font-size:9pt; color:#333333' id='lablePanel" + this.id + "'><tr><td ondblclick = 'lable_on_dblclick(" + this.id + ")' onclick='lable_on_click(" + this.id + ")' style='cursor:hand' id='f_lablePanel" + this.id + "' nowrap>" + this.lable + "</td></tr></table></td></tr></table>" ; document.all( "preface" + this.id ).innerHTML = str ; document.all( "tv_panel_" + this.id ).innerHTML = "" ; for( m = 0 ; m < this.subitems.length ; m ++ ) if( this.subitems[ m ] != null ) { userstack.put( m ) ; this.subitems[ m ].show() ; m = userstack.get() ; } } function nodeitem_remove() { pparent = this.parent ; if( pparent == null ) { removenodeitem( this.id ) ; for(var i in document.all){ if (document.all[i].tagName == "BODY") { document.all[i].innerHTML = "" ; break } } return ; } lastsubitem = null ; for( i = 0 ; i < pparent.subitems.length ; i ++ ) if( pparent.subitems[ i ] != null ) if ( pparent.subitems[ i ] == this ) pparent.subitems[ i ] = null ; else lastsubitem = pparent.subitems[ i ] ; pparent.maxsubitem = lastsubitem ; if( lastsubitem == null ) pparent.status = pparent.status.substring( 0 , 1 ) + "0" + pparent.status.substring( 2 , 3 ) ; else pparent.maxsubitem.status = "1" + pparent.maxsubitem.status.substring( 1 , 3 ) ; removenodeitem( this.id ) ; //added by msb for move up/down arrTemp = new Array(); j = 0; for ( i=0; i<pparent.subitems.length; i++ ) { if ( pparent.subitems[i] != null ) { arrTemp[j] = pparent.subitems[i]; j++; } } this.parent.subitems = arrTemp; //end added pparent.refresh() ; //tv_topnodeitem.refresh() ; } function removenodeitem( id ) { curitem = nodeitems[ id ] ; nodeitems[ id ] = null ; for( m = 0 ; m < curitem.subitems.length ; m ++ ) if( curitem.subitems[ m ] != null ) { userstack.put( m ) ; removenodeitem( curitem.subitems[ m ].id ) ; m = userstack.get() ; } } function nodeitem_boxclick() { if( this.status.substring( 1 ,2 ) == "0" ) return ; if( this.status.substring( 1 ,2 ) == "1" ) this.open() ; else this.close() ; } function nodeitem_close() { this.status = this.status.substring( 0 , 1 ) + "1" + this.status.substring( 2 , 3 ) ; document.all( "tv_panel_" + this.id ).style.display = "none" ; eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_close" ) ; } function nodeitem_open() { this.status = this.status.substring( 0 , 1 ) + "2" + this.status.substring( 2 , 3 ) ; document.all( "tv_panel_" + this.id ).style.display = "" ; eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_open" ) ; } //added by msb for the move up/down nodeitem.prototype.moveUp = nodeitem_moveUp; nodeitem.prototype.moveDown = nodeitem_moveDown; //end added nodeitem.prototype.show = nodeitem_show ; nodeitem.prototype.refresh = nodeitem_refresh ; nodeitem.prototype.boxclick = nodeitem_boxclick ; nodeitem.prototype.close = nodeitem_close ; nodeitem.prototype.open = nodeitem_open ; nodeitem.prototype.remove = nodeitem_remove ; nodeitem.prototype.setTag = nodeitem_setTag ; nodeitem.prototype.getTag = nodeitem_getTag ; //========================================================== // Public Methods //========================================================== function showTV() { tv_topnodeitem.show() ; } function findNode( key ) { pppp = null; for( i = 0 ; i < nodeitems.length ; i ++ ) { if( nodeitems[ i ] != null ) { if( nodeitems[ i ].key == key ) { pppp = nodeitems[ i ] ; } } } return pppp ; } function addNode( parentkey , key , lable , img ) { return new nodeitem( parentkey , key , lable , img ) ; } function deleteNode( key ) { curNode = findNode( key ) ; if( curNode == null ) return false ; curNode.remove() ; return true ; } //====== END ================ //=========================================================== // Events //=========================================================== function box_on_click( obj ) { nodeitems[ obj.nodeid ].boxclick() ; } tv_curlable = null ; tv_curlable_f = null ; function lable_on_click( id ) { key = nodeitems[ id ].key ; if( nodeitems[ id ].parent == null ) parentkey = "" ; else parentkey = nodeitems[ id ].parent.key ; if( tv_curlable != null ) { tv_curlable.bgColor = "transparent" ; tv_curlable.style.color = "#333333" ; tv_curlable_f.bgColor = "transparent" ; } tv_curlable = document.all("lablePanel"+id) ; tv_curlable.bgColor = "#000000" ; tv_curlable.style.color = "#FFFFFF" ; tv_curlable_f = document.all("f_lablePanel"+id) ; tv_curlable_f.bgColor = "#888888" ; for( i = 0 ; i < tv_listeners.length ; i ++ ) if( tv_listeners[ i ].type == "click" ) { h = tv_listeners[ i ].handler ; eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ; } } function lable_on_dblclick( id ) { key = nodeitems[ id ].key ; if( nodeitems[ id ].parent == null ) parentkey = "" ; else parentkey = nodeitems[ id ].parent.key ; if( tv_curlable != null ) { tv_curlable.bgColor = "transparent" ; tv_curlable.style.color = "#333333" ; tv_curlable_f.bgColor = "transparent" ; } tv_curlable = document.all("lablePanel"+id) ; tv_curlable.bgColor = "#000000" ; tv_curlable.style.color = "#FFFFFF" ; tv_curlable_f = document.all("f_lablePanel"+id) ; tv_curlable_f.bgColor = "#888888" ; for( i = 0 ; i < tv_listeners.length ; i ++ ) if( tv_listeners[ i ].type == "dblclick" ) { h = tv_listeners[ i ].handler ; eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ; } }
javascript调用
<script language="javascript"> <!-- addNode(-1,0,"hehe","../images/top.gif"); addNode(0,1,"haha","../images/top.gif"); addNode(0,2,"haha","../images/top.gif"); addNode(1,3,"haha","../images/top.gif"); addNode(1,4,"haha","../images/top.gif"); addNode(2,5,"haha","../images/top.gif"); addNode(2,6,"haha","../images/top.gif"); showTV(); --> </script>
希望本文所述对大家JavaScript程序设计有所帮助。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】