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中的location用法简单介绍
Mar 07 Javascript
filemanage功能中用到的common.js
Apr 08 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
浅谈document.write()输出样式
May 07 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
小程序登录态管理的方法示例
Nov 13 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
js验证表单大全
2006/11/25 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
python交互式图形编程实例(三)
2017/11/17 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
组织生活会发言材料
2014/12/15 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL