实用的Jquery树型菜单

实例截图：

页面使用代码：

<SCRIPT type=text/javascript>
var tree = null;
var root = new TreeNode('系统菜单');
var fun0 = new TreeNode('软件素材页信息管理');
var funo = new TreeNode('风格类别管理', 'list.php', 'tree_node.gif', null, 'tree_node.gif', null , true);
fun0.add(funo);
var fun1 = new TreeNode('QQ信息管理', 'minfo.php', 'tree_node.gif', null, 'tree_node.gif', null, true);
fun0.add(fun1);
var fun2 = new TreeNode('新增QQ信息', 'ainfo.php', 'tree_node.gif', null, 'tree_node.gif', null, true);
fun0.add(fun2);
root.add(fun0);

var funQ = new TreeNode('软件首页推荐QQ列表');
var funQ1 = new TreeNode('查看推荐列表', 'list_qq.php', 'tree_node.gif', null, 'tree_node.gif', null, true);
funQ.add(funQ1);
var funQ1 = new TreeNode('固定列表', 'list_qq_fix.php', 'tree_node.gif', null, 'tree_node.gif', null, true);
funQ.add(funQ1);
root.add(funQ);

var funM = new TreeNode('音乐克隆器');
var funM1 = new TreeNode('查看推荐QQ','music_qq.php','tree_node.gif',null,'tree_node.gif',null, true);
funM.add(funM1);
var funM1 = new TreeNode('查看推荐音乐','music_list.php','tree_node.gif',null,'tree_node.gif',null, true);
funM.add(funM1);
root.add(funM);

var funU = new TreeNode('上传文件','upload/down.php','tree_node.gif',null,'tree_node.gif',null, true);
root.add(funU);
var funBd = new TreeNode('百度关键字','baidu/wd_bs.php','tree_node.gif',null,'tree_node.gif',null, true);
root.add(funBd);

tree = new Tree(root);
tree.show('menuTree');
</SCRIPT>

TreeNode.js

代码如下

var currentNode = null;

