JavaScript幾種形式的樹結(jié)構(gòu)菜單
2024-05-06 14:10:07
供稿：網(wǎng)友
1.懸浮層樹(Tree)
這種樹結(jié)構(gòu)實(shí)現(xiàn)類似面包屑導(dǎo)航功能，監(jiān)聽的是節(jié)點(diǎn)鼠標(biāo)移動(dòng)的事件，然后在節(jié)點(diǎn)下方或右方顯示子節(jié)點(diǎn)，依此遞歸顯示子節(jié)點(diǎn)的子節(jié)點(diǎn)。
用戶首頁博客設(shè)置文章相冊留言評論系統(tǒng)
這里要注意幾個(gè)小問題，其一這種樹結(jié)構(gòu)是懸浮層絕對定位的，在創(chuàng)建層的時(shí)候一定要直接放在body的下面，這樣做的是確保在IE里面能遮掩住任何層，因?yàn)樵贗E里面是有stacking context這種東西的潛規(guī)則在里面的，另外當(dāng)然還有一個(gè)select你能遮住我嗎？老掉牙的問題，這里是采用在每個(gè)懸浮層后面加個(gè)iframe元素，當(dāng)然同一級的菜單只產(chǎn)生一個(gè)iframe元素，菜單有幾級將產(chǎn)生幾個(gè)iframe遮掩，然后菜單顯示和隱藏的時(shí)候同時(shí)顯示和隱藏iframe。
不過這種菜單并不合適前臺，因?yàn)槟壳爸恢С衷谀_本里動(dòng)態(tài)添加菜單節(jié)點(diǎn)，而不能從現(xiàn)有的html元素獲取菜單節(jié)點(diǎn)，我們?yōu)榱薙EO等前臺導(dǎo)航一般是在后臺動(dòng)態(tài)輸出的，假如菜單有多級的話也建議不超過2層，對客戶來說太多層也懶得去看，不過有個(gè)面包屑導(dǎo)航顯示還是很不錯(cuò)的。
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 ) {
