加入收藏    手机频道
当前位置:首页 > 技术支持 > 网页设计
介绍一款树形菜单代码 文章出处:淮南智诚网络公司    网站责任编辑:     作者:     人气:    发表时间:2012-12-12
今天小编给大家介绍一款树形菜单代码不多废话直接上代码

<SCRIPT LANGUAGE="JavaScript" SRC="tree.js"></SCRIPT>
   <SCRIPT>
   ax0 = gFld("后台管理","#");
 
   ax1=insFld(ax0, gFld ('综合设置 ','#','ftv2folderopen.gif', 'ftv2folderclosed.gif'));
    insDoc(ax1, gLnk(0, " 常规信息设置 ", "config.asp", "ftv2doc.gif"));
    ax2=insFld(ax0, gFld ('新闻中心','#','ftv2folderopen.gif', 'ftv2folderclosed.gif')); 
    insDoc(ax12, gLnk(0, "添加新闻", "add.ASP", "ftv2doc.gif"));
     insDoc(ax12, gLnk(0, "新闻列表管理", "editnews.asp", "ftv2doc.gif"));
     ax3=insFld(ax0, gFld ('安全设置','#','ftv2folderopen.gif', 'ftv2folderclosed.gif')); 
     insDoc(ax3, gLnk(0, " 管理员密码修改 ", "safe.asp", "ftv2doc.gif"));
      insDoc(ax0 , gLnk(0, "注销", "logout.asp", "bu.gif"));
      initializeDocument();
   </SCRIPT>

tree.js代码

function Folder(folderDescription, hreference) {
   //constant data;
   this.desc = folderDescription;
   this.hreference = hreference;
   this.id = -1;
   this.navObj = 0;
   this.iconImg = 0;
   this.nodeImg = 0;
   this.isLastNode = 0;

   // dynamic data
   this.isRoot = true;
   this.isOpen = true;
   this.iconSrc = "ftv2folderopen.gif";
   this.iconRoot = "ftv2folderopen.gif"
   this.children = new Array;
   this.nChildren = 0;
                                  
   // methods
   this.initialize = initializeFolder;
   this.setState = setStateFolder;
   this.addChild = addChild;
   this.createIndex = createEntryIndex;
   this.hide = hideFolder;
   this.display = display;
   this.renderOb = drawFolder;
   this.totalHeight = totalHeight;
   this.subEntries = folderSubEntries;
   this.outputLink = outputFolderLink;
}


function setStateFolder(isOpen) {
   var subEntries;
   var totalHeight;
   var fIt = 0;
   var i = 0;
  
   if(isOpen == this.isOpen)
       return;
 
   if(browserVersion == 2) {
       totalHeight = 0
       for(i = 0; i < this.nChildren; i++)
           totalHeight = totalHeight + this.children[i].navObj.clip.height;
       subEntries = this.subEntries();
 
       if(this.isOpen)
           totalHeight = 0 - totalHeight;

       for(fIt = this.id + subEntries + 1; fIt < nEntries; fIt++)
           indexOfEntries[fIt].navObj.moveBy(0, totalHeight);
   }

   this.isOpen = isOpen;
   propagateChangesInState(this);
}


function propagateChangesInState(folder) {  
   var i = 0;
   if(folder.isOpen) {
       if(folder.nodeImg) {
           if(folder.isLastNode)
               folder.nodeImg.src = "images/ftv2mlastnode.gif";
           else
               folder.nodeImg.src = "images/ftv2mnode.gif";
       }

       if(this.isRoot)
           folder.iconImg.src = "images/ftv2mail.gif";
       else
           folder.iconImg.src = "images/ftv2folderopen.gif";
         
       for(i = 0; i < folder.nChildren; i++)
           folder.children[i].display();
   }
   else {
       if(folder.nodeImg) {
           if(folder.isLastNode)
               folder.nodeImg.src = "images/ftv2plastnode.gif";
           else
               folder.nodeImg.src = "images/ftv2pnode.gif";
       }

       if(this.isRoot)
           folder.iconImg.src = "images/ftv2mail.gif";
       else
           folder.iconImg.src = "images/ftv2folderclosed.gif";
  
       for(i = 0; i < folder.nChildren; i++)
           folder.children[i].hide();
   }
}

function hideFolder() {
    if(browserVersion == 1) {
        if(this.navObj.style.display == "none")
            return;

        this.navObj.style.display = "none";
    }
    else {
        if(this.navObj.visibility == "hiden")
            return;

        this.navObj.visibility = "hiden";
    }

    this.setState(0);
}


function initializeFolder(level, lastNode, leftSide) {
    var i = 0;
    var j = 0;

    var numberOfFolders;
    var numberOfDocs;

    nc = this.nChildren;
    this.createIndex();

    var nc;
    var auxEv = "";

    if(browserVersion > 0)
        auxEv = "<A HREF='JavaScript: clickOnNode("+this.id+")'>";//+
    else
        auxEv = "<A>";

    if(level > 0) {
        if(lastNode) { //the last 'brother' in the children array
           this.renderOb(leftSide + auxEv + "<IMG NAME='nodeIcon" + this.id + "' SRC='images/ftv2mlastnode.gif' WIDTH=16 HEIGHT=22 BORDER=0></A>");
           leftSide = leftSide + "<IMG SRC='images/ftv2blank.gif' WIDTH=16 HEIGHT=22>";
           this.isLastNode = 1;
        }
        else {
            this.renderOb(leftSide + auxEv + "<IMG NAME='nodeIcon" + this.id + "' SRC='images/ftv2mnode.gif' WIDTH=16 HEIGHT=22 BORDER=0></A>");
            leftSide = leftSide + "<IMG SRC='images/ftv2vertline.gif' WIDTH=16 HEIGHT=22>";
            this.isLastNode = 0;
        }
    }
    else {
        this.renderOb("");
    }

    if(nc > 0) {
        level = level + 1;
        for(i = 0; i < this.nChildren; i++) {
            if(i == this.nChildren-1)
                this.children[i].initialize(level, 1, leftSide);
            else
                this.children[i].initialize(level, 0, leftSide);
        }
    }
}
 

function drawFolder(leftSide) {
    //alert(leftSide);
    if(browserVersion == 2) {
        if(!doc.yPos)
          doc.yPos = 8;

        doc.write("<LAYER ID='folder" + this.id + "' TOP=" + doc.yPos + " VISIBILITY=hiden>");
    }
    doc.write("<TABLE")

    if(browserVersion == 1)
        doc.write(" ID='folder" + this.id + "' STYLE='position:block;' ");

    doc.write(" BORDER=0 CELLSPACING=0 CELLPADDING=0>");
    doc.write("<TR><TD valign=top>");
    doc.write(leftSide);

    this.outputLink();

    doc.write("<IMG NAME='folderIcon" + this.id + "' ");
    if(leftSide == '') {
        doc.write("SRC='images/" + this.iconRoot+"' BORDER=0></A>");
    }
    else {
        doc.write("SRC='images/" + this.iconSrc+"' BORDER=0></A>");
    }
      
    doc.write("</TD><TD NOWRAP valign=bottom>");
 
    doc.write("<DIV CLASS=\"fldrroot\">");

    if(leftSide == '') {
       if(USETEXTLINKS) {
          this.outputLink();
          doc.write(this.desc + "</A>");
       }
       else
         doc.write(this.desc);
    }
    else {
        doc.write("<A HREF='JavaScript: clickOnNode("+this.id+")'>");
        doc.write(this.desc + "</A>");
    }

    doc.write("</DIV>");
    doc.write("</TD>");
    doc.write("</TABLE>");

    if(browserVersion == 2) {
        doc.write("</LAYER>");
    }

    if(browserVersion == 1) {
        this.navObj = doc.all["folder"+this.id];
        this.iconImg = doc.all["folderIcon"+this.id]
        this.nodeImg = doc.all["nodeIcon"+this.id]
    }
    else if(browserVersion == 2) {
        this.navObj = doc.layers["folder"+this.id];
        this.iconImg = this.navObj.document.images["folderIcon"+this.id];
        this.nodeImg = this.navObj.document.images["nodeIcon"+this.id];
        doc.yPos = doc.yPos + this.navObj.clip.height;
    }
}
 

