js 树菜单

pcajax

浏览: 2173945 次
性别:
来自: 上海

最近访客更多访客>>

morelily

zcm1205

知丿觉

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS Mootools Dojo EXT Ajax

<!doctype html>
<title>树 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="树 by 司徒正美" />
<meta name="description" content="树 by 司徒正美" />
<h2>树 by 司徒正美</h2>
<script type="text/javascript">
Tree = function(){
    this.path = "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/o_";
    this.name = "tree";
    this.id = + new Date + parseInt(Math.random()*100000);
    this.initialize.apply(this, arguments);
}
Tree.prototype = {
    constructor : Tree,
    initialize : function(config){
      var me = this, renderTo = config.renderTo;
      me.tree = config.data;
      me.container = ((typeof renderTo === "string") ?
        document.getElementById(renderTo) : renderTo) || document.body;
      me.panel = document.createElement("div");
      me.panel.setAttribute("id","tree" + me.id)
      me.container.insertBefore(me.panel,null);
      var id = "#"+me.panel.id;

      //添加根节点
      var icon = me.makeImage("nolines_plus","collapse root")
      var checkbox0 = me.makeImage("checkbox_0","checkbox_0");
      me.panel.innerHTML = me.makeTree(me.tree[0][0],"b",0,icon+checkbox0, me.tree[0][2]);
      me.childs = [];
      me.checks = [];//由来装载点击数
      me.panel.onclick = function(e){
        e = e || window.event;
        var node = e.srcElement ? e.srcElement : e.target;
        var current = node.parentNode;
        var currentIndex = current.getAttribute("index");
        var currentPrefix = current.getAttribute("prefix");
        var currentLevel = current.getAttribute("level");
        var subtree = me.getSubtree(currentIndex);
        var children = current.children[3];
        //添加子树集合
        //存在子树并且没有添加时才添加
        if(subtree && !children){
          children = document.createElement("div");
          var childs = [];
          for(var i=0,length = subtree.length;i<length;i++){
            var isLimb = me.hasSubtree(subtree[i][0]);
            var isLast = (i == subtree.length - 1);
            var prefix = isLast ? "blank" : "line";
            icon = isLast ? "plusbottom" : "plus";
            if(isLimb){
              icon = me.makeImage(icon,"collapse limb");//枝节点前面的装饰图标
            }else{
              icon = icon.replace(/plus/, "join");//叶子节点前面的连线图标
              icon = me.makeImage(icon,"leaf");//叶子节点前面的装饰图标
            }
            childs.push(subtree[i][0])
            children.innerHTML += me.makeTree(subtree[i][0],prefix,+currentLevel+1,icon+checkbox0,subtree[i][2])
          }
          me.childs[currentIndex] = childs;
          children.className = (currentPrefix == "line") ? "line": "blank";
          current.insertBefore(children,null);
        }

        if(/collapse/.test(node.className)){//如果点击是加号或减号图标
          node.src = node.src.replace(/plus/,"minus");//改变连线图标
          node.className = node.className.replace("collapse","unfold");//改变装饰图标
          children &&(children.style.display = "block");
        }else if(/unfold/.test(node.className)){
          node.src = node.src.replace(/minus/,"plus");//改变连线图标
          node.className = node.className.replace("unfold","collapse");//改变装饰图标
          children &&(children.style.display = "none");
        }

        if(/checkbox/.test(node.className)){//如果单击的是checkbox图标
          var checked = me.isChecked(node);//如果是true则--，如果是false则++
          me.setPriorCheckbox(current,checked);//一开始肯定是checkbox，返回false
          me.setJuniorCheckbox(current,checked)
        }
      }
    },
    setJuniorCheckbox : function(node,/*Boolean*/checked){
      var checkbox = node.children[1];
      var replaceCheckbox = checked ? "checkbox_0" :"checkbox_1";
      checkbox.src = checkbox.src.replace(/checkbox_\d/,replaceCheckbox);
      checkbox.className = replaceCheckbox;
      var index = node.getAttribute("index");
      if(!!this.childs[index]){
        var length = this.childs[index].length;
        this.checks[index] = checked ? length : 0;
        if(length > 0){
          var children = node.children[3].children;
          while(--length >= 0){
            this.setJuniorCheckbox(children[length],checked)
          }
        }
      }
    },
    setPriorCheckbox :function(node,/*Boolean*/checked){//设置上一级树的checkbox
      var index = node.getAttribute("index");
      var prior = node.parentNode.parentNode;
      var priorIndex = this.tree[index][1];
      var priorCheckbox = prior.children[1];
      var priorLevel = prior.getAttribute("level");
      var priorCount = this.checks[priorIndex] || 0;
      checked ? priorCount-- : priorCount++;
      (priorCount < 0) && (priorCount = 0)
      this.checks[priorIndex] = priorCount;
      if(!!priorCheckbox){
        //当priorIndex等于-1时,
        //priorCheckbox不存在
        //me.childs[priorIndex]为undefined，不存在长度
        checked = (priorCount == this.childs[priorIndex].length);
        var replaceCheckbox = checked ? "checkbox_1" : "checkbox_2";
        //checkbox_1为全选，checkbox_2为非全选
        //全选，则让上级++，即让checked为false
        priorCheckbox.src = priorCheckbox.src.replace(/checkbox_\d/,replaceCheckbox);//????????
        priorCheckbox.className = replaceCheckbox;
      }
      if(priorLevel > 0){ //根节点没有priorCheckbox，且priorLevel等于-1
        this.setPriorCheckbox(prior,checked);
      }
    },
    isChecked : function(node){//如果是checkbox_0返回false，checkbox_1与checkbox_2返回true
      return node.src.slice(-5,-4) > 0;
    },
    makeImage : function(image){
      var status ="";
      if(arguments[1] != null){
        status = "class='" + arguments[1] +"'";
      }
      return "<img src='"+this.path+image+".gif' "+status+" />"
    },

    makeTree : function(index,prefix,level,images,text){
      var builder = [];
      builder.push("<div index='");
      builder.push(index);
      builder.push("' prefix='")
      builder.push(prefix);
      builder.push("' level='")
      builder.push(level);
      builder.push("'>");
      builder.push(images);
      builder.push("<span>");
      builder.push(text);
      builder.push("</span></div>")
      return builder.join('');
    },
    hasSubtree : function (p){
      var tree = this.tree;
      for(var i = 0,length = tree.length;i < length; i++){
        if(this.tree[i][1] == p){
          return true;
        };
      };
      return false;
    },
    getSubtree : function (p){
      var subtree = [],tree = this.tree;
      for(var i = 0,length = tree.length;i < length; i++){
        if(tree[i][1] == p){
          subtree.push(tree[i]);
        };
      };
      return subtree
    }
}

