一个js实现的抽屉树(待完善)

/*********************************************************
  *   TreeView.js
  *   Auther : DeluxWorld
  *
 /*******************************************************/
var mMenu = new Array(); 
var toItemIndex = 0;
var onItemIndex = 0;
var focusId = "";

/*  
 * tree constructor
 * @param 
 * @return  tree object
 */

function Tree() {
 
  this.setHeadHeight = setHeadHeight;     
  this.setLayerTop = setLayerTop;         
  this.setLayerLeft = setLayerLeft;      
  this.setLayerWidth = setLayerWidth;     
  this.setTitleHeight = setTitleHeight;   
  this.setContentHeight = setContentHeight;

  this.imagePath = "";            
  this.iconPath = "";            
  this.setImagePath = setImagePath;
  this.getImagePath = getImagePath;
  this.setIconPath = setIconPath;
  this.getIconPath = getIconPath;
 
  this.build = build;
  this.show = show;
  return this;
}

/*
 *设置标题的高度
 */
function setHeadHeight(headHeight) {
  this.headHeight = headHeight;
}

/*
 *设置顶边距
 */
function setLayerTop(layerTop) {
  this.layerTop = layerTop;
}

/*
 *设置左边距
 */
function setLayerLeft(layerLeft) {
  this.layerLeft = layerLeft;
}

/*
 *设置区域宽度
 */
function setLayerWidth(layerWidth) {
  this.layerWidth = layerWidth;
}

/*
 *设置标题栏高度
 */
function setTitleHeight(titleHeight) {
  this.titleHeight = titleHeight;
}

/*
 *设置内容区高度
 */
function setContentHeight(contentHeight) {
  this.contentHeight = contentHeight;
}

/*  
 * 把子节点添加到树
 * @param    menu  子节点对象
 * @return   子节点在树上的id
 */
function regsterMainNode(menu) {
 
  mMenu[mMenu.length] = menu;
  return mMenu.length-1;
}

/*  
 * 构造子节点对象
 * @param  tree        树对象
 *         capture     节点对象标题
 *         img         节点对应背景图片名称
 * @return 节点对象
 */
function mainNode(tree, capture, backImg) {
 
    this.items = new Array();  //存放叶子节点
    this.tree = tree;
    this.backImg = backImg;
 
  if( tree.imagePath != "" ){
    this.mainImg = tree.imagePath + this.backImg;
 this.img = tree.imagePath + this.prexImg;
 //alert("this.mainImg="+this.mainImg);
  }else{
    alert("img的路径为空！请确认");
    return;
  }
  //子节点内容
  if(capture == null || capture == ""){
   alert("capture不能为空,请确认！");
  }else{
    this.mainCapture = capture;
  }
 
    this.id = regsterMainNode(this);
 
}

/*  
 * 构造叶子节点对象
 * @param  tree        树对象
 *         capture     节点对象标题
 *         link        超连接文件名
 *         icon        节点图片
 *         target      连接对象的显示位置
 * @return  叶子节点对象
 */

function subNode(tree, capture, link, target, icon) {
  
  this.tree = tree;
  this.link = link;
  this.icon = icon;
  this.target = target;
 
  if(tree.iconPath != ""){
    this.subIcon = tree.iconPath + this.icon; 
  }else{
    alert("icon不能为空,请确认");
    return false;
  }
 
  if(capture == null && capture == ""){
    alert("capture不能为空,请确认！");
    return false;
  }else{
     this.subCapture = capture;
   }
 
}

/*  
 * 向子节点中添加页子节点
 * @param  item 叶子节点对象
 * @return 
 */
 mainNode.prototype.addSubNode = function(item) {

 this.items[this.items.length] = item;
 }

/*  
 * 生成nodeHTML串
 * @param  array  mmenu  全局数组
 * @return 
 */

