JS树型菜单

最新推荐文章于 2024-01-14 07:45:00 发布
最新推荐文章于 2024-01-14 07:45:00 发布
阅读量5.2k 收藏
点赞数
分类专栏： JS 文章标签： class border function stylesheet javascript 产品
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/to_cm/article/details/4138046
版权

JS文件

------------------------------------- 

var isIE = true;
var imgUp = "images/arrowUp.gif" ;
var imgDn = "images/arrowDn.gif" ;
function expandIt( head, fExpandOnly )
{
 var bulletImg ;
 var allCol = "document." + ( isIE ? "all." : "" ) + head ;
 var parentDiv = eval( allCol + "Parent" );
 var childDiv  = eval( allCol + "Child" );
 if ( isIE )
 {
  if ( parentDiv )
   bulletImg = parentDiv.children( 0 ).children( 'imEx' );
  if ( childDiv )
  {
   if ( childDiv.style.display == "block" && (!fExpandOnly) )
   {
    childDiv.style.display = "none" ;
    if ( bulletImg )
     bulletImg.src = imgUp ;
   }
   else
   {
    childDiv.style.display = "block" ;
    if ( bulletImg )
     bulletImg.src = imgDn ;
   }
  }
 }
 else
 {
  if ( parentDiv )
   bulletImg = parentDiv.document.images[ 'imEx' ];
  if ( childDiv )
  {
   if ( childDiv.visibility == "hide" )
   {
    childDiv.visibility = "show" ;
    if ( bulletImg )
     bulletImg.src = imgDn ;
   }
   else if ( ! fExpandOnly )
   {
    childDiv.visibility = "hide";
    if ( bulletImg )
     bulletImg.src = imgUp ;
   }
  }
 }
 return false ; // cancels event
}

function doClick ( )
{
 el = event.srcElement;
 while ( el && el.tagName != "A" )
 {
  el = el.parentElement ;
 }
 if ( ! el ) return ;
 if ( el.target != "main" ) return ;
 hiliteSel( el ); 
}
var prevSel = null ;
function hiliteSel ( selLink )
{
 var selColor = "red" ;
 if ( prevSel )
 {
  prevSel.style.color = prevSel.prevColor ;
 }
 prevSel = selLink ;
 prevSel.prevColor = selLink.style.color ;
 selLink.style.color = selColor ;
}

function init() {
  document.onclick = doClick ;
  expandIt("head2");
  //hiliteSel(ttt);
//  parent.frames("Main").location.href = "/gtc/programMgr.html";
}

if ( screen.colorDepth > 8 )
{
// document.write( "<STYLE>BODY{background-image:url(/images/ai/tile_nav.jpg);}</STYLE>" );
}
var licenseID ='01-0006-0038-69648' ;
var pendingChanges =false ;


-------------------------------------------------------------------------------------

 

HTML文件

----------------


<HTML>
<HEAD>
<TITLE></TITLE>
<LINK REL=stylesheet HREF="script/toc.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript" src="script/AdminTree.js"></script>
<STYLE TYPE='text/css'>
.level1 {margin-left:30;}
.level2 {display:none;margin-left:38;}
</STYLE>
</HEAD>
<BODY οnlοad="init()" topmargin="0" leftmargin="0" rightmargin="0">
<DIV CLASS="level1" ID='head2Parent'>
 <A class=OUTDENT href="" οnclick='return expandIt("head2");'><IMG border=0 name=imEx  src="images/arrowUp.gif" id=ttt> 用户管理</a>
</DIV>

<DIV CLASS="level2" ID='head2Child'>
 <A href="addAdmin.jsp" id=ttt target=main οnclick="doClick()"><LI>增加管理员</LI></a>
 <A href="adminList.jsp" id=ttt target=main><LI>用户列表</LI></a>
 <A href="RoleManager.jsp" id=ttt target=main><LI>系统角色</LI></a>
</DIV>

<DIV CLASS="level1" ID='head3Parent'>
 <A class=OUTDENT href="" οnclick='return expandIt("head3");' id=ttt><IMG border=0 height=13 name=imEx  src="images/arrowUp.gif" width=17> 产品管理</a>
</DIV>

<DIV CLASS="level2" ID='head3Child'>
 
 <A href="Resource.jsp" id=ttt target=main><LI>产品列表</LI></a>
 <A href="ListServerResourceDir.jsp" id=ttt target=main><LI>产品搜索</LI></a>
</DIV>

<DIV CLASS="level1" ID='head4Parent'>
 <A class=OUTDENT href="" οnclick='return expandIt("head4");' id=ttt><IMG border=0 height=13 name=imEx  src="images/arrowUp.gif" width=17> 类别管理</a>
</DIV>

