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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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判断远程url是否有效的几种方法小结
2011/10/08 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
JS+CSS实现动态时钟
2021/02/19 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python 安装impala包步骤
2020/03/28 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
工程总经理工作职责
2013/12/09 职场文书
内业资料员岗位职责
2014/01/04 职场文书
大学军训感言200字
2014/02/26 职场文书
高三学生评语大全
2014/04/25 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
英文感谢信格式
2015/01/21 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
Python自动化实战之接口请求的实现
2022/05/30 Python