var webFXTreeConfig = {
rootIcon        : '../images/foldericon.gif',
openRootIcon    : '../images/foldericon.gif',
folderIcon      : '../images/folder.gif',
openFolderIcon  : '../images/folderopen.gif',
fileIcon        : '../images/file.gif',
iIcon           : '../images/I.png',
lIcon           : '../images/L.png',
lMinusIcon      : '../images/Lminus.png',
lPlusIcon       : '../images/Lplus.png',
tIcon           : '../images/T.png',
tMinusIcon      : '../images/Lminus.png',
tPlusIcon       : '../images/Tplus.png',
blankIcon       : '../images/blank.png',
defaultText     : 'Tree Item',
defaultAction   : 'javascript:void(0);',
defaultBehavior : 'classic',
usePersistence : true
};var webFXTreeHandler = {
idCounter : 0,
idPrefix  : "webfx-tree-object-",
all       : {},
behavior  : null,
selected  : null,
onSelect  : null, /* should be part of tree, not handler */
getId     : function() { return this.idPrefix + this.idCounter++; },
toggle    : function (oItem) { this.all[oItem.id.replace('-plus','')].toggle(); },
select    : function (oItem) { this.all[oItem.id.replace('-icon','')].select(); },
focus     : function (oItem) { this.all[oItem.id.replace('-anchor','')].focus(); },
blur      : function (oItem) { this.all[oItem.id.replace('-anchor','')].blur(); },
keydown   : function (oItem, e) { return this.all[oItem.id].keydown(e.keyCode); },
cookies   : new WebFXCookie(),
insertHTMLBeforeEnd : function (oElement, sHTML) {
if (oElement.insertAdjacentHTML != null) {
oElement.insertAdjacentHTML("BeforeEnd", sHTML)
return;
}
var df; // DocumentFragment
var r = oElement.ownerDocument.createRange();
r.selectNodeContents(oElement);
r.collapse(false);
df = r.createContextualFragment(sHTML);
oElement.appendChild(df);
}
};/*
 * WebFXCookie class
 */function WebFXCookie() {
if (document.cookie.length) { this.cookies = ' ' + document.cookie; }
}WebFXCookie.prototype.setCookie = function (key, value) {
document.cookie = key + "=" + escape(value);
}WebFXCookie.prototype.getCookie = function (key) {
if (this.cookies) {
var start = this.cookies.indexOf(' ' + key + '=');
if (start == -1) { return null; }
var end = this.cookies.indexOf(";", start);
if (end == -1) { end = this.cookies.length; }
end -= start;
var cookie = this.cookies.substr(start,end);
return unescape(cookie.substr(cookie.indexOf('=') + 1, cookie.length - cookie.indexOf('=') + 1));
}
else { return null; }
}/*
 * WebFXTreeAbstractNode class
 */function WebFXTreeAbstractNode(sText, sAction) {
this.childNodes  = [];
this.id     = webFXTreeHandler.getId();
this.text   = sText || webFXTreeConfig.defaultText;
this.action = sAction || webFXTreeConfig.defaultAction;
this._last  = false;
webFXTreeHandler.all[this.id] = this;
}/*
 * To speed thing up if you're adding multiple nodes at once (after load)
 * use the bNoIdent parameter to prevent automatic re-indentation and call
 * the obj.ident() method manually once all nodes has been added.
 */

