Js 树状菜单

最新推荐文章于 2024-08-02 11:01:26 发布
最新推荐文章于 2024-08-02 11:01:26 发布
阅读量749 收藏
点赞数
分类专栏： 前端（Js Css）相关 文章标签： blog border function basic float div

<html> 
<head> 
    <title>Tree View</title> 
    <meta name="author" content="" /> 
    <style type="text/css"> 
      body{  
        font-size: 9pt;  
      }  
      .treeview-line-cross{  
        font-size:0px;  
        border:solid red 0px;  
        height:16px;  
        width:16px;  
        background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);  
        background-repeat:no-repeat;  
        background-position:0px 0px;  
        float:left;  
      }  
        
      .treeview-line-single{  
        font-size:0px;   
        border:solid red 0px;   
        height:16px;   
        width:16px;   
        background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);   
        background-repeat:no-repeat;   
        background-position:0px -32px;  
        float:left;  
      }  
      .treeview-line-last{  
        font-size:0px;   
        border:solid red 0px;   
        height:8px;   
        width:16px;   
        background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif) left bottom no-repeat;  
        float:left;  
      }  
      .treeview-line-blank{  
        font-size:0px;   
        border:solid red 0px;   
        height:16px;   
        width:16px;  
        float:left;  
      }  
        
    </style> 
</head> 
<body> 
<div id="dest" style="border: solid red 1px; width: 300px; height: 500px;"></div> 
</body> 
<script> 
  function $(id){return document.getElementById(id);}  
  /**  
  * js树形菜单  
  * 作者 sunxing007  
  * 转载请注明来自：http://blog.csdn.net/sunxing007  
  */  
  function TreeView(title, isFolder){  
    this.el = null;  
    this.title = title;  
    this.isFolder = isFolder;  
    this.children = [];  
  }  
    
  TreeView.prototype.printout = function(ident){  
    alert(this.title);  
    if(this.isFolder&&this.children.length>0){  
      for(var i=0; i<this.children.length; i++){  
        this.children[i].printout();  
      }  
    }  
  }  
    
  TreeView.prototype.toHTML = function(leftStr, append){  
    var t = "<div style='height:16px; overflow:hidden;'>";  
    var hasChild = this.isFolder&&this.children.length>0;   
    if(this.isFolder){  
      t += (append + "<img src='https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif' οnclick='doLeafClick(this," + hasChild + ")'/>" + this.title);  
    }  
    else{  
      t += (append + "<img src='https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/file.gif' />" + this.title);  
    }  
    t += "</div>";  
    if(this.isFolder&&this.children.length>0){  
       t += "<div>";  
      for(var i=0; i<this.children.length-1; i++){  
        t += ( leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-single'></div>", "<div class='treeview-line-cross'></div>"));  
      }  
      t += (leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-blank'></div>", "<div class='treeview-line-last'></div>"));  
      t += "</div>";  
    }  
    return t;  
  }  
  var root = new TreeView("C:(SYSTEM)", true);  
  var bea = new TreeView("bea", true);  
  bea.children.push(new TreeView("logs", true));  
  bea.children.push(new TreeView("license.bea", false));  
  root.children.push(bea);  
  var doc = new TreeView("doc", true);  
  var basic = new TreeView("Basic", true);  
  basic.children.push(new TreeView("test.xml", false))  
  doc.children.push(basic);  
  root.children.push(doc);  
  root.children.push(new TreeView("winnt", true));  
  root.children.push(new TreeView("sys.info", false));  
  root.children.push(new TreeView("1.sql", false));  
  //root.printout();  
  $('dest').innerHTML = root.toHTML("","");  
 
  function doLeafClick(e, hasChild){  
    if(hasChild){  
            var c = e.parentNode.nextSibling;  
            if(c.style.display==""){  
                    e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";  
                    c.style.display="none";  
            }  
            else{  
                    e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";  
                    c.style.display="";  
            }  
    }  
    else{  
            if(e.src.indexOf("folder-closed.gif")==-1){  
                    e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";  
            }  
            else{  
                    e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";  
            }  
    }  
  }  
</script> 
</html> 
<html>
<head>
    <title>Tree View</title>
    <meta name="author" content="" />
    <style type="text/css">
      body{
        font-size: 9pt;
      }
      .treeview-line-cross{
        font-size:0px;
        border:solid red 0px;
        height:16px;
        width:16px;
        background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);
        background-repeat:no-repeat;
        background-position:0px 0px;
        float:left;
      }
     
      .treeview-line-single{
        font-size:0px;
        border:solid red 0px;
        height:16px;
        width:16px;
        background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);
        background-repeat:no-repeat;
        background-position:0px -32px;
        float:left;
      }
      .treeview-line-last{
        font-size:0px;
        border:solid red 0px;
        height:8px;
        width:16px;
        background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif) left bottom no-repeat;
        float:left;
      }
      .treeview-line-blank{
        font-size:0px;
        border:solid red 0px;
        height:16px;
        width:16px;
        float:left;
      }
     
    </style>
</head>
<body>
<div id="dest" style="border: solid red 1px; width: 300px; height: 500px;"></div>
</body>
<script>
  function $(id){return document.getElementById(id);}
  /**
  * js树形菜单
  * 作者 sunxing007
  * 转载请注明来自：http://blog.csdn.net/sunxing007
  */
  function TreeView(title, isFolder){
    this.el = null;
    this.title = title;
    this.isFolder = isFolder;
    this.children = [];
  }
 
  TreeView.prototype.printout = function(ident){
    alert(this.title);
    if(this.isFolder&&this.children.length>0){
      for(var i=0; i<this.children.length; i++){
        this.children[i].printout();
      }
    }
  }
 
  TreeView.prototype.toHTML = function(leftStr, append){
    var t = "<div style='height:16px; overflow:hidden;'>";
    var hasChild = this.isFolder&&this.children.length>0;
    if(this.isFolder){
      t += (append + "<img src='https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif' οnclick='doLeafClick(this," + hasChild + ")'/>" + this.title);
    }
    else{
      t += (append + "<img src='https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/file.gif' />" + this.title);
    }
    t += "</div>";
    if(this.isFolder&&this.children.length>0){
       t += "<div>";
      for(var i=0; i<this.children.length-1; i++){
        t += ( leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-single'></div>", "<div class='treeview-line-cross'></div>"));
      }
      t += (leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-blank'></div>", "<div class='treeview-line-last'></div>"));
      t += "</div>";
    }
    return t;
  }
  var root = new TreeView("C:(SYSTEM)", true);
  var bea = new TreeView("bea", true);
  bea.children.push(new TreeView("logs", true));
  bea.children.push(new TreeView("license.bea", false));
  root.children.push(bea);
  var doc = new TreeView("doc", true);
  var basic = new TreeView("Basic", true);
  basic.children.push(new TreeView("test.xml", false))
  doc.children.push(basic);
  root.children.push(doc);
  root.children.push(new TreeView("winnt", true));
  root.children.push(new TreeView("sys.info", false));
  root.children.push(new TreeView("1.sql", false));
  //root.printout();
  $('dest').innerHTML = root.toHTML("","");

  function doLeafClick(e, hasChild){
    if(hasChild){
      var c = e.parentNode.nextSibling;
      if(c.style.display==""){
        e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";
        c.style.display="none";
      }
      else{
        e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";
        c.style.display="";
      }
    }
    else{
      if(e.src.indexOf("folder-closed.gif")==-1){
        e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";
      }
      else{
        e.src="https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";
      }
    }
  }
</script>
</html>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/sunxing007/archive/2009/06/11/4261157.aspx

JerryZhou_
关注
专栏目录
树形菜单
闷骚的男
08-11 491
          新闻测评                   外部             按资讯来源                             rs.open "select * from News_Source",check_conn,1,3          do while not rs.eof or bof%>                              
javascript树形菜单实例(简单的1.1)
点滴生活
08-21 608
[code="java"] 菜单树(我成功完成了) /*处理菜单树的显示样式*/ function makeMenu1(){ /*获取到id为t1的table*/ var table1 = document.getElementById("t1"); /*table1.style.display==""判断table1是否是是...
jquery来制作动态加载树
幸福的使者
03-23 2005
最近更新的后台树节点的加载方式。因为以前用的是jquery-treeview插件。 但是上网查了下资料，发现用它来实现树节点的动态加载还是挺麻烦的。于是我自己写了个动态加载的方式。下面贴代码。 css样式： .treeview li{background: url(static/images/treeview-default-line0.gif) 0 0 no-repeat; marg
JS实现树形菜单
柚稚的博客
07-07 3669
需求 用JS实现树形结构，原本的数据是数组类型，需要先把数据进行处理，然后在页面上渲染DOM，注意点有以下几点： 1、data必须含有id和fatherId来表示他们的层级关系 2、js动态创建DOM的实现方式是先创建一个div，然后把生成的元素appendChild给这个div 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq
js树形菜单 如何用递归制作一个简单的树形菜单
Z_B_L的博客
09-10 636
树形菜单不仅美观、用户使用便捷，且灵活性高、层级关系可视化，对于刚学习js的同志来说是一个非常好的递归函数学习案例。本文演示一个非常简单的树形菜单，不仅简洁，而且样式可塑性高，欢迎萌新前来学习和交流。直到找不到子元素为止，最后将末尾div补全（PS：怕新手不知道，上图的”let item of data“中的item 类似于for循环的变量 i ）。函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将子元素+=进”str“里，就可以实现来回伸缩的样子啦，萌新们赶快去试一逝吧>w
js树状菜单制作
m0_73481765的博客
07-02 427
这段代码为树形菜单的每个li元素添加了一个单击事件监听器。当用户单击它时，它会查找它的子菜单并将其显示或隐藏。它还为菜单项添加了一个“open”类，以便我们可以使用CSS样式控制其外观。使用JavaScript创建一个事件侦听器，以便用户单击菜单项时显示或隐藏其子菜单。首先，在HTML中创建一个带有ul和li标记的基本树形结构。现在，我们已经创建了一个简单的可展开/折叠的树形菜单！添加CSS样式以控制树形菜单的外观和布局。
JavaScript小案例-树形菜单(菜单数据为数组)
qq_44922239的博客
09-20 262
JavaScript小案例：树形菜单效果
JavaScript 树状菜单栏jQuery写法
Cc040909的博客
08-02 324
附带淡入淡出效果哟家人们。
JavaScript递归算法生成树形菜单
10-19
JavaScript递归算法生成树形菜单是一种常见的编程技巧，主要用于处理具有层级关系的数据，例如网站的导航菜单、组织结构等。在本示例中，我们看到如何利用递归方法将一个对象数组转换为HTML的树形结构，从而在网页上...
JS树形菜单文件夹美化样式代码
06-24
"JS树形菜单文件夹美化样式代码"是一个专门针对这一需求开发的JavaScript代码库，用于创建美观且交互性强的文件夹样式菜单。这种菜单尤其适用于网站的文件管理系统、导航菜单或者组织层次分明的数据。 在实现树形...
(推荐)超级漂亮的JS树形菜单
02-01
在标签中，“JS树形菜单”、“JavaScript树形菜单”和“树形菜单”都是对这个技术的关键词描述，强调其基于JavaScript的实现。JavaScript作为客户端脚本语言，使得树形菜单能够在用户的浏览器端动态生成和操作，无需...
javascript制作 树形菜单.zip
03-20
在JavaScript编程中，树形菜单是一种常见的用户界面元素，它以层级结构展示数据，通常用于网站导航、文件系统浏览或数据库记录的展示。本压缩包包含两个文件："可以拖动的IEtree树型.htm" 和 "树型结构_lj不错.htm"...
js 树形菜单
04-15
总结来说，"js树形菜单"是利用JavaScript编程实现的一种交互式的多级导航工具，而"DHTMLX Tree"是一个强大的库，为开发者提供了创建和管理树形菜单的便捷工具。通过理解和掌握这些知识，可以有效地构建高效、易用的...
JS 案例 树形菜单
suiferq的博客
05-14 1639
制作树形菜单 需求说明 使用项目列表制作一个完整的树形菜单，可通过单击一级菜单来显示和隐藏二级菜单，完成效果如图所示： 使用带参数的函数，通过参数来控制显示或隐藏某个列表。 HTML代码片： <div class="menu"> <ul id="menu"> <li class="menuList"> 职能部门 <ul> <li>学工部</li> <li>后勤&l
JavaScript实现树状菜单(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 299
JavaScript实现树状菜单(附完整源码)
关于组织参加“第八届‘泰迪杯’数据挖掘挑战赛”的通知-4页
最新发布
11-03
关于组织参加“第八届‘泰迪杯’数据挖掘挑战赛”的通知-4页
11个强大且实用的JavaScript树形菜单控件
Javascript 树形菜单 Javascript 树形菜单是一种常用的用户界面控件，能够清晰地呈现菜单项之间的从属关系。树形菜单的结构清晰明了，易于用户理解和操作。在 Web 开发中，Javascript 树形菜单是非常常用的控件，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值