使用dtree制作一个简单的网站导航（后台管理）

效果展示（轻喷）

dtree简介

涉及技术

目录结构

效果展示（轻喷）

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制作一个简单的网站导航（后台管理）的更多相关文章

【URLOS应用开发基础】10分钟制作一个nginx静态网站环境应用
URLOS开发者功能已上线有一段时间了,目前通过部分开发者的使用体验来看,不得不说URLOS在服务器软件开发效率方面确实有着得天独厚的优势,凭借docker容器技术与其良好的应用生态环境,URLOS必 ...
实例学习SSIS（一）--制作一个简单的ETL包
原文:实例学习SSIS(一)--制作一个简单的ETL包导读: 实例学习SSIS(一)--制作一个简单的ETL包实例学习SSIS(二)--使用迭代实例学习SSIS(三)--使用包配置实例学习SS ...
TensorFlow练习13: 制作一个简单的聊天机器人
现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...
手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例
前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...
如何使用AEditor制作一个简单的H5交互页demo
转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...
制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1. 对指定文件夹下所有JPG文件进行预览2. 对选定图片进行旋转3. 对选定图片 ...
自己制作一个简单的操作系统二[CherryOS]
自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作一. 一点说明这个操作系统只是第一步, 仅仅是开机显示 ...
利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-HttpClient
上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块.启动应用后,初始界面应该是这样的: 用户管理模块(users ...
实现一个简单的侧边导航Winform程序框架
目录简介实现导航面板实现方法使用方法实现标题栏窗体拖拽及最大化自定义窗体按钮标题显示按钮设置实现状态栏整体使用参考文章简介每次新项目都要想着界面怎么设计好,但想来想去上位机 ...

随机推荐

十四. Redis 新功能
十四. Redis 新功能 @ 目录十四. Redis 新功能 1. ACL 2. IO多线程 3. 工具支持 Cluster 4. 其它新功能-介绍 5. 最后: 1. ACL ACL 参考官网: ...
2025年，Fantastic-admin 这款后台框架将继续引领潮流
前言大言不惭的取了这个标题,但作为开发了 4 年多的 Fantastic-admin 的作者,回顾这一路走来,从一开始被指责抄袭,到现在拥有数百名付费用户和几十家付费企业.我认为我的开发理念应该是得 ...
Anoii网络库之Timer实现
Timer的实现挺值得拿出来聊一聊的 Anoii网络库的事件循环: Timer是使用poll的timeout参数实现的,所以定时的精度是毫秒,对于一个网络库而言这足够了.如果不够的话,还可以使用tim ...
spring - [01] 简介
Spring发展至今,已经形成了一个生态体系(Spring全家桶) 001 || Spring 定义 Spring是一款主流的Java EE轻量级开源框架,目的是用于简化Java企业级应用的开发难 ...
【moectf】wp
http 用wsrx打开靶机根据任务描述得到moectf{basic_http_knowledge_oen0w64iYZqSeT6BT8c9OgFTV-KNMT6g} Web入门指北打开pdf文 ...
go krotos proto编译引用外部包 was not found or had errors
前言 kratos protos 生成 pb.go 文件时,会出现引用其他 proto 文件报错 was not found or had errors,因找不到此文件而无法编译. 解决首先我们先了 ...
Django实战项目-学习任务系统-用户登录
第一步:先创建一个Django应用程序框架代码 1,先创建一个Django项目 django-admin startproject mysite 将创建一个目录,其布局如下: mysite/ mana ...
实现领域驱动设计 - 使用ABP框架 - 领域逻辑 & 应用逻辑
领域逻辑 & 应用逻辑如前所述,领域驱动设计中的业务逻辑分为两部分(层):领域逻辑和应用逻辑: 领域逻辑由系统的核心领域规则组成,应用逻辑实现应用特定的用例虽然定义很明确,但实现起来可能并 ...
HTML5 给网站添加图标
1.首先将图标上传到对应的目录下 2.在网页的index.html,添加已下代码到<head>标签里 <link rel="icon" href="i_ ...
JDK7-时间类、时间格式化类--java进阶day07
1.Date类:表示时间的类 1.Date常用的构造方法 . 2.Date常用的成员方法 1.getTime:返回从时间原点到对象设定的时间之间的时间 2.setTime:将对象的时间设置为setTi ...

使用dtree制作一个简单的网站导航（后台管理）

效果展示（轻喷）

dtree简介

涉及技术

目录结构

各个文件详情

index.html

top.html

left.html

main.html

cpright.html

dtree下载地址

GitHub地址

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

随机推荐

热门专题