JavaScript实现的经典文件树菜单效果


Posted in Javascript onSeptember 08, 2015

本文实例讲述了JavaScript实现的经典文件树菜单效果。分享给大家供大家参考。具体如下:

这是一款简单的JavaScript文件树菜单,经典的树形菜单,特别是文件夹的样式比较经典,折叠和展开也很流畅自然,不过本款菜单有一个缺点,就是菜单的数据写在JS的数组里,这样一来多多少少对菜单内容的修改造成一定麻烦。

先来看看运行效果截图:

JavaScript实现的经典文件树菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单的文件树效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.tree{width:200px;border:2px inset #fff;height:400px;padding:5px;overflow:auto;}
.tree dd,.tree dt, .tree dl{margin:0;padding:0;overflow:hidden;}
.tree dd{margin-left:18px;}
.tree dt{background:url(images/tree-bg.png) no-repeat 0 0px;padding-left:35px;line-height :20px;height:20px;}
.tree dt.node-close{background-position: 0 -24px;}
.tree dt.node-open{background-position: 0 -58px;}
.tree dt a{color:#000;text-decoration:none;font: 12px/1 verdana;line-height :12px;_line-height :16px;}
.tree dt a:hover{background:#0A246A;color:#fff;}
</style>
</head>
<body>
<div id="esunTree" class="tree"></div>
</body>
<script type="text/javascript">
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
function Tree(data, el) {
 this.app=function(par,tag){return par.appendChild(document.createElement(tag))};
 this.create(document.getElementById(el),data)
};
Tree.fn = Tree.prototype = {
 create: function (par,group){
  var host=this, length = group.length;
  for (var i = 0; i < length; i++) {
   var dl =this.app(par,'DL'), dt = this.app(dl,'DT'), dd = this.app(dl,'DD');
   dt.innerHTML='<a href="javascript:void(0)">'+group[i]['t']+'</a>';
   if (!group[i]['s'])continue;
   dt.group=group[i]['s'];
   dt.className+=" node-close";
   dt.onclick=function (){
    var dd= this.nextSibling;
    if (!dd.hasChildNodes()){
      host.create(dd,this.group);
      this.className='node-open'
     }else{
     var set=dd.style.display=='none'?['','node-open']:['none','node-close'];
      dd.style.display=set[0];
      this.className=set[1]
     }
   }
  }
 }
};
var data=[{
  t:'腾讯网络限公司',s:[
   {t:'人力资源',s:[{t:'张A'}]},
   {t:'风险控制',s:[{t:'李B'},{t:'赵C'},{t:'吴D'},{t:'司马E'},{t:'潭F'},{t:'袁G'}]},
   {t:'系统平台',s:[{t:'资讯组',s:[{t:'王五'}]},{t:'游戏组',s:[{t:'肖十三'}]}]}
  ]
 },
 {t:'拍拍网',s:[{t:'胡一刀'}]},
 {t:'盛大网络',s:[{t:'热血传奇',s:[{t:'在线充值'}]},{t:'陈天桥'}]},
 {t:'新浪微博',s:[{t:'凤姐'}]}
];
var et=new Tree(data,'esunTree');
 //]]>
</script>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
JS链式调用的实现方法
Mar 07 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 #Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 #Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 #Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 #Javascript
js图片轮播特效代码分享
Sep 07 #Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 #Javascript
You might like
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
股权投资意向书
2014/04/01 职场文书
初中班主任评语
2014/04/24 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
国家助学金感谢信
2015/01/21 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS