使用dtree构建框架导航

前言：

该例子就是个框架导航，左边包含dtree的框架，点击上面的节点右边框架显示

说明步骤：

1. 首先获得dtree http://www.destroydrop.com/javascripts/tree/

2. 使用dtree

2.1 导入dtree.css dtree.js

 <link rel="StyleSheet" href="dtree.css" type="text/css"/>

 <script type="text/JavaScript" src="dtree.js"></script>

3. 关键代码

3.1 大的框架代码：

<frameset rows="20%,60%,20%">

    <frame src="/hr/SystemManager/top.html">

    <frameset cols="20%,80%">

       <frame src="/hr/SystemManager/left.html" name="leftFrame" >

       <frame src="/hr/SystemManager/right.html"  name="rightFrame" >

    </frameset>

    <frame src="/hr/SystemManager/foot.html">

 </frameset>

3.1 dtree的代码

<script type="text/javascript">

        d = new dTree('d');

        d.add(0,-1,'My example tree');

        d.add(1,0,'Node 1','top.html');

        d.add(2,0,'Node 2','top.html');

        d.add(3,1,'Node 1.1','example01.html');

        d.add(4,0,'Node 3','example01.html');

        //d.add(5,3,'Node 1.1.1','top.html','top','  ','img/imgfloder.gif');

        d.add(5,4,'1','/hr/failure.jsp','','parent.rightFrame');   //在mainFrame框架内显

        d.add(5,3,'点击我','javascript:junploaction()',"",'');

        document.write(d);

</script>

<script>

     function junploaction()

     {

        parent.rightFrame.location="left.html";

     }

</script>

更详细的请看dtree.zip中的资料希望对大家有所有小帮助

图片演示：

点击之后的图片

dtree 递归思考：

dTree.prototype.selectCheckbox=function(nodeId){

  var flag = 0;

  var temp ;

  var cs = document.getElementById("c"+this.obj+nodeId).checked;

  var node = this.aNodes[nodeId];

  var len =this.aNodes.length;

  var same = [];

  for (n=0; n<len; n++) {

	if(node.pid==this.aNodes[n].pid){

		same[same.length] = n;

	}

   if ((this.aNodes[n].pid == node.id)) {

        document.getElementById("c"+this.obj+n).checked=cs;

	flag = 1;

	this.selectCheckbox(n);

   }

  }

  if(flag==0){

    temp = n;

	//查找同级节点

	//alert(same);

	for(j=0;j<same.length;j++){

		document.getElementById("c"+this.obj+(same[j])).checked=true;

	}

    //alert("终止"+this.aNodes[nodeId].name);

  }

巴特西

使用dtree构建框架导航

最新文章

热门文章