目录

效果展示（轻喷）

dtree简介

涉及技术

目录结构

各个文件详情

index.html

top.html

left.html

main.html

cpright.html

dtree下载地址

GitHub地址

效果展示（轻喷）

dtree简介

dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。（百度百科）

涉及技术

html、js、css

eclipse创建项目

目录结构

各个文件详情

index.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>我的网站</title>

</head>

<frameset rows="5%,90%,*">

    <frame src="top.html">

    <frameset cols="12%,*">

    	<frame src="left.html">

    	<frame src="main.html" name="main">

    </frameset>

    <frame src="cpright.html">

</frameset>

</html>

top.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

	<div align="center" ><font size="3" color="green">我的网址</font></div>

</body>

</html>

left.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>菜单</title>

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

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

</head>

<body>

<div class="dtree">

	<a href="javascript: d.openAll();">展开所有</a> | <a href="javascript: d.closeAll();">关闭所有</a>

	<script type="text/javascript">

	/*

		1、本id

		2、父节点id

		3、节点名字

		4、要跳转的地方

		5、提示信息

		6、要改变的页面的name

	*/

		d = new dTree('d');

		d.add(0,-1,'网站导航');

		d.add(01,0,'搜索','');

		d.add(0101,01,'国内','');

		d.add(010101,0101,'百度','http://www.baidu.com','百度一下','main');

		d.add(010102,0101,'搜狗','https://www.sogou.com/','','main');

		d.add(010103,0101,'必应','https://cn.bing.com/','','main');

		d.add(010104,0101,'360','https://www.so.com/','','main');

		d.add(010105,0101,'库问搜索','http://www.koovin.com/','','main');

		d.add(0102,01,'国外','');

		d.add(010201,0102,'百度','http://www.baidu.com','','main');

		d.add(02,0,'直播','');

		d.add(0201,02,'虎牙直播','http://www.huya.com/','','main');

		d.add(0202,02,'斗鱼直播','https://www.douyu.com/','','main');

		d.add(03,0,'博客','');

		d.add(0301,03,'CSDN','https://www.csdn.net/','','main');

		d.add(0302,03,'博客园','https://www.oschina.net/blog','','main');

		d.add(0303,03,'开源中国','https://www.oschina.net/blog','','main');

		document.write(d);

		/*

		d = new dTree('d');

		d.add(0,-1,'网站导航');

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

		d.add(2,0,'Node 2','http://www.caoliu.com');

		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','example01.html');

		d.add(6,5,'Node 1.1.1.1','example01.html');

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

		d.add(8,1,'Node 1.2','example01.html');

		d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','/tree/img/tree/imgfolder.gif');

		d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');

		d.add(11,9,'Mom\'s birthday','example01.html');

		d.add(12,0,'Recycle Bin','example01.html','','','/tree/img/tree/trash.gif');

		document.write(d); */

	</script>

</div>

</body>

</html>

main.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

</body>

</html>

cpright.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

</body>

</html>

dtree下载地址

http://www.destroydrop.com/javascripts/tree/

GitHub地址

https://github.com/Zhu-junwei/tree.git

使用dtree制作一个简单的网站导航（后台管理）的更多相关文章

  1. 【URLOS应用开发基础】10分钟制作一个nginx静态网站环境应用

    URLOS开发者功能已上线有一段时间了,目前通过部分开发者的使用体验来看,不得不说URLOS在服务器软件开发效率方面确实有着得天独厚的优势,凭借docker容器技术与其良好的应用生态环境,URLOS必 ...

  2. 实例学习SSIS（一）--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  3. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  4. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  5. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

  6. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  7. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

  8. 自己制作一个简单的操作系统二[CherryOS]

    自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...

  9. 利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-HttpClient

    上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块.启动应用后,初始界面应该是这样的: 用户管理模块(users ...

  10. 实现一个简单的侧边导航Winform程序框架

    目录 简介 实现导航面板 实现方法 使用方法 实现标题栏 窗体拖拽及最大化 自定义窗体按钮 标题显示 按钮设置 实现状态栏 整体使用 参考文章 简介 每次新项目都要想着界面怎么设计好,但想来想去上位机 ...

随机推荐

  1. kubernets学习笔记一

    了解kubernets Docker作为单一的容器技术工具并不能很好地定义容器的"组织方式"和"管理规范",难以独立地支撑起生产级大规模容器化部署的要求..因此 ...

  2. brew切换数据源为阿里源

    # 查看 brew.git 当前源 $ cd "$(brew --repo)" && git remote -v origin https://github.com ...

  3. .Net 6 配置日志

    前言   .Net 6 与之前的配置有点不一样了记录下日志配置方式. 当前日志以Serilog为例,.Net 6 的日志由内置的Logger获取,然后可以交给Serilog|NLog等框架处理, 框架 ...

  4. JUC并发—9.并发安全集合二

    大纲 1.并发安全的数组列表CopyOnWriteArrayList 2.并发安全的链表队列ConcurrentLinkedQueue 3.并发编程中的阻塞队列概述 4.JUC的各种阻塞队列介绍 5. ...

  5. OpenLayers 4326地图 根据距离设置地图分辨率

    问题:给一个距离,如何确定4326地图缩放等级或者分辨率使地图视口范围为这个距离 我本来打算计算从地图视口左上角到右下角的距离来计算地图缩放的,然后发现不好算,我也不会算,于是就计算水平方向距离的缩放 ...

  6. CPrimerPlus

    还没学 的 167页的wordcnt程序 199页的checking程序(太长了,不想看) 113页的第八章编程练习5(不想看) 125页的复习题9(有问题,有时间再来验证) 119页重定向和文件(n ...

  7. 【由技及道】在wsl容器中进行远程java开发【人工智障AI2077的开发日志003】

    指令接收:「需要万能开发环境」 系统警报:检测到主人即将陷入"环境配置地狱" 启动救赎协议:构建量子化开发容器 终极目标:让"在我机器上能跑"成为历史文物 需求 ...

  8. 【ABAQUS&Composite】composite layerup Manager从txt导入铺层信息

    ABAQUS 在复合材料建模方面自由度是比较高的.官方提供了两个工具: ABAQUS/CAE中的Composite Layup Manager ABAQUS/CAE的plugin:Composites ...

  9. nginx 根据 URL 参数引入不同的文件

    同步发布:https://blog.jijian.link/2020-06-30/nginx-import-file/ 编程世界中各种奇奇怪怪的需求都有,本次遇到一个需求:根据URL参数判断,包含 x ...

  10. go 定时任务库 cron

    简介 在Linux中,Cron是计划任务管理系统,通过crontab命令使任务在约定的时间执行已经计划好的工作,例如定时备份系统数据.周期性清理缓存.定时重启服务等. 本文介绍的cron库是一个用于管 ...