function TreeNode(text, url, iconOpen, iconOpenHover, iconClosed, iconClosedHover , isLeft) {
var $ = this;
this.level = 0;
this.children = [];
this.parent = null;
this.status = "CLOSED";
this.ancestor = [];
this.isHover = false;
this.isLeft = isLeft;

this.PATH = "images/tree/";
if(!isLeft){
this.COLLAPSED = this.PATH + "arrow_collapsed.gif";
this.EXPANDED = this.PATH + "arrow_expanded.gif";
this.COLLAPSED_HOVER = this.PATH + "arrow_collapsed_hover.gif";
}else{
this.COLLAPSED = this.PATH + "empty.gif";
this.EXPANDED = this.PATH + "empty.gif";
this.COLLAPSED_HOVER = this.PATH + "empty.gif";
}

this.EXPANDED_HOVER = this.PATH + "arrow_expanded_hover.gif";
this.CATEGORYOPEN = this.PATH + (iconOpen ? iconOpen : "folder_open.gif");
this.CATEGORYOPEN_HOVER = this.CATEGORYOPEN;
this.CATEGORYCLOSED = this.PATH + (iconClosed ? iconClosed : "folder_closed.gif");
this.CATEGORYCLOSED_HOVER = this.CATEGORYCLOSED;
this.EMPTY = this.PATH + "empty.gif";

this.container = document.createElement("DIV");
this.content = document.createElement("DIV");
this.indentSpace = document.createElement("SPAN");
this.statusIcon = document.createElement("IMG");
this.node = document.createElement("SPAN");
this.nodeIcon = document.createElement("IMG");
this.label = document.createElement("A");
this.container.appendChild(this.content);
this.content.appendChild(this.indentSpace);
this.content.appendChild(this.statusIcon);
this.content.appendChild(this.node);
this.node.appendChild(this.nodeIcon);
this.node.appendChild(this.label);

this.container.style.display = "block";
if(!isLeft){
this.statusIcon.src = this.COLLAPSED;
}
this.nodeIcon.src = this.CATEGORYCLOSED;
this.nodeIcon.align = "absmiddle";
this.statusIcon.align = "absmiddle";
this.statusIcon.style.cursor = "default";
this.node.style.cursor = "default";
this.label.style.lineHeight = "20px";
this.label.style.fontSize = "12px";
this.label.style.display = "inline-block";
this.label.style.backgroundImage = "url(" + this.BG + ")";
this.label.style.backgroundRepeat = "repeat-x";
this.label.innerHTML = text;

if (url) {
this.label.href = url;
this.label.target = "mainFrame";
}

this.add = function(child) {
this.container.appendChild(child.container);
this.children.push(child);
child.parent = this;
}

this.remove = function(child) {
child.container.removeNode(true);
var temp = [];
for (var i = 0; i < this.children.length; i++) {
if (this.children[i] != child) {
temp.push(this.children[i]);
} else {
continue;
}
}
this.children = temp;
}

this.hidden = function() {
this.container.style.display = "none";
}

this.show = function() {
this.container.style.display = "block";
}

this.getAncestor = function(level) {
if (this.level == level)
return this;
for (var i = 0; i < $.ancestor.length; i++) {
if ($.ancestor[i].level == level) {
return $.ancestor[i];
}
}
return null;
}

this.contains = function(node) {
for (var i = 0; i < $.children.length; i++) {
if ($.children[i] == node) {
return true;
}
$.children[i].contains(node);
}
return false;
}

this.indent = function() {
this.indentSpace.innerHTML = "";
for (var i = 0; i < this.level; i++) {
var indentImg = document.createElement("IMG");
indentImg.src = this.EMPTY;
indentImg.align = "absmiddle";
this.indentSpace.appendChild(indentImg);
}
this.collapse();
}

this.setIcon = function() {
this.nodeIcon = this.status == "CLOSED" ?
($.isHover ? $.CATEGORYCLOSED_HOVER : $.CATEGORYCLOSED) :
($.isHover ? $.CATEGORYOPEN_HOVER : $.CATEGORYOPEN);
}

this.collapse = function() {
for (var i = 0; $.children && i < $.children.length; i++) {
$.children[i].hidden();
}
$.statusIcon.src = $.COLLAPSED;
$.nodeIcon.src = $.CATEGORYCLOSED;
$.status = "CLOSED";
}

this.expand = function() {
for (var i = 0; $.children && i < $.children.length; i++) {
$.children[i].show();
}
$.statusIcon.src = $.EXPANDED;
$.nodeIcon.src = $.CATEGORYOPEN;
$.status = "OPEN";
}

this.expandOrCollapse = function() {
if ($.status == "CLOSED") {
if (currentNode) {
var ancestor = currentNode.getAncestor(1);
var myAncestor = $.getAncestor(1);
if (ancestor && myAncestor && ancestor != myAncestor) {
ancestor.collapse();
}
}
currentNode = $;
$.expand();
} else {
$.collapse();
}
}

this.node.onmousedown = function() {
if (currentNode) {
currentNode.nodeIcon.src = (currentNode.status == "CLOSED" ? currentNode.CATEGORYCLOSED : currentNode.CATEGORYOPEN);
}
}

this.node.onmouseup = function() {
if (event.button == 2) {

}
}

this.content.onselectstart = function() {
return false;
}

this.statusIcon.onclick = this.expandOrCollapse;
this.nodeIcon.ondblclick = this.expandOrCollapse;
this.label.onclick = this.expandOrCollapse;

this.statusIcon.onmouseover = function() {
if(!isLeft){
this.src = $.status == "CLOSED" ? $.COLLAPSED_HOVER : $.EXPANDED_HOVER;
}else{
this.src = $.EMPTY;
}

}

this.statusIcon.onmouseout = function() {
if(!isLeft){
this.src = $.status == "CLOSED" ? $.COLLAPSED : $.EXPANDED;
}else{
this.src = $.EMPTY;
}
}
}

Tree.js 代码如下：

function Tree(rootNode) {
var $ = this;
this.root = rootNode;

this.show = function(container) {
$.update($.root);
this.root.expand();

if(container.tagName)
container.appendChild($.root.container);
else if(typeof container == "string")
document.getElementById(container).appendChild($.root.container);
}

this.update = function(parent) {
parent.indent();
for (var i = 0; i < parent.children.length; i++) {
parent.children[i].level = parent.level + 1;
for (var j = 0; j < parent.ancestor.length; j++) {
parent.children[i].ancestor.push(parent.ancestor[j]);
}
parent.children[i].ancestor.push(parent);
$.update(parent.children[i]);
}
}
}