var data = [
    [0,-1,"前台技术"],
    [1,0,"表现层"],
    [2,1,"CSS"],
    [3,2,"CSS资源"],
    [4,2,"CSS3前瞻"],
    [5,1,"web标准知识"],
    [6,1,"图形"],
    [7,6,"SVG"],
    [8,6,"VML"],
    [9,6,"canvas"],
    [10,0,"结构层"],
    [11,10,"HTML"],
    [12,10,"微格式"],
    [13,10,"XML"],
    [14,13,"XPath"],
    [15,0,"行为层"],
    [16,15,"core"],
    [17,16,"变量与参数"],
    [18,16,"对象与继承"],
    [19,16,"函数与闭包"],
    [20,16,"算法"],
    [21,16,"高级技术"],
    [22,21,"跨域请求"],
    [23,21,"提速技术"],
    [24,21,"本地存储"],
    [25,21,"函数劫持"],
    [26,16,"框架设计"],
    [27,26,"Ext"],
    [28,26,"dojo"],
    [29,26,"mootools"],
    [30,15,"Ajax"],
    [31,15,"DOM"],
    [32,15,"BOM"]
]

window.onload = function(){
var tree = new Tree({renderTo:"test",data:data});
}

</script>
<div id="test"></div>

分享到：

拒绝买房的八大理由 | 笔记本驱动的安装事项［acer］

2009-10-27 09:30
浏览 1069
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 树菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 树菜单

评论

发表评论

相关推荐

最近访客更多访客>>