JavaScript幾種形式的樹結構菜單
2024-05-06 14:10:07
供稿：網友
1.懸浮層樹(Tree)
這種樹結構實現類似面包屑導航功能，監聽的是節點鼠標移動的事件，然后在節點下方或右方顯示子節點，依此遞歸顯示子節點的子節點。
用戶首頁博客設置文章相冊留言評論系統
這里要注意幾個小問題，其一這種樹結構是懸浮層絕對定位的，在創建層的時候一定要直接放在body的下面，這樣做的是確保在IE里面能遮掩住任何層，因為在IE里面是有stacking context這種東西的潛規則在里面的，另外當然還有一個select你能遮住我嗎？老掉牙的問題，這里是采用在每個懸浮層后面加個iframe元素，當然同一級的菜單只產生一個iframe元素，菜單有幾級將產生幾個iframe遮掩，然后菜單顯示和隱藏的時候同時顯示和隱藏iframe。
不過這種菜單并不合適前臺，因為目前只支持在腳本里動態添加菜單節點，而不能從現有的html元素獲取菜單節點，我們為了SEO等前臺導航一般是在后臺動態輸出的，假如菜單有多級的話也建議不超過2層，對客戶來說太多層也懶得去看，不過有個面包屑導航顯示還是很不錯的。
menu.js
代碼如下:
/*
** Author : Jonllen
** Create : 2009-12-13
** Update : 2010-05-08
** SVN : 152
** WebSite: http://www.jonllen.com/
*/
var Menu = function (container) {
this.container = container;
return this;
}
Menu.prototype = {
list : new Array(),
active : new Array(),
iframes : new Array(),
settings : {
id : null,
parentId : 0,
name : null,
url : null,
level : 1,
parent : null,
children : null,
css : null,
element : null
},
push : function (item) {
var list = Object.prototype.toString.apply(item) === '[object Array]' ? item : [item];
for( var i=0; i< list.length; i++) {
var settings = list[i];
for( p in this.settings) {
if( !settings.hasOwnProperty(p) ) settings[p] = this.settings[p];
}
this.list.push(settings);
}
return this;
},
getChlid : function (id) {
var list = new Array();
for( var i=0;i < this.list.length; i++)
{
var item = this.list[i];
if( item.parentId == id)
{
list.push(item);
}
}
return list;
},
render : function (container) {
var _this = this;
var menuElem = container || this.container;
for( var i=0;i < this.list.length; i++)
{
var item = this.list[i];
if ( item.parentId != 0 ) continue;
var itemElem = document.createElement('div');
itemElem.innerHTML = '<a href="'+item.url+'">'+item.name+'</a>';
itemElem.className = 'item';
if ( item.css ) itemElem.className += ' '+item.css;
var disabled = (' '+item.css+' ').indexOf(' disabled ')!=-1;
if ( disabled ) {
itemElem.childNodes[0].disabled = true;
itemElem.childNodes[0].className = 'disabled';
itemElem.childNodes[0].removeAttribute('href');
}
if ( (' '+item.css+' ').indexOf(' hidden ')!=-1 ) {
