這篇文章主要介紹了javascript動(dòng)態(tài)生成樹(shù)形菜單的方法,涉及JavaScript針對(duì)頁(yè)面元素與屬性的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript動(dòng)態(tài)生成樹(shù)形菜單的方法。分享給大家供大家參考，具體如下：

1. //======================================== 
2. //Envrionment to hold Listeners 
3. //======================================== 
4. tv_listeners = new Array() ; 
5. function listener( type , handler ) { 
6. this.type = type ; 
7. this.handler = handler ; 
8. this.id = tv_listeners.length ; 
9. tv_listeners[ tv_listeners.length ] = this ; 
10. } 
11. function addListener( type , handler ) { 
12. new listener( type , handler ) ;  
13. } 
14. //=== END ===== 
15. //========================================= 
16. // Hold the top item 
17. //========================================= 
18. tv_topnodeitem = null ; 
19. //===== END ======= 
20. //========================================= 
21. //Hold nodeitems , and supply a nodeitem Register 
22. //========================================= 
23. nodeitems = new Array() ; 
24. function nodeitemRegister( obj ) { 
25. nodeitems[ nodeitems.length ] = obj ; 
26. return nodeitems.length - 1 ; 
27. } 
28. //=== END ======= 
29. //================================= 
30. //Custom a stack 
31. //Class : stack 
32. //metheds : get() 
33. // put( obj ) 
34. //================================= 
35. function stack() { 
36. this.value = new Array() ; 
37. this.cursor = 0 ; 
38. } 
39. function stack_get() { 
40. this.cursor = this.cursor - 1 ; 
41. return this.value[ this.cursor ] ; 
42. } 
43. function stack_put( obj ) { 
44. this.value[ this.cursor ] = obj ; 
45. this.cursor = this.cursor + 1 ; 
46. } 
47. stack.prototype.get = stack_get ; 
48. stack.prototype.put = stack_put ; 
49. //=======END ========== 
50. //========================================= 
51. // Define a public stack 
52. //========================================= 
53. userstack = new stack() ; 
54. //====== END =========== 
55. //========================================= 
56. //Image List 
57. //========================================= 
58. treeview_box_0_none = "../images/4_clos.gif" ; 
59. treeview_box_0_line = "../images/4_none.gif" ; 
60. treeview_box_2_open = "../images/2_open.gif" ; 
61. treeview_box_2_none = "../images/2_none.gif" ; 
62. treeview_box_2_close = "../images/2_clos.gif" ; 
63. treeview_box_1_open = "../images/3_open.gif" ; 
64. treeview_box_1_none = "../images/3_none.gif" ; 
65. treeview_box_1_close = "../images/3_clos.gif" ; 
66. //=============================================== 
67. //Class : nodeitem 
68. //status------------------------1:two-direction 0:nobox 0: disactivite 
69. // 2:three-0direction 1:close-box 1: activite 
70. // 2:open-box 
71. //=============================================== 
72. function nodeitem( parentkey , key , lable , img ) { 
73. this.lable = lable ; 
74. this.key = key ; 
75. this.parent = findNode( parentkey ) ; 
76. if( this.parent != null ) { 
77. aa = this.parent.status ; 
78. if( aa.substring( 1 , 2 ) == "0" ) 
79. this.parent.status = aa.substring( 0 , 1 ) + "1" + aa.substring( 2 , 3 ) ; 
80. if( this.parent.maxsubitem != null )  
81. this.parent.maxsubitem.status = "2" + this.parent.maxsubitem.status.substring( 1 , 3 ) ; 
82. this.parent.subitems[ this.parent.subitems.length ] = this ; 
83. this.parent.maxsubitem = this ;  
84. } 
85. else { 
86. if( tv_topnodeitem != null ) { 
87. alert( "不能有兩個(gè)頂項(xiàng)!" ) ; 
88. return ; 
89. } 
90. tv_topnodeitem = this ; 
91. } 
92. this.img = img ; 
93. this.tag = null ; 
94. this.status = "100" ; 
95. this.subitems = new Array() ; 
96. this.maxsubitem = null ; 
97. this.id = nodeitemRegister( this ) ; 
98. //********************** 
99. this.questionId = 0; 
100. this.description = ""; 
101. //this.url = null; 
102. //********************** 
103. //added by msb for the sort and move up/down 
104. /*if ( this == tv_topnodeitem ) 
105. { 
106. this.nodeIndex = 0; 
107. } else { 
108. this.nodeIndex = this.parent.subitems.length; 
109. }*/ 
110. //end added 
111. } 
112. //added by msb for the sort and move up/down 
113. function nodeitem_moveUp() { 
114. if (this == tv_topnodeitem) return; //topitem 
115. ssubitems = this.parent.subitems; 
116. for ( i=0; i<ssubitems.length; i++ ) { 
117. if( ssubitems[i] == this ) { 
118. break; 
119. } 
120. } 
121. if (i==0) return; 
122. ssubitems[i] = ssubitems[i-1]; 
123. ssubitems[i-1] = this; 
124. if (i==ssubitems.length-1) { 
125. ssubitems[i-1].status = "2" + ssubitems[i-1].status.substring(1, 3); 
126. ssubitems[i].status = "1" + ssubitems[i].status.substring(1, 3); 
127. } 
128. /* 
129. itemTemp = this; 
130. ssubitems[this.nodeIndex-1] */ 
131. /* for ( i=0; i<ssubitems.length; i++ ) { 
132. if( ssubitems[i] != null && ssubitems[i].nodeIndex == (this.nodeIndex-1) ) 
133. previousitem = ssubitems[i] 
134. } 
135. previousitem.nodeIndex = this.nodeIndex; 
136. this.nodeIndex = this.nodeIndex -1; 
137. swap(this,previousitem); 
138. */ 
139. //label_on_click(this.id); 
140. this.parent.refresh(); 
141. lable_on_click(this.id); 
142. }//moveUp() 
143. function nodeitem_moveDown() { 
144. if (this == tv_topnodeitem) return; //topitem 
145. ssubitems = this.parent.subitems; 
146. for ( i=0; i<ssubitems.length; i++ ) { 
147. if( ssubitems[i] == this ) { 
148. break; 
149. } 
150. } 
151. if (i==ssubitems.length-1) return; 
152. ssubitems[i] = ssubitems[i+1]; 
153. ssubitems[i+1] = this; 
154. if (i==ssubitems.length-2) { 
155. ssubitems[i+1].status = "1" + ssubitems[i+1].status.substring(1, 3); 
156. ssubitems[i].status = "2" + ssubitems[i].status.substring(1, 3); 
157. } 
158. this.parent.refresh(); 
159. lable_on_click(this.id); 
160. }//moveDown() 
161. /*function swap (item1, item2) { 
162. nodeitems[item1.id] = item2; 
163. nodeitems[item2.id] = item1; 
164. idTemp = item1.id; 
165. item1.id = item2.id; 
166. item2.id = idTemp; 
167. }*/ 
168. //end added 
169. function nodeitem_setTag( obj ) { 
170. this.tag = obj ; 
171. } 
172. function nodeitem_getTag() { 
173. return this.tag ; 
174. } 
175. function nodeitem_show() { 
176. str = "<span id = 'preface" + this.id + "'><table border='0' cellspacing='0' cellpadding='0'><tr><td>" ; 
177. str_f = "" ; 
178. for( j = this.parent ; j != null ; j = j.parent ) { 
179. if( j.status.substring( 0 , 1 ) == 1 ) 
180. str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle'>" + str_f ; 
181. else 
182. str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle'>" + str_f ; 
183. } 
184. str = str + str_f ; 
185. str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ; 
186. switch( this.status.substring( 0 , 2 ) ) { 
187. case "10" : str += treeview_box_1_none ; break ; 
188. case "11" : str += treeview_box_1_close ; break ; 
189. case "12" : str += treeview_box_1_open ; break ; 
190. case "20" : str += treeview_box_2_none ; break ; 
191. case "21" : str += treeview_box_2_close ; break ; 
192. case "22" : str += treeview_box_2_open ; break ; 
193. } 
194. str += "' align='absmiddle' onclick='box_on_click(this)'>" ; 
195. if( this.img == "" ) 
196. str += this.img ; 
197. else 
198. str += "<img src = '" + this.img + "' align='absmiddle' width='16' height='16'>" ; 
199. 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>" ;  
200. str += "</span><span id = 'tv_panel_" + this.id + "' style='display:" ; 
201. if( this.status.substring( 1 , 2 ) == '2' ) 
202. str += "" ; 
203. else 
204. str += "none" ; 
205. str += "'></span>" ; 
206. if( this.parent == null )  
207. for(var i in document.all){ 
208. if (document.all[i].tagName == "BODY") 
209. { 
210. document.all[i].insertAdjacentHTML( "AfterBegin" , str ) ; 
211. break 
212. } 
213. } 
214. else 
215. document.all( "tv_panel_" + this.parent.id ).insertAdjacentHTML( "BeforeEnd" , str ) ; 
216. for( m = 0 ; m < this.subitems.length ; m ++ )  
217. if( this.subitems[ m ] != null ) { 
218. userstack.put( m ) ; 
219. this.subitems[ m ].show() ; 
220. m = userstack.get() ; 
221. } 
222. } 
223. function nodeitem_refresh() { 
224. str = "<table border='0' cellspacing='0' cellpadding='0'><tr><td>" ; 
225. str_f = "" ; 
226. for( j = this.parent ; j != null ; j = j.parent ) { 
227. if( j.status.substring( 0 , 1 ) == 1 ) 
228. str_f = "<img src = '" + treeview_box_0_none + "' align='absmiddle'>" + str_f ; 
229. else 
230. str_f = "<img src = '" + treeview_box_0_line + "' align='absmiddle'>" + str_f ; 
231. } 
232. str = str + str_f ; 
233. str += "<img id = 'box" + this.id + "' nodeid = '" + this.id + "' src = '" ; 
234. switch( this.status.substring( 0 , 2 ) ) { 
235. case "10" : str += treeview_box_1_none ; break ; 
236. case "11" : str += treeview_box_1_close ; break ; 
237. case "12" : str += treeview_box_1_open ; break ; 
238. case "20" : str += treeview_box_2_none ; break ; 
239. case "21" : str += treeview_box_2_close ; break ; 
240. case "22" : str += treeview_box_2_open ; break ; 
241. } 
242. str += "' align='absmiddle' onclick='box_on_click(this)'>" ; 
243. if( this.img == "" ) 
244. str += this.img ; 
245. else 
246. str += "<img src = '" + this.img + "' align='absmiddle' width='16' height='16'>" ; 
247. 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>" ;  
248. document.all( "preface" + this.id ).innerHTML = str ; 
249. document.all( "tv_panel_" + this.id ).innerHTML = "" ; 
250. for( m = 0 ; m < this.subitems.length ; m ++ ) 
251. if( this.subitems[ m ] != null ) { 
252. userstack.put( m ) ; 
253. this.subitems[ m ].show() ; 
254. m = userstack.get() ; 
255. } 
256. } 
257. function nodeitem_remove() { 
258. pparent = this.parent ; 
259. if( pparent == null ) { 
260. removenodeitem( this.id ) ; 
261. for(var i in document.all){ 
262. if (document.all[i].tagName == "BODY") 
263. { 
264. document.all[i].innerHTML = "" ; 
265. break 
266. } 
267. } 
268. return ; 
269. } 
270. lastsubitem = null ; 
271. for( i = 0 ; i < pparent.subitems.length ; i ++ ) 
272. if( pparent.subitems[ i ] != null )  
273. if ( pparent.subitems[ i ] == this )  
274. pparent.subitems[ i ] = null ; 
275. else 
276. lastsubitem = pparent.subitems[ i ] ; 
277. pparent.maxsubitem = lastsubitem ;  
278. if( lastsubitem == null )  
279. pparent.status = pparent.status.substring( 0 , 1 ) + "0" + pparent.status.substring( 2 , 3 ) ; 
280. else 
281. pparent.maxsubitem.status = "1" + pparent.maxsubitem.status.substring( 1 , 3 ) ; 
282. removenodeitem( this.id ) ; 
283. //added by msb for move up/down 
284. arrTemp = new Array(); 
285. j = 0; 
286. for ( i=0; i<pparent.subitems.length; i++ ) { 
287. if ( pparent.subitems[i] != null ) { 
288. arrTemp[j] = pparent.subitems[i]; 
289. j++; 
290. } 
291. } 
292. this.parent.subitems = arrTemp; 
293. //end added 
294. pparent.refresh() ; 
295. //tv_topnodeitem.refresh() ; 
296. } 
297. function removenodeitem( id ) { 
298. curitem = nodeitems[ id ] ; 
299. nodeitems[ id ] = null ; 
300. for( m = 0 ; m < curitem.subitems.length ; m ++ )  
301. if( curitem.subitems[ m ] != null ) { 
302. userstack.put( m ) ; 
303. removenodeitem( curitem.subitems[ m ].id ) ; 
304. m = userstack.get() ; 
305. } 
306. } 
307. function nodeitem_boxclick() { 
308. if( this.status.substring( 1 ,2 ) == "0" ) 
309. return ;  
310. if( this.status.substring( 1 ,2 ) == "1" )  
311. this.open() ; 
312. else 
313. this.close() ; 
314. } 
315. function nodeitem_close() { 
316. this.status = this.status.substring( 0 , 1 ) + "1" + this.status.substring( 2 , 3 ) ; 
317. document.all( "tv_panel_" + this.id ).style.display = "none" ; 
318. eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_close" ) ; 
319. } 
320. function nodeitem_open() { 
321. this.status = this.status.substring( 0 , 1 ) + "2" + this.status.substring( 2 , 3 ) ; 
322. document.all( "tv_panel_" + this.id ).style.display = "" ; 
323. eval( "document.all( 'box' + this.id ).src = treeview_box_" + this.status.substring( 0 , 1 ) +"_open" ) ; 
324. } 
325. //added by msb for the move up/down 
326. nodeitem.prototype.moveUp = nodeitem_moveUp; 
327. nodeitem.prototype.moveDown = nodeitem_moveDown; 
328. //end added 
329. nodeitem.prototype.show = nodeitem_show ; 
330. nodeitem.prototype.refresh = nodeitem_refresh ; 
331. nodeitem.prototype.boxclick = nodeitem_boxclick ; 
332. nodeitem.prototype.close = nodeitem_close ; 
333. nodeitem.prototype.open = nodeitem_open ; 
334. nodeitem.prototype.remove = nodeitem_remove ; 
335. nodeitem.prototype.setTag = nodeitem_setTag ; 
336. nodeitem.prototype.getTag = nodeitem_getTag ; 
337. //========================================================== 
338. // Public Methods 
339. //========================================================== 
340. function showTV() { 
341. tv_topnodeitem.show() ; 
342. } 
343. function findNode( key ) { 
344. pppp = null; 
345. for( i = 0 ; i < nodeitems.length ; i ++ ) { 
346. if( nodeitems[ i ] != null ) { 
347. if( nodeitems[ i ].key == key ) { 
348. pppp = nodeitems[ i ] ; 
349. } 
350. } 
351. } 
352. return pppp ; 
353. } 
354. function addNode( parentkey , key , lable , img ) { 
355. return new nodeitem( parentkey , key , lable , img ) ; 
356. } 
357. function deleteNode( key ) { 
358. curNode = findNode( key ) ; 
359. if( curNode == null ) 
360. return false ; 
361. curNode.remove() ;  
362. return true ; 
363. } 
364. //====== END ================ 
365. //=========================================================== 
366. // Events 
367. //=========================================================== 
368. function box_on_click( obj ) { 
369. nodeitems[ obj.nodeid ].boxclick() ; 
370. } 
371. tv_curlable = null ; 
372. tv_curlable_f = null ; 
373. function lable_on_click( id ) { 
374. key = nodeitems[ id ].key ; 
375. if( nodeitems[ id ].parent == null ) 
376. parentkey = "" ; 
377. else 
378. parentkey = nodeitems[ id ].parent.key ; 
379. if( tv_curlable != null ) { 
380. tv_curlable.bgColor = "transparent" ; 
381. tv_curlable.style.color = "#333333" ; 
382. tv_curlable_f.bgColor = "transparent" ; 
383. } 
384. tv_curlable = document.all("lablePanel"+id) ; 
385. tv_curlable.bgColor = "#000000" ; 
386. tv_curlable.style.color = "#FFFFFF" ; 
387. tv_curlable_f = document.all("f_lablePanel"+id) ; 
388. tv_curlable_f.bgColor = "#888888" ; 
389. for( i = 0 ; i < tv_listeners.length ; i ++ )  
390. if( tv_listeners[ i ].type == "click" ) { 
391. h = tv_listeners[ i ].handler ; 
392. eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ;  
393. } 
394. } 
395. function lable_on_dblclick( id ) { 
396. key = nodeitems[ id ].key ; 
397. if( nodeitems[ id ].parent == null ) 
398. parentkey = "" ; 
399. else 
400. parentkey = nodeitems[ id ].parent.key ; 
401. if( tv_curlable != null ) { 
402. tv_curlable.bgColor = "transparent" ; 
403. tv_curlable.style.color = "#333333" ; 
404. tv_curlable_f.bgColor = "transparent" ; 
405. } 
406. tv_curlable = document.all("lablePanel"+id) ; 
407. tv_curlable.bgColor = "#000000" ; 
408. tv_curlable.style.color = "#FFFFFF" ; 
409. tv_curlable_f = document.all("f_lablePanel"+id) ; 
410. tv_curlable_f.bgColor = "#888888" ; 
411. for( i = 0 ; i < tv_listeners.length ; i ++ )  
412. if( tv_listeners[ i ].type == "dblclick" ) { 
413. h = tv_listeners[ i ].handler ; 
414. eval( h + "( '" + key + "' , '" + parentkey + "' ) ; " ) ;  
415. } 
416. } 

javascript調(diào)用

1. <script language="javascript"> 
2. <!-- 
3. addNode(-1,0,"hehe","../images/top.gif"); 
4. addNode(0,1,"haha","../images/top.gif"); 
5. addNode(0,2,"haha","../images/top.gif"); 
6. addNode(1,3,"haha","../images/top.gif"); 
7. addNode(1,4,"haha","../images/top.gif"); 
8. addNode(2,5,"haha","../images/top.gif"); 
9. addNode(2,6,"haha","../images/top.gif"); 
10. showTV(); 
11. --> 
12. </script> 

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。