<DIV CLASS="level2" ID='head4Child'>
 <A href="Course.jsp" id=ttt target=main><LI>类别列表</LI></a>
 <A href="CourseValidate.jsp" id=ttt target=main><LI>类别AJAVX</LI></a>

</DIV>

<DIV CLASS="level1" ID='head6Parent'>
 <A class=OUTDENT href="" οnclick='return expandIt("head6");' id=ttt><IMG border=0 height=13 name=imEx  src="images/arrowUp.gif" width=17> 订单管理</a>
</DIV>

<DIV CLASS="level2" ID='head6Child'>
 <A href="News.jsp" id=ttt target=main><LI>订单列表</LI></a>
</DIV>

<DIV CLASS="level1" ID='head7Parent'>
 <A class=OUTDENT href="" οnclick='return expandIt("head7");' id=ttt><IMG border=0 height=13 name=imEx  src="images/arrowUp.gif" width=17> 组织结构</a>
</DIV>

<DIV CLASS="level2" ID='head7Child'>
 <A href="Applier.jsp" id=ttt target=main><LI>组织结构管理</LI></a>
</DIV>

<DIV CLASS="level1" ID='head8Parent'>
 <A class=OUTDENT href="" οnclick='return expandIt("head8");' id=ttt><IMG border=0 height=13 name=imEx  src="images/arrowUp.gif" width=17> 直播管理</a>
</DIV>

<DIV CLASS="level2" ID='head8Child'>
      <A href="Live.jsp" id=ttt target=main><LI>直播组织</LI></a>
      <A href="LiveWorkstation.jsp" id=ttt target=main><LI>直播工作站管理</LI></a>
</DIV>

</BODY>
</html>

------------------------------------------------------------------------------------

 