解决方案 »

  1.   


    WebFXTreeAbstractNode.prototype.add = function (node, bNoIdent) {
    node.parentNode = this;
    this.childNodes[this.childNodes.length] = node;
    var root = this;
    if (this.childNodes.length >= 2) {
    this.childNodes[this.childNodes.length - 2]._last = false;
    }
    while (root.parentNode) { root = root.parentNode; }
    if (root.rendered) {
    if (this.childNodes.length >= 2) {
    document.getElementById(this.childNodes[this.childNodes.length - 2].id + '-plus').src = ((this.childNodes[this.childNodes.length -2].folder)?((this.childNodes[this.childNodes.length -2].open)?webFXTreeConfig.tMinusIcon:webFXTreeConfig.tPlusIcon):webFXTreeConfig.tIcon);
    this.childNodes[this.childNodes.length - 2].plusIcon = webFXTreeConfig.tPlusIcon;
    this.childNodes[this.childNodes.length - 2].minusIcon = webFXTreeConfig.tMinusIcon;
    this.childNodes[this.childNodes.length - 2]._last = false;
    }
    this._last = true;
    var foo = this;
    while (foo.parentNode) {
    for (var i = 0; i < foo.parentNode.childNodes.length; i++) {
    if (foo.id == foo.parentNode.childNodes[i].id) { break; }
    }
    if (i == foo.parentNode.childNodes.length - 1) { foo.parentNode._last = true; }
    else { foo.parentNode._last = false; }
    foo = foo.parentNode;
    }
    webFXTreeHandler.insertHTMLBeforeEnd(document.getElementById(this.id + '-cont'), node.toString());
    if ((!this.folder) && (!this.openIcon)) {
    this.icon = webFXTreeConfig.folderIcon;
    this.openIcon = webFXTreeConfig.openFolderIcon;
    }
    if (!this.folder) { this.folder = true; this.collapse(true); }
    if (!bNoIdent) { this.indent(); }
    }
    return node;
    }WebFXTreeAbstractNode.prototype.toggle = function() {
    if (this.folder) {
    if (this.open) { this.collapse(); }
    else { this.expand(); }
    } }WebFXTreeAbstractNode.prototype.select = function() {
    document.getElementById(this.id + '-anchor').focus();
    }WebFXTreeAbstractNode.prototype.deSelect = function() {
    document.getElementById(this.id + '-anchor').className = '';
    webFXTreeHandler.selected = null;
    }WebFXTreeAbstractNode.prototype.focus = function() {
    if ((webFXTreeHandler.selected) && (webFXTreeHandler.selected != this)) { webFXTreeHandler.selected.deSelect(); }
    webFXTreeHandler.selected = this;
    if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.openIcon; }
    document.getElementById(this.id + '-anchor').className = 'selected';
    document.getElementById(this.id + '-anchor').focus();
    if (webFXTreeHandler.onSelect) { webFXTreeHandler.onSelect(this); }
    }WebFXTreeAbstractNode.prototype.blur = function() {
    if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.icon; }
    document.getElementById(this.id + '-anchor').className = 'selected-inactive';
    }WebFXTreeAbstractNode.prototype.doExpand = function() {
    if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.openIcon; }
    if (this.childNodes.length) {  document.getElementById(this.id + '-cont').style.display = 'block'; }
    this.open = true;
    if (webFXTreeConfig.usePersistence) {
    webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '1');
    } }WebFXTreeAbstractNode.prototype.doCollapse = function() {
    if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.icon; }
    if (this.childNodes.length) { document.getElementById(this.id + '-cont').style.display = 'none'; }
    this.open = false;
    if (webFXTreeConfig.usePersistence) {
    webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '0');
    } }WebFXTreeAbstractNode.prototype.expandAll = function() {
    this.expandChildren();
    if ((this.folder) && (!this.open)) { this.expand(); }
    }WebFXTreeAbstractNode.prototype.expandChildren = function() {
    for (var i = 0; i < this.childNodes.length; i++) {
    this.childNodes[i].expandAll();
    } }WebFXTreeAbstractNode.prototype.collapseAll = function() {
    this.collapseChildren();
    if ((this.folder) && (this.open)) { this.collapse(true); }
    }
      

  2.   


    WebFXTreeAbstractNode.prototype.collapseChildren = function() {
    for (var i = 0; i < this.childNodes.length; i++) {
    this.childNodes[i].collapseAll();
    } }WebFXTreeAbstractNode.prototype.indent = function(lvl, del, last, level, nodesLeft) {
    /*
     * Since we only want to modify items one level below ourself,
     * and since the rightmost indentation position is occupied by
     * the plus icon we set this to -2
     */
    if (lvl == null) { lvl = -2; }
    var state = 0;
    for (var i = this.childNodes.length - 1; i >= 0 ; i--) {
    state = this.childNodes[i].indent(lvl + 1, del, last, level);
    if (state) { return; }
    }
    if (del) {
    if ((level >= this._level) && (document.getElementById(this.id + '-plus'))) {
    if (this.folder) {
    document.getElementById(this.id + '-plus').src = (this.open)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.lPlusIcon;
    this.plusIcon = webFXTreeConfig.lPlusIcon;
    this.minusIcon = webFXTreeConfig.lMinusIcon;
    }
    else if (nodesLeft) { document.getElementById(this.id + '-plus').src = webFXTreeConfig.lIcon; }
    return 1;
    } }
    var foo = document.getElementById(this.id + '-indent-' + lvl);
    if (foo) {
    if ((foo._last) || ((del) && (last))) { foo.src =  webFXTreeConfig.blankIcon; }
    else { foo.src =  webFXTreeConfig.iIcon; }
    }
    return 0;
    }/*
     * WebFXTree class
     */function WebFXTree(sText, sAction, sBehavior, sIcon, sOpenIcon) {
    this.base = WebFXTreeAbstractNode;
    this.base(sText, sAction);
    this.icon      = sIcon || webFXTreeConfig.rootIcon;
    this.openIcon  = sOpenIcon || webFXTreeConfig.openRootIcon;
    /* Defaults to open */
    if (webFXTreeConfig.usePersistence) {
    this.open  = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '0')?false:true;
    } else { this.open  = true; }
    this.folder    = true;
    this.rendered  = false;
    this.onSelect  = null;
    if (!webFXTreeHandler.behavior) {  webFXTreeHandler.behavior = sBehavior || webFXTreeConfig.defaultBehavior; }
    }WebFXTree.prototype = new WebFXTreeAbstractNode;WebFXTree.prototype.setBehavior = function (sBehavior) {
    webFXTreeHandler.behavior =  sBehavior;
    };WebFXTree.prototype.getBehavior = function (sBehavior) {
    return webFXTreeHandler.behavior;
    };WebFXTree.prototype.getSelected = function() {
    if (webFXTreeHandler.selected) { return webFXTreeHandler.selected; }
    else { return null; }
    }WebFXTree.prototype.remove = function() { }WebFXTree.prototype.expand = function() {
    this.doExpand();
    }WebFXTree.prototype.collapse = function(b) {
    if (!b) { this.focus(); }
    this.doCollapse();
    }WebFXTree.prototype.getFirst = function() {
    return null;
    }WebFXTree.prototype.getLast = function() {
    return null;
    }WebFXTree.prototype.getNextSibling = function() {
    return null;
    }
      

  3.   

    做一个css
    用它来改变链接的颜色A:active{    COLOR: #cc0000}
    A{    COLOR: #000099;}
    A:hover{    COLOR: #cc0000}