使用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程序框架
目录 简介 实现导航面板 实现方法 使用方法 实现标题栏 窗体拖拽及最大化 自定义窗体按钮 标题显示 按钮设置 实现状态栏 整体使用 参考文章 简介 每次新项目都要想着界面怎么设计好,但想来想去上位机 ...
随机推荐
- Zabbix Proxy安装及替换Zabbix阿里云源脚本
zabbix proxy安装步骤 说明: Zabbix Proxy使用的是独立的数据库实例,如果放在一起数据容易遭到破坏;Proxy仅仅是一个数据采集的作用,其他的依然是依靠Server端实现,这就会 ...
- RMAN备份时遇到ORA-48132 &ORA-48170且备份变慢案例
现象描述: 环境: 操作系统:Red Hat Enterprise Linux release 8.10 数据库版本: Oracle 19.24.0.0.0 企业版 备份作业在执行RMAN备份时,告警 ...
- 浅说 c++20 cppcoro (三）
浅说 c++20 cppcoro (三),https://www.cnblogs.com/bbqzsl/p/18679860 接着上一篇浅说 c++20 coroutine (二) ,继续没说完的事. ...
- 越“挖”越有料，天翼云“息壤”助攻DeepSeek变身万能搭子！
还在为DeepSeek服务器繁忙而抓狂? 还在为API调用费用涨价而头疼? 还在为数据安全而担忧? 别急! 天翼云"息壤"算力互联调度平台出马 全面解锁DeepSeek新玩法 带你 ...
- 支付宝云Serveless+豆包AI实现AI日语学习APP
1. 引言 最近学日语,发现动词.形容词的变形规则又多又复杂,在不同语境里变化也不一样,句子结构和语法也很麻烦.为了提高学习效率,决定开发基于AI的日语学习APP,借助 AI 进行辅助学习,目前已经完 ...
- 天线增益是什么意思？DBI越大越好吗？
作者: 技象物联网/ 行业百科 / 无线通信, 通信系统 / 2023年6月23日 11:58:21 天线增益是指天线在某个方向上相对于一个理想点源天线所辐射的功率密度的增益.换句话说,天线增益是天线 ...
- vue - [03] Hello World~
题记部分 (1)选择一个合适的目录,然后进入终端,执行:vue create account-manager (2)切换目录到account-manager,执行npm run serve启动开发服务 ...
- 启动本地node服务器报错： Access denied for user ‘root‘@‘localhost‘ (using password: YES)
背景:今天启动node服务时直接报错,顿时一激灵,之前(几个月前哈哈)明明好好的.主要问题就是在连接数据库上,我登上mysql瞅瞅有没有问题,当要输入密码时,emmm, 很好, 忘记root密码了,于 ...
- 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
效果 来具体介绍之前先来看看效果. 使用C#构建了一个简单的MCP客户端,以下为运行这个简单客户端的截图,同样可以在Cline等其它的一些MCP客户端中玩耍. 创建一个数据库表: 获取数据库中的所有表 ...
- Golang 入门 : 文件名、关键字与标识符
Go 的源文件以 .go 为后缀名存储在计算机中,这些文件名均由小写字母组成,如 scanner.go .如果文件名由多个部分组成,则使用下划线 _ 对它们进行分隔,如 scanner_test.go ...