andy_tocm
关注
专栏目录
一种JS做的树
11-26
var myTree = null; function CreateTree() { myTree = new ECOTree('myTree','myTreeContainer'); myTree.config.colorStyle = ECOTree.CS_LEVEL; myTree.config.nodeFill = ECOTree.NF_FLAT; myTree.config.selectMode = ECOTree.SL_NONE; //是否允许给节点加链接，是否允许给节点加图片 myTree.config.useTarget = false; myTree.config.useImg = true; 　　//设置节点的大小和间隔 myTree.config.defaultNodeWidth = 95; myTree.config.defaultNodeHeight = 140; myTree.config.iSubtreeSeparation = 50; myTree.config.iSiblingSeparation = 15; myTree.config.iLevelSeparation = 30; //此处通过从数据库或其它地方读取节点信息，生成添加节点的代码 //参数前三位是必须的； //第一位是本节点id，第二位是父节点id、根节点的父节点为-1，第三位为节点文本； //第四位为节点上显示的图片/照片、图片放到img下并在数据库中记录名称即可，未设参数则取默认图片； //第五位为超链接、最好是访问统一程序传入本节点id； //第六、七位为节点的个性化宽、高。 myTree.add('01',-1,'总裁','./img/0.jpg','http://www.jq-school.com'); myTree.add('02','01','技术副总裁','./img/1.jpg'); myTree.add('03','01','总裁助理','./img/2.jpg','http://www.jq-school.com',95,130); myTree.add('04','01','分公司','./img/3.jpg','http://www.jq-school.com',95,130); myTree.add('0201','02','技术经理','./img/4.jpg','http://www.jq-school.com',95,130); myTree.add('0202','02','技术员','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0301','03','秘书','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0302','03','助理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0401','04','总经理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0402','04','财务','./img/7.jpg','http://www.jq-school.com',95,130); myTree.UpdateTree(); } 包含有例子和源码。
js树型菜单
09-04
JavaScript树型菜单是一种常见的网页交互元素，用于呈现具有层次结构的数据，例如网站导航、文件系统或者组织架构。这种菜单以节点的形式展现，每个节点可以展开或折叠，展示其子节点。在网页设计中，js树型菜单提高...
JS树
12-27 177
录结构菜单 演示地址： http://vip.5d.cn/flood/myjs/htm/menu/dir1.htm 简单树型菜单 演示地址： http://vip.5d.cn/flood/myjs/baoku/0035.htm 经典树型菜单 演示地址： http://vip.5d.cn/flood/myjs/htm/menu/content.htm 顶部滑动菜单 演示地址： http://vip....
JS中的树
qq_41177361的博客
12-19 373
这里的树类比现实生活中的树，有树干，树枝，在程序中树是一种数据结构，对于存储需要快速查找的数据很有用，它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构：） 和树相关的概念：1.子树：由节点和他的后代构成，如上图标示处。2.深度：节点的深度取决于它祖节点的数量，比如节点5有2个祖节点，他的深度为2。3.高度：树...
js(JavaScript)数据结构之树（Tree）
最新发布
星辰迷上大海的博客
01-14 2568
树（Tree）是一种常见的数据结构，由节点（Node）和边（Edge）组成。树的节点通过边连接，形成层次结构。树的一个节点可以有多个子节点，但只有一个父节点（除了根节点）。树的一个重要特点是没有环，即任意两个节点之间都有唯一的路径。
js绘树
qq_32067151的博客
04-13 230
第一步新建HTML文档：&lt;html&gt;   &lt;head&gt;   &lt;style  type="text/css"&gt;   /*设置body样式*/      body{     overflow:hidden;     background: black; }   &lt;/style&gt;   &lt;/head&gt;   &lt;!--设置屏幕背景黑色--&
无限级可刷新Js树型菜单
05-19
无限级可刷新Js树型菜单是一种基于JavaScript实现的前端组件，它主要用于构建具有层级结构的导航菜单。这种菜单系统能够动态加载子节点，且在多页面应用中保持状态，为用户提供直观的导航体验。以下是对这个菜单实现...
无限级可刷新Js树型菜单 dTree特效代码
03-20
【无限级可刷新Js树型菜单 dTree特效代码】是一种基于JavaScript实现的高效且灵活的树形菜单系统，尤其适用于需要展示多层级结构数据的Web应用。它具有以下几个关键特性： 1. **无限级菜单**：dTree允许开发者创建...
Javascript树型菜单
06-13
JavaScript树型菜单是一种在网页中展示层次结构数据的交互式元素，常用于网站导航、文件系统浏览或组织复杂数据。这种菜单通常以节点的形式呈现，每个节点可以展开或折叠，显示其子节点。在给定的文件列表中，我们...
JavaScript树型菜单 dtree
03-01
JavaScript树型菜单dtree是一种常见的前端交互元素，用于在网页中展示层次结构的数据，比如目录、组织架构或者分类。在Web开发中，它为用户提供了一种直观、易于导航的方式来探索和操作多级数据。以下是对这个主题的...
JS生成树型结构
02-09
非常不错的js代码 简单 易用 而且美观 如果你还对js生成像windows文件夹结构的树型结构苦恼的话 就来下载吧
jsTree树控件(基于jQuery, 超强悍)
01-26
插件描述：jsTree是基于javascript的一个跨浏览器树控件，功能强大.
JS横向树（组织结构）
03-22
js版的横向树脚本，可用于开发企业组织架构图。
JSTree(js写的树形菜单，支持加载10000节点以上)
12-23
js树形菜单组件，主要解决大数据加载节点卡死问题。
JS数据结构-树
weixin_46224014的博客
11-08 828
1.什么是树？ 树是一种分层数据的抽象模型 前端常见的树包括:DOM树，级联选择，树形控件 2.二叉树常用操作 先序遍历 中序遍历 后序遍历 深度优先遍历 广度优先遍历 3.代码示例 定义一个二叉树文件 const bt = { val: 1, left: { val: 2, left: { val: 4, left: null, right: null }
JS算法之树（一)
weixin_42274805的博客
08-27 376
之前我们已经介绍过一种非顺序数据结构，是散列表。JavaScript散列表及其扩展还有另外一种非顺序数据结构---树。
JavaScript 数据结构——树
火星基地
03-13 411
概念 树是一种分层数据的抽象模型。 树的常用操作： 深度优先遍历 广度优先遍历 实现 JavaScript中没有树，但是可用Object和Array来构建树。 深度优先遍历 尽可能深地搜索树的分支。 步骤： 访问根节点 对根节点的子节点依次进行深度优先遍历 如上图所示，深度优先遍历这棵树，访问顺序为A - B - D - E -C - F - G。 JavaScript实现： const tree = { val: 'A', children: [{ val: 'B
js数据结构--树(tree)
weixin_33912638的博客
01-18 571
树 二叉树 二叉树实现 tree.js var Tree = function() { var Node = function(value) { this.value = value; this.left = null; this.right = null; } //根节点 ...
JavaScript数据结构与算法 -- 树
qq_43955202的博客
03-08 405
1.树结构 真实的树： 相信每个人对现实生活中的树都会非常熟悉。 让我们来看一下树有什么特点？ 树通常下面有一个根，连接着根的是树干。 树干上面会进行分叉成树枝，数值还会分查成更小的树枝。 在树枝的最后是叶子。 树的抽象： 专家们对树的结构进行了抽象，发现树可以模拟生活中很多的场景。 2.生活场景 公司的组织架构 家谱 3.树结构的抽象 将树结构抽象出来就是我们要学习的树结构。 ...
JSP树型菜单DTree组件：实战案例与代码解析
4. dtree.js：这个文件是JavaScript代码文件，负责实现DTree树型菜单的动态交互功能。JavaScript是网页开发中实现客户端交互的常用脚本语言。通过编写JavaScript代码，树型菜单可以实现节点的点击事件处理、数据的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值