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 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
浅谈Vue.set实际上是什么
Oct 17 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
jQuery中last()方法用法实例
2015/01/06 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
用python解压分析jar包实例
2020/01/16 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书