function outputFolderLink() {
    if(this.hreference) {
        doc.write("<A HREF='" + this.hreference + "' TARGET=\"main\" ")

        if(browserVersion > 0) {
            doc.write("onClick='JavaScript: clickOnFolder("+this.id+")'")//folder
        }
        doc.write(">")
    }
    else
        doc.write("<A>")
}


function addChild(childNode) {
    this.children[this.nChildren] = childNode;
    this.nChildren++;

    return(childNode);
}


function folderSubEntries() {
    var i = 0;
    var se = this.nChildren;
   
    for(i = 0; i < this.nChildren; i++) {
        if(this.children[i].children) //is a folder
            se = se + this.children[i].subEntries();
    }
   
    return(se)
}
 
 
// Definition of class Item (a document or link inside a Folder)

function Item(itemDescription, hreference, itemLink, itemImg) // Constructor
{
    // constant data
    this.desc = itemDescription
    this.link = itemLink
    this.hreference = hreference;
    this.id = -1;     //initialized in initalize()
    this.navObj = 0;  //initialized in render()
    this.iconImg = 0; //initialized in render()

    this.iconSrc = itemImg;

    // methods
    this.initialize = initializeItem ;
    this.createIndex = createEntryIndex;
    this.hide = hideItem;
    this.display = display;
    this.renderOb = drawItem;
    this.totalHeight = totalHeight;
}


function hideItem() {
    if(browserVersion == 1) {
        if(this.navObj.style.display == "none")
            return;
        this.navObj.style.display = "none"
    }
    else {
        if(this.navObj.visibility == "hiden")
            return;
        this.navObj.visibility = "hiden";
    }
}
 

function initializeItem(level, lastNode, leftSide) {
    this.createIndex();

    if(level > 0) {
        if(lastNode) { //the last 'brother' in the children array
            this.renderOb(leftSide + "<IMG SRC='images/ftv2lastnode.gif' WIDTH=16 HEIGHT=22>")
            leftSide = leftSide + "<IMG SRC='images/ftv2blank.gif' WIDTH=16 HEIGHT=22>" 
        }
        else {
            this.renderOb(leftSide + "<IMG SRC='images/ftv2node.gif' WIDTH=16 HEIGHT=22>")
            leftSide = leftSide + "<IMG SRC='images/ftv2vertline.gif' WIDTH=16 HEIGHT=22>"
        }
    }
    else
        this.renderOb("")  
}


