javascript動態(tài)生成樹形菜單的方法
更新時間:2015年11月14日 09:30:33 作者:wangtao041
這篇文章主要介紹了javascript動態(tài)生成樹形菜單的方法,涉及JavaScript針對頁面元素與屬性的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript動態(tài)生成樹形菜單的方法。分享給大家供大家參考,具體如下:
//======================================== //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調(diào)用
<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程序設(shè)計有所幫助。
您可能感興趣的文章:
- JS+JSP通過img標(biāo)簽調(diào)用實現(xiàn)靜態(tài)頁面訪問次數(shù)統(tǒng)計的方法
- JSP結(jié)合js實現(xiàn)img中src更新請求的方法
- javascript修改IMG標(biāo)簽的src問題
- JS+CSS設(shè)置img在DIV中只顯示Img垂直居中的部分
- JS對img進行操作(換圖片/切圖/輪換/停止)
- JSP實現(xiàn)用于自動生成表單標(biāo)簽html代碼的自定義表單標(biāo)簽
- JavaScript實現(xiàn)自動生成網(wǎng)頁元素功能(按鈕、文本等)
- js生成隨機數(shù)的方法實例
- javascript生成img標(biāo)簽的3種實現(xiàn)方法(對象、方法、html)
相關(guān)文章
Fullpage.js固定導(dǎo)航欄-實現(xiàn)定位導(dǎo)航欄
FullPage.js 是一個簡單而易于使用的插件,用來創(chuàng)建全屏滾動網(wǎng)站(也被稱為單頁網(wǎng)站)。接下來通過本文給大家介紹Fullpage.js固定導(dǎo)航欄-實現(xiàn)定位導(dǎo)航欄,對fullpage.js導(dǎo)航欄相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-03-03JS獲取當(dāng)前網(wǎng)頁大小以及屏幕分辨率等
這篇文章主要介紹了JS獲取當(dāng)前網(wǎng)頁大小以及屏幕分辨率等,方法雖簡單,但比較實用,需要的朋友可以參考下2014-09-09服務(wù)器端的JavaScript腳本 Node.js 使用入門
觸爪伸向傳說中的Server-Side Javascrpt。后端JS最出名無疑是Ryan Dahl的node.js,另一個是aptana IDE提供商搞出的jaxer,這里討論node.js的使用2012-03-03layui關(guān)閉彈窗后刷新主頁面和當(dāng)前更改項的例子
今天小編就為大家分享一篇layui關(guān)閉彈窗后刷新主頁面和當(dāng)前更改項的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-095個書寫JavaScript代碼的壞習(xí)慣,看看你中槍了沒?
這篇文章主要介紹了5個書寫JavaScript代碼的壞習(xí)慣,看看你中槍了沒?,本文指出了你沒有使用命名空間、變量定義的東一個西一個、Javascript的變量范圍、Javascript的面向?qū)ο蟆ew關(guān)鍵字等問題,需要的朋友可以參考下2014-11-11