JavaScript几种形式的树结构菜单

标签:关于我们    日期:2017-12-28 10:51    录入:汇盛国际平台    浏览:

  

[JavaScript,树结构,菜单]JavaScript几种形式的树结构菜单

  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:  
*/  
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 = ''+item.name+'';  
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 ) {  
itemElem.style.display = 'none';  
}  
itemElem.menu = item;  
itemElem.menu.children = this.getChlid(item.id);  
itemElem.onmouseover = function (e){  
_this.renderChlid(this);  
};  
menuElem.appendChild(itemElem);  
}  
document.onclick = function (e){  
e = window.event || e;  
var target = e.target || e.srcElement;  
if (!target.menu) {  
var self = _this;  
for( var i=1;i<_this.active.length;i++) {  
var item = _this.active[i];  
var menuElem = document.getElementById('menu'+item.id);  
if ( menuElem !=null)  
menuElem.style.display = 'none';  
}  
for(var j=1;j<_this.iframes.length;j++){  
_this.iframes[j].style.display = 'none';  
}  
}  
};  
},  
renderChlid : function (target){  
var self = this;  
var item = target.menu;  
var activeItem = self.active[item.level];  
while(activeItem) {  
var activeItemElem = activeItem.element;  
if ( activeItemElem!= null ) activeItemElem.style.display = 'none';  
activeItem = self.active[activeItem.level + 1];  
}  
self.active[item.level] = item;  
var level = item.level;  
while(this.iframes[level]) {  
this.iframes[level].style.display = 'none';  
level++;  
}  
var childElem = document.getElementById('menu'+item.id);  
if (childElem==null) {  
var hasChild = false;   ★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★