function drawItem(leftSide) {
    if(browserVersion == 2)
        doc.write("<LAYER ID='item" + this.id + "' TOP=" + doc.yPos + " VISIBILITY=hiden>");//link
    
    doc.write("<TABLE ");
    if(browserVersion == 1)
        doc.write(" ID='item" + this.id + "' STYLE='position:block;' ");
    doc.write(" BORDER=0 CELLSPACING=0 CELLPADDING=0>");
    doc.write("<TR><TD>");
    doc.write(leftSide);

    if(this.link != "")
        doc.write("<A HREF=" + this.link + ">");
 
    doc.write("<IMG ID='itemIcon"+this.id+"' ")
    doc.write("SRC='images/"+this.iconSrc+"' BORDER=0>")

    if(this.link != "")
        doc.write("</A>");
 
    doc.write("</TD><TD NOWRAP>");     
    doc.write("<DIV CLASS=\"fldritem\">");
    if(USETEXTLINKS) {
        if(this.link != "")
            doc.write("<A HREF=" + this.link + ">" + this.desc + "</A>");
        else
            doc.write(this.desc);
    }
    else {
        doc.write(this.desc);
    }

    doc.write("</DIV>");
    doc.write("</TABLE>")
    
    if(browserVersion == 2)
        doc.write("</layer>");

    if(browserVersion == 1) {
        this.navObj = doc.all["item"+this.id]
        this.iconImg = doc.all["itemIcon"+this.id]
    }
    else if(browserVersion == 2) {
        this.navObj = doc.layers["item"+this.id];
        this.iconImg = this.navObj.document.images["itemIcon"+this.id];
        doc.yPos = doc.yPos+this.navObj.clip.height;
    }
}
 
 
// Methods common to both objects (pseudo-inheritance)    
function display() {
    if(browserVersion == 1)
        this.navObj.style.display = "block";
    else
        this.navObj.visibility = "show";
}


function createEntryIndex() {
    this.id = nEntries;
    indexOfEntries[nEntries] = this;
    nEntries++;
}


// total height of subEntries open
function totalHeight() { //used with browserVersion == 2
    var h = this.navObj.clip.height;
    var i = 0;

    if(this.isOpen) { // is a folder and _is_ open
        for(i = 0 ; i < this.nChildren; i++) 
            h = h + this.children[i].totalHeight();
    }

    return h
}
 
 
// Events
 
function clickOnFolder(folderId) {
    var clicked = indexOfEntries[folderId];

    if(!clicked.isOpen)
        clickOnNode(folderId);

    if(clicked.isSelected)
        return;
}
 

function clickOnNode(folderId) {
    var clickedFolder = 0;
    var state = 0;

    clickedFolder = indexOfEntries[folderId];
    state = clickedFolder.isOpen;
 
    clickedFolder.setState(!state); //open<->close
}


function initializeDocument() {
    if(doc.all)
        browserVersion = 1; //IE4
    else if(doc.layers)
        browserVersion = 2; //NS4
    else
        browserVersion = 0; //other

    ax0.initialize(0, 1, "");
    ax0.display();

    if(browserVersion > 0) {
        doc.write("<LAYER TOP="+indexOfEntries[nEntries-1].navObj.top+">&nbsp;</LAYER>");

        // close the whole tree
        clickOnNode(0);
   
        // open the root folder
        clickOnNode(0);
    }
}
 

// Auxiliary Functions for Folder-Treee backward compatibility  
function gFld(description, hreference) {
    folder = new Folder(description, hreference);
    return(folder);
}


function gLnk(target, description, linkData, itemImg) {
    fullLink = ""
  
    if(target == 0) {
        if(linkData != "")
            fullLink = "'"+linkData+"' TARGET=\"main\"";
        else
            fullLink = "";
    }
    else if(target == 1) {
        if(linkData != "")
            fullLink = "'"+linkData+"' TARGET=\"_self\"";
        else
            fullLink = "";
    }

    linkItem = new Item(description, linkData, fullLink, itemImg)  
    return linkItem
}


function insFld(parentFolder, childFolder) {
    return(parentFolder.addChild(childFolder));
}


function insDoc(parentFolder, document) {
    parentFolder.addChild(document);
}


// Global variables
 
USETEXTLINKS = 1;
indexOfEntries = new Array;
nEntries = 0;
doc = document;
browserVersion = 0;
selectedFolder = 0;
以上就是全部代码

想和他们一样成功吗?
此文关键词:
域名查询

    国家域名处理投诉中心
    010-58813000
    Email:supervise@cnnic.cn
Copyright © 2007 - 2020 版权所有 淮南智诚互动网络科技有限公司
皖ICP备09027578号 联系我们
友情链接:网站建设|网页设计|SEO优化 | 皖公网安备 34040002001248号