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 相关文章推荐
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
js数组去重的方法汇总
Jul 29 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
apache php模块整合操作指南
2012/11/16 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
layui原生表单验证的实例
2019/09/09 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
简单谈谈Python流程控制语句
2016/12/04 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
使用python画社交网络图实例代码
2019/07/10 Python
python图形用户接口实例详解
2019/12/16 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
应届生体育教师自荐信
2013/10/03 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
整改落实自查报告
2014/11/05 职场文书
入党函调证明材料
2014/12/24 职场文书
初中班干部工作总结
2015/08/10 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
详解Java实践之适配器模式
2021/06/18 Java/Android
服务器间如何实现文件共享
2022/05/20 Servers