function build(mmenu) {
  
   var nodeHTML="";
  
   nodeHTML += "<link href=/"tree.css/" rel=/"stylesheet/" type=/"text/css/">"
   nodeHTML += "<span id=itemsLayer style=/"position:absolute;overflow:hidden;border:0px solid #008800;left:'"+this.layerLeft+"';top:'"+this.layerTop+"';width:'"+this.layerWidth+"';/">"
      for(var i=0; i<mmenu.length; i++){
         var rootid = "root"+i;
   nodeHTML += "<div id=node"+i+" style=/"LEFT: 0px; WIDTH: "+this.layerWidth+"; POSITION: relative; itemIndex=/""+i+"/"><TABLE cellSpacing=0 cellPadding=0 width=/"100%/"><TBODY><TR><TD class=titleStyle οnclick='on_click("+i+");return false;' align=middle height=" + this.titleHeight + " background="+ ">"
         +"<input class=btn type=button value=" + mmenu[i].mainCapture +" id="+ rootid+ " οnfοcus="+"getFocusId()" +" style=/"background-image: url("+mmenu[i].mainImg+");/">"
         +"</TD></TR>"
           if(mmenu[i].items.length != 0){
              nodeHTML += "<TR><TD class=leafdiv ><div class=leafdiv id=item"+i+" style=/"overflow:auto;display:none;/">"         
          
               for(var q=0; q<mmenu[i].items.length; q++){
                  var link = mmenu[i].items[q].link;
                  var icon = mmenu[i].items[q].subIcon;
                  var hrefid = "leaf"+i+"-"+q;
                  nodeHTML += "<BR><CENTER>"
                       + "<img class=picdiv src="+icon+">"+" "+"<a class=leaf id="+hrefid+" href="+link+" οnfοcus="+"getFocusId()"+">"+mmenu[i].items[q].subCapture+"</a>"+"</CENTER>"
               }
                  nodeHTML += "</div></TD></TR>"
           }else{
        nodeHTML += "<TR><TD class=leafdiv ><div class=leafdiv id=item"+i+" style=/"overflow:auto;display:none;/">"
        nodeHTML += "</div></TD></TR>"
     }
         nodeHTML += "</TBODY></TABLE></DIV>  "
      }
  nodeHTML += "</span>";
  return nodeHTML;
}

/*  
 * 将生成的nodeHTML写入页面
 * @param 
 * @return 
 */

function show() {
   var htmlStr = this.build(mMenu);
   document.write(htmlStr);
}

/*  
 * 子节点显示或隐藏,在节点被点击后触发
 * @param num  节点对应id  
 * @return 
 */

function on_click(num) {
 
  this.whichEl = eval("item"+num);
 
  for(var i=0; i<mMenu.length; i++){
     if (i == num)
      continue;
      var unknown = eval("item"+i);
     if(unknown.style.display == "block"){
        unknown.style.display = "none"; 
       break;
     }
  }
  if (whichEl.style.display == "none"){
     whichEl.style.display = "block";
  }else {
     whichEl.style.display = "none";
  }
}

/*  
 * 设置节点背景图标存放路径
 * @param ip  背景图片路径  
 * @return   
 */
function setImagePath(ip) {
  this.imagePath = ip + "/";
}

/*  
 * 返回子节点背景图片路径
 * @param  
 * @return  imagePath 
 */
function getImagePath() {
  return this.imagePath; 
}

/*  
 * 设置页子节点超连接路径
 * @param ip  超连接路径  
 * @return   
 */
function setIconPath (lp) {
  this.iconPath = lp + "/";
}

/*  
 * 返回页子节点图标路径
 * @param ip  页子节点图标路径  
 * @return   
 */
function getIconPath() {
  return this.iconPath;
}

/*  
 * 设置显示根节点否
 * @param ip  boolean 
 * @return   
 */
function setShowRoot(sr) {
 this.showRoot = sr;
}

//Enter事件
function treeEnter() {
  expandCompressNodeByEnter(focusId);
}

//向上键,焦点指向上一节点
function treeUp() {
 preNode(focusId);
}

//向下键，焦点指向下一个节点
function treeDown() {
 nextNode(focusId);
}

//向右键，焦点指向下一节点
function treeRight() {
 nextNode(focusId);
}

//向左键，焦点指向上一节点
function treeLeft() {
 preNode(focusId);
}

