前言:

该例子就是个框架导航 , 左边包含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构建框架导航的更多相关文章

  1. 前端开发教程:使用 CSS3 Transforms 构建圆形导航

    在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航.教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式.不过不用担心,这里用到的数学知识真的是很简单的.教程使用 ...

  2. 打造个人IP: 开源项目网站构建框架

    前言 您是否正在寻找有关如何创建博客网站: 个人博客 或者 开源项目官网 : Dubbo, Vue.js的构建框架? 在这篇文章我将向您展示如何创建一个美观并且实用的开源博客/开源项目官网构建框架!近 ...

  3. HTML 框架导航

    初次学习HTML,在www.w3school.com.cn看到了框架导航,上面的例子没有看懂所以搜了一下相应的问题,最后弄懂了怎么实现同一界面下的框架导航. 首先是www.w3school.com.c ...

  4. bootstrap框架 导航条组件使用

    本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...

  5. vue集成CKEditor构建框架的使用,遇到富文本框不出现工具栏等操作

    官方关于Vue集成CKEditor富文本框的文档:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/framew ...

  6. Slim - 超轻量级PHP Restful API构建框架

    下载源码包: http://www.slimframework.com/ 基于Slim的Restful API Sample: <?php require '/darjuan/Slim/Slim ...

  7. C代码快速构建框架

    #include "stdio.h" typedef char int8_t; typedef short int16_t; typedef int int32_t; typede ...

  8. 构建自己的Java并发模型框架

    Java的多线程特性为构建高性能的应用提供了极大的方便,可是也带来了不少的麻烦.线程间同步.数据一致性等烦琐的问题须要细心的考虑,一不小心就会出现一些微妙的,难以调试的错误. 另外.应用逻辑和线程逻辑 ...

  9. 构建Java并发模型框架

    Java的多线程特性为构建高性能的应用提供了极大的方便,但是也带来了不少的麻烦.线程间同步.数据一致性等烦琐的问题需要细心的考虑,一不小心就会出现一些微妙的,难以调试的错误.另外,应用逻辑和线程逻辑纠 ...

随机推荐

  1. cmake 中的 compile_commands.json 文件

    cmake 是支持多种编译方式的工具,产生多种编译工具可以使用的编译文件,例如常用的gdb. 但是对于clang 编译工具,还需要一个compile_commands.json 这个文件是由cmake ...

  2. 跟踪LinkedList源码,通过分析双向链表实现原理,自定义一个双向链表

    1.LinkedList实现的基本原理 LinkedList是一个双向链表,它主要有两个表示头尾节点的成员变量first  .last,因其有头尾两个节点,所以从头或从尾操作数据都非常容易快捷.Lin ...

  3. ubuntu下安装ant

    背景介绍 最近终于正式开始填补一下自己在web方面的知识漏洞. 而ant则是必不可少的东西了,要问ant的作用是什么,简单的说,这个软件可以用最简单的方法将你的web应用程序部署到服务器上,是不是很强 ...

  4. h5-背景样式

    <style> div{ width: 100%; height: 150px; border: 1px solid red; /*overflow: scroll;*/ /*1.添加背景 ...

  5. java求两个圆相交坐标

    最近由于项目需要,根据两个圆函数求出相交的坐标.实现代码如下,另感谢两圆求交点算法实现Java代码,虽然他所贡献的代码中存在问题,但仍有借鉴意义. 1.两个圆相交的数学求法 在中学数学中我们知道,一个 ...

  6. 理解自动梯度计算autograd

    理解自动求导 例子 def f(x): a = x * x b = x * a c = a + b return c 基于图理解 代码实现 def df(x): # forward pass a = ...

  7. 通过编写c语言程序,运行时实现打印另一个程序的源代码和行号

    2017年6月1日程序编写说明: 1.实现行号的打印,实现代码的读取和输出,理解主函数中的参数含义. 2.对fgets函数理解不够 3.对return(1); return 0的含义理解不够 4.未实 ...

  8. [原]排错实战——解决Tekla通过.tsep安装插件失败的问题

    原总结调试排错troubleshootteklaprocess monitorsysinternals 缘起 最近同事使用.tsep安装Tekla插件的时候,Tekla提示该插件已经存在了,需要卸载后 ...

  9. 关于Vue.js的认识(第一部分)[转载]

    一.关于v-bind 1.初识v-bind (1).加冒号的是 vue 的 v-bind 语法糖(指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用),绑定vue的一个 ...

  10. myeclipse跟tomcat的同步

    一般来说,我们在myeclipse里把文件内容改了并保存之后,直接刷新网页就可以非常直观的看到内容的改变. 这是因为myeclipse检测到文件内容的变动,及时地把新的文件部署到了tomcat上. m ...