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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
Sea.JS知识总结
May 05 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
js实现登录时记住密码的方法分析
Apr 05 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
文章推荐系统(二)
2006/10/09 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
Python实现统计代码行的方法分析
2017/07/12 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python实现猜数游戏
2020/03/27 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
经济信息管理专业大学生求职信
2013/09/27 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server