/*  
 * 下一个节点(子节点，叶子节点)
 * @param currentNode 当前节点id 
 * @return   
 */
 function nextNode(nodeid) {
 
 this.currentNode = nodeid;
 this.prex = currentNode.substring(0, 4);
 
 if(prex == "root"){
  var rootid = currentNode.substring(4, currentNode.length);
  var divItem = "item"+rootid;   
  //节点有叶子节点并且为展开，焦点移到叶子节点
 
   if(mMenu[rootid].items.length >=1 && document.getElementById(divItem).style.display =="block"){  
       document.getElementById("leaf"+rootid+"-0").focus();
      }
      else if(document.getElementById(divItem).style.display == "none" && rootid < mMenu.length-1){
       document.getElementById("root"+(parseInt(rootid)+1)).focus(); 
      }else{
       document.getElementById("root0").focus(); 
      }
   }else{
      var index,rootId,leafid;
      index  = currentNode.indexOf("-");
      rootId = currentNode.substring(4,index);
      leafid = currentNode.substring(index+1,currentNode.length);
   
      if(leafid < mMenu[rootId].items.length-1){
        document.getElementById("leaf"+rootId+"-"+(parseInt(leafid)+1)).focus();
      }
      else if(leafid == mMenu[rootId].items.length-1){
      document.getElementById("root"+(parseInt(rootId)+1)).focus();
      }
      else{
      document.getElementById("root0").focus();
    }
  }
 
}

/*  
 * 上一个节点(子节点，叶子节点)
 * @param currentNode 当前节点id 
 * @return   
 */
function preNode(nodeid) {
 
 this.currentNode = nodeid;
 this.prex = currentNode.substring(0,4);

 if(prex == "root"){
  var rootid = currentNode.substring(4,currentNode.length);
  var divItem = "item"+(rootid-1);
  
   if(rootid == 0){
     return;
   }else if(rootid !=0 && document.getElementById(divItem).style.display == "block")
      document.getElementById("leaf"+(rootid-1)+"-"+(mMenu[rootid-1].items.length-1)).focus();
    else
     document.getElementById("root"+(rootid-1)).focus();
 }else{
   var index,rootid,leafid;
      index = currentNode.indexOf("-");
      rootid = currentNode.substring(4,index);
      leafid = currentNode.substring(index+1,currentNode.length);
    if (leafid > 0)
    {
  document.getElementById("leaf"+rootid+"-"+(parseInt(leafid)-1)).focus();
    }else if (leafid == 0)
    {
  document.getElementById("root"+rootid).focus();
    }
      
  }
}

/**
 * 响应回车键事件,若焦点在子节点上，enter键响应打开叶子
 * 若焦点在叶子上，则打开叶子相应的连接
 * @param currentNode  当前节点id 
 * @return   
 */
 
function expandCompressNodeByEnter(nodeId) {
 
 this.nodeid = nodeId;
 this.prex = nodeid.substring(0,4);
 this.id = parseInt(nodeid.substring(4,nodeid.length));
 if(prex == "node"){
  on_click(id);
 }else{
   //do nothing
 }
}

/**
 * 返回树中div的数量
 *  @param
 *  @return   
 */
function divCount() {
   return mMenu.length*2;   
}

/*
 *焦点移到树上，触发该事件
 */
function treeActive() {
 var tree_obj = document.getElementById('node0');
 if (typeof(tree_obj) != 'undefined')
 {
  tree_obj.focus();
 }
 
}

/*
 * 用组合键||快捷键控制焦点在树上的移动
 */

 document.attachEvent('onkeydown', function(e) {
     
   e = e || window.event;
   var key_code = e.which || e.keyCode;
      if(e.altKey && key_code == 82) {
          document.getElementById("root0").focus();
      }
      switch(key_code){
           case (37):
      treeUp();
         break;
          
     case (38):
      treeUp();
         break;
          
     case (39):
      treeDown();
         break;
          
     case (40):
      treeDown();
         break;
       
     default:
      break;
     }
    
    });
/*
 *根据焦点获得控件的id
 */
function getFocusId() {
 focusId = document.activeElement.id;
}